@charset "utf-8";

body {
  font-family: "Noto Serif JP", serif;
  background-color: aliceblue;
  color: darkblue;
  width: 100%;
}

body .flex{
  display: flex;
}

body .block{
  display: block;
}



/* ------------ header ------------ */
/* header参考サイト */
/* https://omiya-keisei.com/ */

header {
  width: 100%;

  /* flex-wrap: wrap;
  align-items: center; */
  /* padding: 20px; */
  color: aliceblue;
  background-color: darkblue;
}

/* ----- header top----- */

header div.header-container{
  display: block;
  margin: 0 auto;
  width: 1024px;
}

header div.header-top{
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* flex-wrap:wrap; */
}

header div.header-logo-container{
  display: block;
  margin-top: 16px;
  margin-left: 16px;
}

header h1{
  /* margin-top: -20px; */
}


header h1 a.logo-img{
  display: inline-block;
  font-size: 24px;
  line-height: 60px;
  letter-spacing: 0.06rem;
  background-image: url(../images/logo_nagaya.svg);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 120px;
  padding-left: 62px;
  color: aliceblue;
  transition: .3s;
}

header div.header-logo-container p a.keisei {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: aliceblue;
  padding-left: 64px;
  letter-spacing: .6px;
  margin-top: -18px;
  transition: .3s;
}

header div.header-logo-container p a span.space{
  margin: 0px .1px;
}

header div.header-logo-container p a.rehab{
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: aliceblue;
  margin-top: -18px;
  transition: .3s;
}

/* ----- header middle----- */

header div.tel-btn-container{
  width: 40%;
  color: aliceblue;
  font-size: 16px;
}

header div.tel-box{
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 24px;
  font-weight: bold;
}

header div.tel-btn-container p.tel,
header div.tel-btn-container p.rehab-tel{
  display: flex;
  align-items: baseline;
  text-indent: 8px;
}

header ul.btn-box{
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding-top: 12px;

}

header div.tel-btn-container p.tel a,
header div.tel-box p.rehab-tel a{
  display: block;
  color: aliceblue;
}

header div.header-middle{
  width: 30%;
}

header dl{
  width: 100%;
}

header a:hover,
header h1 a.logo-img:hover{
  color: orange;
}

header ul.header-middle a{
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: darkblue;
  padding: 8px;
  border-radius: 5px;
  background-color: orange;
  transition: .1s;
}

header ul.header-middle a:hover{
  background-color: #668AD8;
  color: #FFF;
}


header div.header-top div.btn-box ul.btn-box{
  font-weight: 800;
  border-radius: 5px;
  color: darkblue;
}


/* ----- header bottom----- */

header nav.global-nav{
  max-width: 1316px;
  padding-bottom: 8px;
}

header nav ul{
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  padding: 4px;


}

header nav ul li a{
  font-size: 14px;
  text-decoration: none;

  transition: background-color 0.3s;
  color: aliceblue;
}


/* ------------ index  main ------------ */

main h2{
  color: darkblue;
}


