@charset "UTF-8";

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0;
text-decoration: none;
font-weight: normal;
}
body {
font-family: 'Noto Sans JP', sans-serif;
overflow-x: hidden;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
position: relative;
direction: ltr;
}

::selection {
background: #000;
color: #fff;
}

::-moz-selection {
background: #000;
color: #fff;
}
br.sp {
display: none;
}

/* header */
header.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: rgba(255,255,255,0.4);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}

.head-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 4%;
}
.head-inner h1.logo {
max-width: 160px;
width: 100%;
display: block;
}

nav.nav {
display: block;
position: relative;
}
nav.nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
position: relative;
}
nav.nav ul li {
margin-left: 16px;
padding-left: 16px;
position: relative;
display: inline-block;
}
nav.nav ul li:first-child {
margin: 0;
padding-left: 0;
}
nav.nav ul li:last-child {
padding-left: 0;
}

nav.nav ul li:before {
content: "";
display: block;
width: 2px;
height: 16px;
background-color: #000;
transform: rotate(45deg);
position: absolute;
bottom: 0;
left: 0px;
transform-origin: left center;
top: 0;
margin: auto;
}
nav.nav ul li:first-child:before ,
nav.nav ul li:last-child:before {
content: "";
display: none;
}

nav.nav ul li a {
font-size: .9rem;
color: #000;
font-weight: 600;
}
nav.nav ul li:last-child a {
background-color: #e1c1b0;
color: #fff;
padding: 8px 16px;
border-radius: 25px;
} 

