/* ======================================== *

 * トップページ用 -for SP

/* ======================================== */



/* ---------- 明朝体にする部分 ---------- */

#time table,

#time p,

#contact p:nth-of-type(1),

#contact p:nth-of-type(2) {

  font-family: 'Shippori Mincho B1', serif;

  text-align: center;

}





/* ---------- スライド ---------- */

.slide {

  position: relative;

  width: 100%;

  height: 200px;

  overflow: hidden;

  margin: 0 auto;

}

.img_1, .img_2, .img_3 {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.img_1 {

  background: url('../img/top_slide_1.jpg') center center no-repeat;

  background-size: cover;

  animation: slide-01 20s infinite;

}

.img_2 {

  background: url('../img/top_slide_2.jpg') center center no-repeat;

  background-size: cover;

  animation: slide-02 20s infinite;

}

.img_3 {

  background: url('../img/top_slide_3.jpg') center center no-repeat;

  background-size: cover;

  animation: slide-03 20s infinite;

}

@keyframes slide-01 {

  0% {opacity: 1; transform: scale(1.0);}

  30% {opacity: 1;}

  40% {opacity: 0; transform: scale(1.05);}

  90% {opacity: 0}

  100% {opacity: 1; transform: scale(1.0);}

}

@keyframes slide-02 {

  0% {opacity: 0;}

  30% {opacity: 0; transform: scale(1.0);}

  40% {opacity: 1;}

  60% {opacity: 1;}

  70% {opacity: 0; transform: scale(1.05);}

  100% {opacity: 0;}

}

@keyframes slide-03 {

  0% {opacity: 0;}

  60% {opacity: 0; transform: scale(1.0);}

  70% {opacity: 1;}

  90% {opacity: 1; transform: scale(1.05);}

  100% {opacity: 0; transform: scale(1.05);}

}

/* ---------- /スライド ---------- */





/* ---------- トップビジュアル ---------- */

.catch {

  position: absolute;

  top: 60px;

  width: 95%;

  text-align: right;

}

.en .catch {

  height: 0;

}

.catch img {

  height: 270px;

}

.vis {

  position: absolute;

  top: 55px;

/* top: 255px; */

  width: 150px;

  height: 90px;

  background: url(../img/top_light.png) -50px -60px no-repeat;

  background-size: 180px auto;

}

/* ---------- /トップビジュアル ---------- */





/* ---------- 医療理念 ---------- */

#philosophy {

  background: #f5ead8;

  padding: 0 0 5rem;

}

#philosophy h2 {

  margin: 0 0 3rem;

  line-height: 104px;

  background: url(../img/hr.png) repeat-x;

  background-size: 1000px auto;

  background-position: -25px -30px;

}

#philosophy h3 {

  margin: 3rem 0 2rem;

}

#philosophy img {

  width: calc(100% - 4em);

  margin: 2em;

}

#philosophy p {

  margin: 1em 2em;

}

#philosophy .content_end {

  margin-top: 3em;

}



/* もっと見るボタン dedail版 */