main div.eye-catch{
  /* 1920 x 1280 72ppi */
  /* max-width: 1200px; */
  display: flex;
  flex-wrap: wrap;
  order:0;
  background-image: url(../images/first_view.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 720px; */
}

main div.eye-catch p.catch-phrase{
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-size: 2.4rem;
  padding-top: 160px;
  padding-left: 10%;
  padding-bottom: 48px;
}

main div.eye-catch p span.line-break{
  display: block;
  text-indent: -2.4rem;
}

/* ------------ index icons ------------ */

main div.eye-catch ol.icons{
 width: 100%;
 justify-content: center;
 order: 2;
 align-items: baseline;
 gap: 6rem;
 margin-top: 20%;
}

main div.eye-catch ol.icons li{
  font-size: 0.6rem;
  border-radius: 2px;
  background-color: white;
  box-shadow: 2px 2px #668AD8;
  padding: 16px 16px 8px 16px;
  justify-content: center;
}

main div.eye-catch ol.icons li p{
  display: flex;
  justify-content: center;
}

main div.eye-catch ol.icons li a p img.icon{
  width: calc(125px / 2 );
  height: 45px;

}


/* ------------ index hours ------------ */


section.hours{
  width: 320px;
  height: 150px;
  margin-left: 8%;
  order: 1;
  padding:8px 0 4px 0;
  border-radius: 4px;
  background-color: rgb(47, 107, 160);
}

section.hours h2 strong{
  display: block;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: aliceblue;
}

section.hours dl div.hours-box{
  display: flex;
  justify-content:space-between;
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  background-color: #fff;
  text-align: start;
  padding: 0 6px;
}

section.hours p time{
  display: block;
  text-align: center;
  color: #fff;
}

section.hours p.no-reserve{
  display: block;
  text-align: center;
  font-weight: bold;
  color: aliceblue;
  /* border-bottom: 2px solid #668AD8; */
}

section.hours p.no-reserve span.no-res{
  border-bottom: 2px solid rgb(99, 172, 236);
}

/* ------------ index about ------------ */

body.index section.about{
  max-width: 1024px;
  margin: 0 auto;
}

body.index section.about h2,
body.index section.about h3{
  font-weight: bold;
  font-size: 1.6rem;
  padding-left: 8px;
  color:rgb(47, 107, 160);
}


body.index section.about ul li div.box{
  width: ((100% / 3) - 48px);
  height: 380px;
  text-align: justify;
  margin-left: 10px;
  text-decoration: none;
  color: #2A2F32;
  background-color: #FFF;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.30);
  padding: 5px 0 10px;
}

body.index section.about ul li div.box img{
  width: 100%;
  height: 25%;
}

body.index section.about ul li div.box p.description{
  padding: 8px;
  font-size: 12px;
}

/* ------------ index facility ------------ */


body.index section.about{
  padding-top: 24px;
}


/* ------------ index treatment ------------ */

body.index section.treatment{
  max-width: 1024px;
  margin: 24px auto;
  padding-top: 24px;
}

body.index section.treatment a.treatment-box{
  display: flex;
  gap: 24px;
}


body.index section.treatment a.treatment-box img{
  border-radius: 4px;
}

section.treatment a.treatment-box{
  border-radius: 4px;
  align-self: center;
  background-color: #fff;
}

body.index section.treatment a.treatment-box p.description{
  font-size: 20px;
  padding-top: 120px;
}

body.index section.treatment a.treatment-box p span.line-break{
  display: block;
}

/* ------------ index staff ------------ */



/* ------------ index news ------------ */

section.news{
  width: 70%;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  margin: 32px auto;
  padding: 8px;
  border-radius: 4px;
  padding-bottom: 24px;
  background-color: #fff;
}

section.news h2{
  font-weight: bold;
  font-size: 1.6rem;
}


section.news dl.info div.news_box{
  display: inline-block;
  justify-content: space-between;

}

section.news dt{
  border-bottom: 1px solid lightgray;
  width: 190px;
  color: darkblue;
}

section.news dt span,
section.news dd span{
font-size: 11px;
 display: inline-block;
 width: 80px;
 text-align: center;
 color: #fff;
 background-color: rgb(47, 107, 160);
 padding: 2px 3px;
 margin-left: 8px;
 border-radius: 6px;
}

section.news dl.info div.news-box{
 display: flex;
 justify-content: flex-end;
 color: #FFF;
 border-radius: 4px;
 font-size: 12px;
 line-height: 23px;
 padding: 0 5px;
}

section.news dd{
  width: 500px;
  color: darkblue;
  border-bottom: 1px solid lightgray;
  padding-left: 4px;
}

/* ------------ index  access ------------ */

section.access{
  max-width: 1024px;
  margin: 0 auto;
}


section.access h2{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: bold;
}

section.access address.access-box{
  display: flex;
  gap: 1%;
  font-weight: bold;
  width: 1024px;
}

section.access p span.space{
  margin: 0px 16px;
}

section.access p.map{
  font-size: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

/* ------------ footer ------------ */
/* footer参考サイト */
/* https://www.fff.or.jp/clinic-nishifuna/ */

footer {
  background-color: darkblue;
  color: aliceblue;
  padding: 20px;
}

footer h2 a.logo{
  vertical-align: top;
  font-size: 18px;
  color: aliceblue;
}

footer ul li,
footer address p {
  font-size: 12px;
}


footer .flex {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

footer nav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}

footer nav ul li a {
  color: aliceblue;
  text-decoration: none;
}

footer nav ul.block li{
  font-size: 10px;
  transform: scale(0.8);
  transform-origin:0 0;
  text-indent: 5px;
}

footer p.copy {
  font-size: 11px;
  text-align: end;
  color: aliceblue;
}

/* ---------------------------------------about.html----------------------------------- */


body.about main section{
  margin: 0 auto;
}

/* ---------------------- about.html section.pain---------------------- */

body.about main section.pain{
  text-align: center;
  background-image: url(../images/facility02.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 40%;
  font-size: 0.8rem;
  padding: 24px 0;
}

body.about main section.pain h2{
  font-size: 32px;
}

body.about main section.pain p.catch{
  font-size: 24px;
  padding: 1rem;
}

body.about main section.pain ul{
  display: flex;
  justify-content: space-between;
}

body.about main section.pain ul li{
  width: calc((100% / 3) - 40px);
  background-color: #fff;
  margin: 0 48px;
  border-radius: 4px;
  padding-bottom: 8px;
}

body.about main section.pain ul li a{
  display: block;
  margin: 0 auto;
}

body.about main section.pain ul li img{
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

body.about main section.pain ul li span.line-break{
  display: block;
}

body.about main section.pain p.conclusion{
  font-size: 18px;
  font-weight: bold;
  padding-top: 2%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: darkblue;
  text-shadow: 0px 0px 6px rgba(248, 239, 239, 0.986);
}

/* ---------------------- about.html section.flow---------------------- */

body.about section.flow{
 background-color:white;
 width: calc(100% - 96px);
 margin-top: 24px;
 border-radius: 2px;
 padding-bottom: 1.8%;
}


body.about section.flow h2{
  padding-left: 1.5rem;
  padding-top: 1rem;
}


body.about section.flow h3{
  font-size: 32px;
}

body.about section.flow ol li{
  display: flex;
  justify-content: center;
  background-color: white;
  font-size: 14px;
  font-weight: bold;
  text-align: justify;
  padding-top: 2.5rem;
  padding-left: 1.5rem;

}

body.about section.flow ol li img{
  padding-right: 1.5rem;
  border-radius: 2px;
}

body.about section.flow ol li section.flow-box{
  padding-top: 5%;
}

body.about section.flow ol li section.flow-box p.comment{
  padding-top: 2%;
}

body.about section.flow p.caution{
  padding-left: 1.5rem;
  font-weight: bold;
}


/* ---------------------- about.html section.greet---------------------- */

body.about div.greet-container{
  margin-top: 24px;
}


body.about section.greet{
  display: block;
  margin: 0 auto;
  background-color:rgba(26, 136, 209, 0.486);
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  width: calc(100% - 96px);
  border-radius: 2px;
  padding-left: 1.5rem;
  padding-bottom: 1.5rem;
 }

 body.about section.greet h2{
  color: #fff;
 }

 body.about section.greet div.greet-box{
  display: flex;
  gap: 18px;
 }

 body.about section.greet div.greet-box p.h-img{
  width: calc(795px / 2);
  height: calc(723px / 2);
 }


 body.about section.greet div.greet-box p.h-img img{
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
 }


 body.about section.greet div.greet-box p.h-speach{
  width: calc(60% - 24px);
  font-size: 20px;
  text-align: justify;
  text-indent: 1rem;
  padding-right: 24px;
 }

 body.about section.greet div.greet-box p.h-speach span.line-break{
  display: block;
  text-align: end;
  padding-top: 2.5rem;
 }

/* ---------------------- about.html section.staff---------------------- */

body.about div.staff-container{
  width: 100%;
  background-image: url(../images/facility01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


body.about section.staff{
  width: calc(100% - 96px);
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 1.5rem;
 }

 body.about section.staff ul{
  display: flex;
  flex-wrap: wrap;
}


body.about section.staff ul li{
  width: calc(100% / 3);
  background-color: rgba(255, 255, 255, 0.233);
  border-radius: 2px;
  margin: 16px auto;
}

body.about section.staff ul li a{
  display: inline-block;
  margin: 0 auto;
}

body.about section.staff ul li p.profile-img{
  max-width: 290px;
}

body.about section.staff ul li p.profile-img img.height{
  display: block;  
  border-radius: 2px;
}


body.about section.staff ul li h3.name{
  color: darkblue;
  text-indent: 1rem;
}

body.about section.staff ul li p.hobby{
  color: darkblue;
  text-indent: 1rem;
  padding-bottom: 1rem;
}

/* ---------------------------------------contact.html----------------------------------- */


body.contact main section.form-container{
  width: 800px;
  margin: 0 auto;
  padding: 24px 0;
}

body.contact main section.form-container p a.res-con{
  font-size: .8rem;
  font-weight: bold;
}

body.contact main section.form-container p a.res-con span.red{
  color: red;
  border-bottom: 1.6px solid red;

}

body.contact main section.form-container nav ol{
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

body.contact main section.form-container nav ol li{
  padding: 24px 16px;
  margin: 2px 8px;
  background-color: #668AD8;
  border-radius: 2px;
  font-weight: bold;
}

body.contact main section.form-container nav ol li.submit{
  color: white;
  background-color: darkblue;
}

body.contact main section.form-container form{
  font-weight: bold;
  line-height: 2rem;
}

body.contact main section.form-container form p.click{
  font-size: 18px;
}

body.contact main section.form-container form p.click span.line-break{
  display: block;
}

body.contact main section.form-container form  dl dt{
  text-align: center;
  font-size: 18px;
}


body.contact main section.form-container form  dl dd{
  text-align: center;
  font-size: 20px;
  line-height: 36px;
}

body.contact main section.form-container form  dl input,
body.contact main section.form-container form  dl select{
  font-size: 20px;
  margin-top: 6px;
  width: 15rem;
}

body.contact main section.form-container form  dl input.gender,
body.contact main section.form-container form  dl input.radio,
body.contact main section.form-container form  dl dd input.gender{
  text-align: center;
  font-size: 18px;
  margin: 0;
  padding: 0;
  width: 1rem;
}

body.contact main section.form-container form  dl dd input.input,
body.contact main section.form-container form  dl dd select.input{
  height: 32px;
  border-radius: 2px;
  padding: 2px 0 0 20px;
  margin-bottom: 4px;
  width: 24rem;
}

body.contact main section.form-container form span.must{
  display: inline-block;
  text-align: center;
  color: #fff;
  background-color: rgb(47, 107, 160);
  padding: 2px 4px;
  border-radius: 6px;
  margin: 16px 0 8px 10px;
}

body.contact main section.form-container form  dl dd label.gender{
  font-size: 18px;
}

body.contact main section.form-container form dt small{
  font-size: 18px;
  text-align: end;
}

body.contact main section.form-container form  dl input.mail-address{
  width: 24rem;
}

body.contact main section.form-container form  dl dd textarea.inquiry{
  font-family: "Noto Serif JP", serif;
  width: 24rem;
  height: 200px;
  resize: none;
  font-size: 20px;
  text-indent: 1rem;
  padding: .5rem;
  border-radius: 2px;
}

body.contact main section.form-container form  dl dt.submit input.submit{
  font-family:  "Noto Serif JP", serif;
  font-weight: bold;
  padding: 3px;
}