.main-vs {
width: 100%;
height: 70vh;
background-image: url(../img/bg.jpg);
background-size: cover;
background-position: right center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-vs p {
font-size: 3.2rem;
font-weight: 600;
max-width: 1000px;
width: 100%;
padding: 0 4%;
}

/* contents start */
main {
width: 100%;
display: block;
}
main.sub-page {
width: 100%;
display: block;
position: relative;
padding-top: 78.7px;
min-height: calc(100vh - 109.76px);
}

section {
width: 100%;
display: block;
position: relative;
}
section .inner {
width: 100%;
max-width: 1100px;
display: block;
position: relative;
padding: 96px 4%;
margin: 0 auto;
}
.title-area {
width: 100%;
display: block;
padding-bottom: 64px;
}
.title-area h2 {
font-size: 1.06rem;
font-weight: 600;
display: block;
position: relative;
padding-left: 24px;
margin-bottom: 24px;
}
.title-area h2:before {
content: "";
display: block;
width: 2px;
height: 24px;
background-color: #000;
transform: rotate(45deg);
position: absolute;
left: 0;
bottom: 0;
transform-origin: left bottom;
}
.title-area span.sub {
font-size: 4.2rem;
font-weight: 600;
}

/* purpose */
.purpose p {
font-size: 1rem;
line-height: 2.2em;
}

/* about */
.about {
background-color: #f9f9f9;
}
.about p {
font-size: 1rem;
line-height: 2.2em;
}

/* quality */
.quality h3 {
font-size: 1.6rem;
font-weight: 600;
line-height: 1.6;
display: inline-block;
position: relative;
padding-bottom: 16px;
margin-bottom: 24px;
}
.quality h3:before {
content: "";
width: 100%;
height: 4px;
background-color: #000;
display: block;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.quality h3:after {
content: "";
width: 30%;
height: 4px;
background-color: #e1c1b0;
display: block;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}

.quality p {
font-size: 1rem;
line-height: 2.2;
display: block;
padding-bottom: 64px;
}
.quality .video {
width: 100%;
display: block;
padding-top: 56.5%;
position: relative;
}
.quality .video video {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

/* organization */
.organization {
background-color: #f9f9f9;
}
.organization dl {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
.organization dl dt {
width: 20%;
font-size: 1.06rem;
font-weight: 600;
display: block;
text-align: center;
margin-bottom: 24px;
padding: 0 4% 16px;
border-bottom: 2px solid #e1c1b0;
}
.organization dl dd {
width: 80%;
font-size: 1.06rem;
display: block;
margin-bottom: 24px;
padding: 0 0 16px 4%;
border-bottom: 2px solid #aaa;
}

/* event */
.event p {
font-size: 1rem;
font-weight: 600;
line-height: 2.2em;
}

/* doctor */
.doctor {
background-color: #f9f9f9;
}
.doctor p {
font-size: 1rem;
font-weight: 600;
line-height: 2.2em;
}

/* insta */
ul.gallery {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
ul.gallery li.gallery-item {
width: 32%;
display: block;
background-color: #fff;
position: relative;
overflow: hidden;
margin-bottom: 24px;
}
ul.gallery li.gallery-item:before {
content: "";
padding-top: 100%;
display: block;
}
ul.gallery li.gallery-item img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ul.gallery li.gallery-item video {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* contact */
.contact p.information {
  font-size: 1rem;
  line-height: 2;
  display: block;
  margin-bottom: 64px;
}
.contact p {
  font-size: 1rem;
  line-height: 2;
  color: #000;
  margin-bottom: 64px;
  display: block;
  position: relative;
}
.contact-wrap {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
}
.contact-wrap dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 0 0 0 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e1c1b0;
}
.contact-wrap dt {
  width: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  font-size: .9rem;
  font-weight: bold;
  line-height: 1.2;
}
.contact-wrap dt span.req {
  padding: 3px 5px;
  color: #e1c1b0;
  font-weight: 700;
  font-size: .8rem;
  border: 1px solid #e1c1b0;
  line-height: 1.2;
}
.contact-wrap dd {
  width: 70%;
  display: block;
  padding-bottom: 20px;
  font-size: .9rem;
  line-height: 1.2;
}
.contact-wrap dd p {
  margin: 0;
  font-size: .9rem;
  text-align: left;
  line-height: 1.2;
}
.contact-wrap dd span.notice {
  font-size: .8rem;
  line-height: 1.6;
  display: block;
  padding-top: 8px;
  color: #454545;
}
.contact-wrap dd input[type="text"], .contact-wrap dd select {
  width: 100%;
  font-family: inherit;
  padding: 7px 2%;
  font-size: .9rem;
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #666!important;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.contact-wrap dd textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 7px 12px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 14px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #666!important;
}
.submit_area {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 48px 0 0 0;
}
.confirmation_btn {
  font-family: inherit;
  width: 48%;
  padding: 15px 10px;
  font-size: 14px;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  cursor: pointer;
  font-weight: 500;
  line-height: 1em;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
input[type="button"][value="戻る"] {
  font-family: inherit;
  padding: 10px 30px;
  font-size: 16px;
  background: none;
  border: 2px solid #000;
  background: none;
  color: #000;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 48%;
  line-height: 1em;
}
input[type="submit"][value="送信"] {
  font-family: inherit;
  padding: 10px 30px;
  font-size: 16px;
  background: none;
  border: 2px solid #000;
  background: #000;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 48%;
  line-height: 1em;
}
input[type="button"][value="TOPページ"] {
  font-family: inherit;
  padding: 10px 30px;
  font-size: 16px;
  background: none;
  border: 2px solid #000;
  background: #000;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 48%;
  line-height: 1em;
}

/* footer */
footer.footer {
width: 100%;
display: block;
background-color: #000;
}
.foot-inner {
width: 100%;
max-width: 1100px;
display: block;
position: relative;
padding: 48px 4%;
margin: 0 auto;
}
.foot-inner p.copy {
font-size: .86rem;
color: #fff;
text-align: center;
display: block;
}

/* modal */
.top-modal {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background-color: #e1c1b0;
}
.modal-bloc {
max-width: 360px;
width: 100%;
padding: 0 2%;
display: block;
}
.modal-bloc h2 {
max-width: 240px;
width: 100%;
display: block;
margin: 0 auto;
padding-bottom: 48px;
}
.modal-bloc p {
font-size: 1.06rem;
line-height: 2.2;
text-align: center;
display: block;
padding-bottom: 48px;
}
.modal-btn ul {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
.modal-btn ul li {
width: 48%;
display: block;
text-align: center;
}
.modal-btn ul li a {
width: 100%;
font-size: 1.06rem;
border: 2px solid #fff;
color: #fff;
padding: 8px 16px;
display: block;
}


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

nav.nav ul li:not(nav.nav ul li:last-child){
display: none;
}
.contact-wrap dt {
  font-size: .8rem;
}

}

@media screen and (max-width:480px) {
.head-inner h1.logo {
max-width: 120px;
}
nav.nav ul li:last-child a {
font-size: .8rem;
}
.title-area h2 {
font-size: .9rem;
padding-left: 32px;
}
.title-area h2:before {
height: 21px;
left: 4px;
}
.title-area span.sub {
font-size: 2rem;
}
.quality h3 {
font-size: 1.36rem;
}
.organization dl dt {
width: 100%;
font-size: 1rem;
text-align: left;
margin-bottom: 16px;
padding: 0 0 4%;
border-bottom: 1px solid #e1c1b0;
}
.organization dl dd {
width: 100%;
font-size: 1rem;
margin-bottom: 24px;
padding: 0 0 24px;
border-bottom: none;
}
ul.gallery li.gallery-item {
width: 48%;
margin-bottom: 16px;
}
.contact-wrap dt {
  width: 100%;
  font-size: .9rem;
}
.contact-wrap dd {
  width: 100%;
}
}