.details_summary {

  position: relative;

  display: block;

  width: calc(100% - 4em);

  height: 50px;

  margin: 2rem 2em 0;

  background: linear-gradient(to bottom, #462e1e, #3f291b);

  color: #f2e5d2;

  font-size: 1.4rem;

  text-align: center;

  line-height: 50px;

  border-radius: 6px;

  outline: 0;

  transition: 0.5s;

  -erbkit-transition: 0.5s;

  cursor: pointer;

}

/* for safari */

.details_summary::-webkit-details-marker {

  display: none;

}

.details_summary::after {

  content: 'もっと見る ▼';

  color: #f2e5d2;

}

/* ボタンクリック時 */

.details[open] .details_summary {

  top: 700px;

  background: linear-gradient(to bottom, #432c1d, #603e29);

}

.details[open] .details_summary::after {

  content: '折りたたむ ▲';

  color: #c39b77;

}

.details[open] .details_content {

  margin: -70px 0 10rem;

}



/* もっと見るボタン input版 */

/*

.more_hidden {

  display: none;

}

.more_open {

  position: relative;

  display: block;

  width: calc(100% - 4em);

  height: 50px;

  margin: 2rem 2em 0;

  background: linear-gradient(to bottom, #462e1e, #3f291b);

  color: #f2e5d2;

  font-size: 1.4rem;

  text-align: center;

  line-height: 50px;

  border-radius: 6px;

  outline: 0;

  transition: 0.5s;

  -erbkit-transition: 0.5s;

  cursor: pointer;

}

.more_open::after {

  content: 'もっと見る ▼';

  color: #f2e5d2;

}

*/

/* ボタンクリック時 */

/*

#more_input:checked ~ .more_open {

  top: 700px;

  background: linear-gradient(to bottom, #432c1d, #603e29);

}

#more_input:checked ~ .more_open:after {

  content: '折りたたむ ▲';

  color: #c39b77;

}

*/

/* 本文の非表示部分 */

/*

.hide {

  display: block;

  height: 0;

  opacity: 0;

  transition: 0.5s;

}

*/

/* ボタンクリック時（本文） */

/*

#more_input:checked ~ .hide {

  margin: -70px 0 10rem;

  height: auto;

  opacity: 1;

}

*/

/* ---------- /医療理念 ---------- */





/* ---------- 診療科目 ---------- */

.subject_img_content img {

  display: none;

}

#subject {

  padding: 0 0 8rem;

  background: #fcfaf7;

}

#subject h2 {

  margin: 0 0 2rem;

  line-height: 104px;

  background: url(../img/top_h2_subject_sp.jpg) left top no-repeat;

  background-size: cover;

}

#subject h3 {

  margin: 3rem 0;

}

#subject .wrap {

  width: 100%;

}

.col .half_col {

  margin: 0;

}

.half_col:first-of-type dl {

  margin: 0 0 0 1em;

  padding: 1em;

  background: #fff;

  border: 1px solid #e8e8e8;

  border-right: none;

  border-radius: 6px 0 0 6px;

}

.half_col:nth-of-type(2) dl {

  margin: 0 1em 0 0;

  padding: 1em 1em 1em 2em;

}

.half_col:nth-of-type(2) dl:first-of-type {

  background: #fff;

  border: 1px solid #e8e8e8;

  border-left: none;

  border-radius: 0 6px 6px 0;

}

.half_col dt {

  font-weight: bold;

  width: 23%;

}

.en .half_col dt a {

  color: #412a1c;

}

.half_col dd {

  width: 77%;

}

/* ---------- /診療科目 ---------- */





/* ---------- 診療時間 ---------- */

#time {

  padding: 0 0 8rem;

}

#time h2 {

  margin: 0 0 3rem;

  line-height: 104px;

  background: url(../img/top_h1_time.jpg) left top no-repeat;

  background-size: cover;

}

#time .note {

  min-width: 350px;

  width: 50%;

  margin: 0 auto;

}

#time .note dt {

  width: 120px;

  margin: 0.5rem 0.5rem 0 0;

  padding: 0.3rem 1em;

  background: #f2e5d2;

  border-radius: 3px;

}

#time .note dd {

  width: calc(100% - 120px);

  margin: 0.5rem 0 0 0;

  padding: 0.2rem 0 0.2rem 0.5rem;

}

#time table {

  width: auto;

  margin: 1rem auto;

  /* letter-spacing: 0; */

}

#time table:nth-of-type(2) {

  width: 350px;

}

#time th {

  padding: 0.5rem 0.7rem;

  text-align: center;

  vertical-align: middle;

  white-space: nowrap;

  border: 1px solid #c7bcad;

}

#time tr:first-child th {

  background: #f2e5d2; /*ベージュ*/

}

#time tr:not(tr:first-child) th {

  background: #fcfaf7; /*ライトベージュ*/

}

#time table tr:nth-of-type(7) th { /*土曜*/

  background: #e8f1fa;

}

#time table tr:last-child th { /*日曜*/

  background: #fff0f6;

}

#time .atention {

  position: relative;

}

#time .atention span {

  position: absolute;

  top: -4px;

  right: -3px;

  font-size: 50%;

  font-family: 'Sawarabi Gothic', sans-serif;

}

#time td {

  padding: 0.5rem;

  vertical-align: middle;

  white-space: nowrap;

  border: 1px solid #c7bcad;

}

.atention_list {

  margin: 0 auto;

  width: 340px;

}

.atention_list dl {

  margin: 0 0 0.5rem;

}

.atention_list dt {

  margin: 0;

}

/* ---------- /診療時間 ---------- */





/* ---------- 自費診療 ---------- */

#not-insured .bg_light_beige {

  padding: 0 0 10rem;

  background: url(../img/hr.png) left bottom repeat-x #fcfaf7;

  background-size: 900px auto;

  background-position: 0 115%;

}

#not-insured h2 {

  margin: 0;

  padding-top: 2rem;

  height: 104px;

  background: url(../img/top_h1_not-insured.jpg) left center no-repeat;

  background-size: auto 120px;

}

#not-insured h2 span {

  font-size: 2rem;

}

#not-insured h3 {

  margin-top: 0;

  padding-top: 3rem;

}

/* ---------- /自費診療 ---------- */





/* ---------- お知らせ ---------- */

#notice {

  padding: 5rem 0 8rem;

}

#notice h2 {

  margin-top: 0;

}

#notice dt {

  width: 5em;

  text-align: right;

}

/* ---------- /お知らせ ---------- */





/* ---------- アクセス ---------- */

#access {

  padding: 0 0 8rem;

}

#access h2 {

  margin: 0 0 3rem;

  line-height: 104px;

  background: url(../img/top_h1_access.jpg) -50px top no-repeat #bed5f7;

  background-size: auto 104px;

}

#access h4 {

  margin: 5rem auto 2rem;

  font-weight: bold;

}

.en #access dl {

  display: block;

}

.en #access dl dt {

  margin: 0 0 0.5rem;

  font-weight: bold;

  border-bottom: 1px dotted #ccc;

}

.en #access dl dd {

  margin: 0 0 2em;

}

iframe {

  /*aspect-ratio: 16/9;*/

  min-width: 280px;

  width: 100%;

  height: 400px;

  border: 0;

}

/* ---------- /アクセス ---------- */



/* ---------- お問い合わせ ---------- */

#contact {

  padding: 0 2em 5rem;

  background: url(../img/content_bg.png) -40px -255px no-repeat #fcfaf7;

  background-size: auto 480px;

}

#top #contact h2 {

  margin: 0;

  padding: 5rem 0;

}

/* ---------- /お問い合わせ ---------- */



/* ---------- その他 ---------- */

h2 {

  font-size: 2.7rem;

}

.en h3 {

  font-size: 2rem;

}

h3 {

  line-height: 2.5rem;

  border: none;

}

p {

  margin: 1rem 0;

}

.en p:not(.copyright) {

  font-size: 1.6rem;

  line-height: 2.3rem;

}











/* ======================================== *

 * トップページ用 -for Tablet

/* ======================================== */

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



/* ---------- スライド ---------- */

.slide {

  height: 250px;

}

/* ---------- /スライド ---------- */





/* ---------- トップビジュアル ---------- */

.catch {

  position: absolute;

  top: 80px;

  width: 95%;

  text-align: right;

}

.catch img {

  height: 340px;

}

.vis {

  top: 70px;

  width: 180px;

  height: 130px;

  background: url(../img/top_light.png) -70px -85px no-repeat;

  background-size: 250px auto;

}

/* ---------- /トップビジュアル ---------- */





/* ---------- 医療理念 ---------- */

#philosophy h2 {

  margin: 0 0 5rem;

  line-height: 150px;

  background-size: auto 200px;

  background-position: -25px -30px;

}

#philosophy h3 {

  margin: 4rem 0 3rem;

}

#philosophy .content_end {

  margin: 4em 0 2em;

}

/* もっと見るボタン detail版ボタンクリック時 */

.details[ppen] .details_summary {

  top: 770px;

}

/* もっと見るボタン input版ボタンクリック時 */

/*

#more_input:checked ~ .more_open {

  top: 770px;

}

*/

/* ---------- /医療理念 ---------- */



/* ---------- 診療時間 ---------- */

#time .note dt {

  width: 130px;

}

#time .note dd {

  width: calc(100% - 130px);

}

#time table:nth-of-type(2) {

  width: 410px;

}

#time th,

#time td {

  padding: 0.5rem 1rem;

}

.atention_list {

  width: 400px;

}

/* ---------- /診療時間 ---------- */





/* ---------- 自費診療 ---------- */

#not-insured .bg_light_beige {

  padding: 0 0 13rem;

  background-size: 1400px auto;

  background-position: 0 135%;

}

#not-insured h2 {

  padding-top: 1rem;

  background: url(../img/top_h1_not-insured.jpg) center center no-repeat;

  background-size: cover;

}

#not-insured h2 span {

  font-size: 1.7rem;

}

#not-insured h3 {

  padding: 5rem 0 2.5rem;

}

/* ---------- /自費診療 ---------- */



/* ---------- お知らせ ---------- */

#notice {

  padding: 8rem 0;

}

/* ---------- /お知らせ ---------- */



/* ---------- アクセス ---------- */

iframe {

  height: 500px;

}

/* ---------- /アクセス ---------- */





/* ---------- お問い合わせ ---------- */

#contact {

  background: url(../img/content_bg.png) -40px -200px no-repeat #fcfaf7;

  background-size: auto 550px;

}

/* ---------- /お問い合わせ ---------- */





/* ---------- その他 ---------- */

.en h2 {

  font-size: 3rem;

}

.en h3 {

  font-size: 2.3rem;

  line-height: 2.7rem;

}



}











/* ======================================== *

 * トップページ用 -for PC

/* ======================================== */

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



/* ---------- スライド ---------- */

.slide {

  height: 320px;

}

/* ---------- /スライド ---------- */





/* ---------- トップビジュアル ---------- */

.catch {

  position: relative;

  top: 0;

  min-width: 850px;

  width: 70%;

  margin: -250px auto 0;

}

.en .catch {

  height: 510px;

}

.catch img {

  width: 180px;

  height: 510px;

}

.vis {

  position: absolute;

  top: 500px;

  width: 70%;

  height:230px;

  background-image: url(../img/top_light.png), url(../img/hr.png);

  background-position: left -120px, 170px 60px;

  /*background-position: left -120px, 700px 60px;*/

  background-repeat: no-repeat, repeat-x;

  background-size: 400px auto, 1300px auto;

}

/* ---------- /トップビジュアル ---------- */





/* ---------- 医療理念 ---------- */

#philosophy {

  min-width: 700px;

  width: 80%;

  max-width: 1150px;

  margin: -12rem auto 0;

  padding: 12rem 5rem 3rem;

  border-radius: 6px;

  z-index: 5;

}

#philosophy img {

  width: 100%;

  margin: 2rem 0;

}

#philosophy h2 {

  position: absolute; /* SEO対応 */

  top: 705px;

  width: calc(80% - 10rem);

  max-width: 1050px;

  line-height: 4.5rem;

  background: none;

}

#philosophy h3 {

  min-width: 100%;

}

#philosophy p {

  margin: 1rem 0;

}



/* もっと見るボタン dedail版 */

.details_summary {

  width: 100%;

  margin: 3rem auto 0;

}

.details_summary:hover {

  background: linear-gradient(to bottom, #432c1d, #603e29);

}

.details_summary:hover:after {

  color: #d7aa61;

}

/* もっと見るボタン input版 */

/*

.more_open {

  width: 100%;

  margin: 2rem auto 0;

}

.more_open:hover {

  background: linear-gradient(to bottom, #432c1d, #603e29);

}

.more_open:hover:after {

  color: #d7aa61;

}

*/

/* ボタンクリック時 */

/*

#more_input:checked ~ .more_open {

  top: 700px;

}

*/

/* ---------- /医療理念 ---------- */





/* ---------- 診療科目 ---------- */

.subject_img_content {

  position: relative;

  margin: -100px 0 0;

  padding: 170px 0 35px;

  background:  #fcfaf7;

  z-index: -1;

}

.en .subject_img_content {

  padding: 170px 0 100px;

  background: url(../img/content_bg.png) -85px 85% no-repeat #fcfaf7;

  background-size: 550px;

}

.subject_img_content img {

  display: block;

  position: absolute;

  left: calc(100% - 280px);

  top: -58px;

  width: 260px;

}

#subject {

  padding: 0 0 100px;

  background: url(../img/content_bg.png) -30px 110% no-repeat #fcfaf7;

  background-size: 550px;

}

#subject .wrap {

  width: 70%;

}

.en #subject {

  display: block;

  padding: 0;

  height: 350px;



}

#subject h2 {

  margin: 0;

  background: none;

}

#subject h3 {

  min-width: auto;

  width: 100%;

  margin: 3rem auto 2rem;

}

.half_col:first-of-type dl {

  padding: 1em 1em 1em 2em;

}

.half_col:nth-of-type(2) dl {

  padding: 1em 2em 1em 1em;

}

.half_col:first-of-type dl dd,

.half_col:nth-of-type(2) dl:first-of-type dd {

  height: 7em;

}

/* ---------- /診療科目 ---------- */





/* ---------- 診療時間 ---------- */

#time {

  padding: 0 0 100px;

}

#time h2 {

  line-height: 230px;

}

#time .note {

  width: 500px;

}

#time .note dt {

  width: 135px;

}

#time .note dd {

  width: calc(100% - 135px);

}

#time .note dd {

  white-space: nowrap;

}

#time table {

  writing-mode: vertical-lr;

  width: auto;

  margin: 1rem auto;

}

/* for safari */

_:lang(x)+_:-webkit-full-screen-document,

#time table {

  writing-mode: horizontal-tb;

}

#time table:nth-of-type(2) {

  min-width: 890px;

  width: 75%;

}

#time th {

  writing-mode: horizontal-tb;

  -webkit-writing-mode: vertical-tb;

  padding: 0.5rem 1rem;

}

#time .atention span {

  top: -4px;

  right: -3px;

}

#time td {

  writing-mode: horizontal-tb;

  padding: 0.7rem 1rem;

}

#time table:first-of-type td {

  width: 70px;

}

#time table:last-of-type td {

  min-width: 90px;

}

/* for safari */

_:lang(x)+_:-webkit-full-screen-document,

#time table:last-of-type {

  width: 420px;

}

.atention_list {

  min-width: 890px;

  width: 75%;

}

/* for safari */

_:lang(x)+_:-webkit-full-screen-document,

#time .atention_list {

  width: 410px;

}

/* ---------- /診療時間 ---------- */





/* ---------- 自費診療 ---------- */

#not-insured .bg_light_beige {

  padding: 0 0 16rem;

  background-size: 1600px auto;

  background-position: 0 145%;

}

#not-insured h2 {

  height: 230px;

  padding-top: 5rem;

}

#not-insured h2 span {

  font-size: 2.5rem;

}

/* ---------- /自費診療 ---------- */





/* ---------- お知らせ ---------- */

#notice button a:hover {

  background: linear-gradient(to bottom, #fff, #edf4ff);

  transition: all .3s;

}

/* ---------- /お知らせ ---------- */





/* ---------- アクセス ---------- */

#access {

  padding: 0 0 100px;

}

#access h2 {

  line-height: 230px;

  background-size: auto 230px;

}

#access .col div:first-child {

  width: calc(50% - 1.5em);

  margin: 0 1.5em 0 0;

}

#access .col div:last-child {

  width: 60%;

}

#access h4:first-child {

  margin: 0 0 1rem;

}

#access h4 {

  margin: 3em 0 1rem;

}

.en #access dl dt {

  margin: 0 0 0.5rem;

}

.en #access dl dd {

  margin: 0 0 2em;

}

iframe {

  height: 800px;

}

/* ---------- /アクセス ---------- */





/* ---------- お問い合わせ ---------- */

#contact {

  padding: 0 0 100px;

  background-image: url(../img/content_bg.png), url(../img/content_bg.png);

  background-position: -80px -215px, calc(100% + 280px) 10px;

  background-repeat: no-repeat, no-repeat;

  background-size: auto 600px, auto 650px;

  background-color: #fcfaf7;

}

#top #contact h2 {

  margin: 0;

  padding: 10rem 0;

}

/* ---------- /お問い合わせ ---------- */





/* ---------- その他 ---------- */

#top h2 {

  font-size: 4.5rem;

}

.en h3 {

  font-size: 3rem;

  line-height: 3.2rem;

}

.en p:not(.copyright) {

    font-size: 1.8rem;

    line-height: 2.5rem;

}



}