@charset "UTF-8";

/* default sp
	----------------------------------------------- */
/* ============================================= sp
================================================*/
.top-title { margin-bottom: 5vw; text-align: center; }
.top-title .en { margin-bottom: 1vw; color: var(--blue); font-size: 9.21vw; font-family: "Montserrat"; font-optical-sizing: auto; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.top-title .jp { font-size: 3.95vw; font-family: var(--mincho); display: block; }

.top-search { padding: 14vw 0 10vw; background: url(../images/top-search-deco.png) no-repeat top right; background-size: 55vw; }
.top-search-head { width: 80vw; margin: 0 auto 6vw; }
.top-search-head-comment { font-size: 3.5vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-search-items { width: 80vw; margin: 0 auto; }
.top-search-item { width: 100%; padding: 1px 0; margin-bottom: 4vw; background: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.top-search-item:first-child .top-search-item-box { display: block; }
.top-search-item-title { width: 100%; padding: 6vw 0 5vw; color: var(--blue); font-size: 5.26vw; font-family: var(--mincho); text-align: center; cursor: pointer; overflow: hidden; position: relative; }
.top-search-item-title.open:after { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.top-search-item-title:before { content: ''; width: 12vw; height: 12vw; background: #e2fafc; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: -7.5vw; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-search-item-title:after { content: '\f107'; font-family: 'icon'; pointer-evens: none; position: absolute; top: 6vw; right: 6vw; -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-search-item-box { padding-bottom: 4vw; display: none; }
.top-search-item-image {width: 50vw;margin: 0 auto 4vw;}
.top-search-initems { width: 90%; margin: 0 auto; }
.top-search-initems li { font-size: 3.68vw; font-family: var(--mincho); font-weight: 600; line-height: 1.4; border-bottom: 1px dotted #bebebe; position: relative; }
.top-search-initems li:last-child { border: none; }
.top-search-initems a { padding: 2.5vw 0; }
.top-search-initems a:after { content: '\f105'; color: var(--blue); font-family: 'icon'; pointer-evens: none; position: absolute; top: 50%; right: 4vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.top-campaign { padding-bottom: 26vw; z-index: 1; position: relative; }
.top-campaign:after { content: ''; width: 100vw; height: 106vw; background: url(../images/top-campaign-deco.png) no-repeat top left; background-size: 100%; z-index: -1; position: absolute; bottom: 15vw; left: 0; }
.top-campaign-head { margin: 0 auto 6vw; }
.top-campaign-head-comment { font-size: 3.5vw; text-align: center; line-height: 1.8; }
.top-campaign-items { width: 100%; padding-bottom: 16vw; margin-bottom: 8vw; }
.top-campaign-items:after { content: ''; width: 60vw; height: 1px; background: #cfcac4; position: absolute; right: 0; bottom: 5vw; }
.top-campaign-items .prev { width: 12vw; height: 12vw; color: #bababb; font-size: 4.61vw; background: #fff; border: 1px solid #bababb; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; z-index: 2; position: absolute; bottom: 0; left: 10vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.top-campaign-items .next { width: 12vw; height: 12vw; color: #bababb; font-size: 4.61vw; background: #fff; border: 1px solid #bababb; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; z-index: 2; position: absolute; bottom: 0; left: 24vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.top-campaign-item { width: 80vw; margin: 0 8vw; }
.top-campaign-item-image { width: 100%; margin-bottom: 4vw; }
.top-campaign-item-title { font-size: 3.5vw; line-height: 1.4; }
.top-campaign-item-comment p { font-size: 3.5vw; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.top-about { padding: 1px 0 14vw; background: url(../images/top-about-bg.jpg) no-repeat center bottom; background-size: cover; position: relative; }
.top-about-image { width: 100%; margin: -5vw 0 8vw; }
.top-about-image .image01 { width: 85vw; z-index: 0; position: relative; }
.top-about-image .image02 { width: 36vw; margin: -18vw 0 0 auto; z-index: 1; position: relative; }
.top-about-image .image03 { width: 25vw; margin: -14vw auto 0 32vw; z-index: 2; position: relative; }
.top-about-text { width: 80vw; margin: 0 auto; }
.top-about-title { text-align: left; }
.top-about-subtitle {margin-bottom: 4vw;font-size: 4.8vw;font-family: var(--mincho);font-weight: 600;line-height: 1.6;}
.top-about-subtitle span { color: var(--blue); }
.top-about-head-comment { margin-bottom: 5vw; }
.top-about-head-comment p { font-size: 3.5vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-about-more { margin-left: 0; }
.top-about-deco { width: 265vw; color: #fff; font-size: 17.11vw; font-family: "Montserrat"; font-optical-sizing: auto; font-weight: 400; letter-spacing: 0.4vw; position: absolute; top: -20vw; left: -4vw; }

.top-case { padding: 14vw 0; }
.top-case-items { width: 100%; padding-bottom: 10vw; margin-bottom: 6vw; }
.top-case-item { width: 80vw; margin: 0 2.25vw; background: #fff; -moz-border-radius: 0 0 12px 12px; -webkit-border-radius: 0; border-radius: 0 0 12px 12px; }
.top-case-item-image { width: 100%; }
.top-case-item-text { padding: 5vw 5vw 8vw; }
.top-case-item-title { margin-bottom: 3.5vw; color: var(--blue); font-size: 4.21vw; font-weight: bold; text-align: center; line-height: 1.4; }
.top-case-item-button { width: 70vw; padding: 3vw 0 2.5vw; margin: 0 auto; font-size: 3.5vw; text-align: center; background: #e6f2f4; -moz-border-radius: 10vw; -webkit-border-radius: 10vw; border-radius: 10vw; cursor: pointer; position: relative; }
.top-case-item-button.open:after { -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
.top-case-item-button:after { content: '\f107'; color: var(--blue); font-family: 'icon'; position: absolute; top: 50%; right: 4vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }

.top-case-item-comment { padding-top: 2.5vw; display: none; }
.top-case-item-comment p { font-size: 3.16vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-case-item-comment .note{font-size: 3vw;line-height: 1.5;}

.top-instagram { padding-bottom: 14vw; }
.top-instagram-title .deco { width: 40vw; margin: 0 auto 2.5vw; }
.top-instagram-items { width: 80vw; margin: 0 auto 4vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
.top-instagram-items li { width: 48.5%; margin-bottom: 4vw; }
.top-instagram-items img { width: 100%; }

.top-clinic { padding-bottom: 14vw; }
.top-clinic-text { padding: 0 10vw 10vw; margin: 0 auto; background: url(../images/top-campaign-deco.png) no-repeat right bottom; background-size: 65vw; position: relative; }
.top-clinic-title { text-align: left; }
.top-clinic-title .en { font-size: 11.84vw; }
.top-clinic-date { margin-bottom: 2vw; }
.top-clinic-date dl { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-clinic-date dt {width: 25%;margin-bottom: 4vw;font-size: 4vw;font-weight: bold;}
.top-clinic-date dd {width: 74%;padding: 2vw 0 2vw 5vw;margin-bottom: 4vw;font-size: 3.5vw;line-height: 1.6;border-left: 1px solid #a3a4a4;}
.top-clinic-date .back {padding: 1vw 2vw;margin: 1vw 0;background: #fff;display: table;width: 100%;}
.top-clinic-link-items { width: 60vw; margin: 0 auto; }
.top-clinic-link-items li { width: 100%; margin-bottom: 2.5vw; }
.top-clinic-link-items a { width: 100%; }
.top-clinic-map { height: 65vw; }

.top-pickup { padding-bottom: 8vw; }
.top-pickup-title { margin-bottom: 6vw; font-size: 6.58vw; font-family: "Montserrat"; font-optical-sizing: auto; font-weight: 400; letter-spacing: 0.4vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-pickup-title:before { content: ''; height: 1px; margin-right: 5vw; background: #acacac; flex: 1; }
.top-pickup-title:after { content: ''; height: 1px; margin-left: 5vw; background: #acacac; flex: 1; }
.top-pickup-items {width: 98vw;margin: 0 auto;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;}
.top-pickup-items li {width: 45%;margin: 0 2vw 6vw 2vw;}
.top-pickup-item-image { width: 100%; margin-bottom: 2.5vw; }
.top-pickup-item-title { position: relative; }
.top-pickup-item-title:after { content: '\f105'; color: var(--blue); font-size: 4.61vw; font-family: 'icon'; pointer-evens: none; position: absolute; top: 50%; right: 2vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-pickup-item-title .en { margin-bottom: 1vw; color: var(--blue); font-size: 5.26vw; font-family: "Montserrat"; font-optical-sizing: auto; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.top-pickup-item-title .jp { font-size: 3.5vw; font-family: var(--mincho); display: block; }

/* ============================================= pc
================================================*/
@media screen and (min-width: 736px) { 
.top-title { margin-bottom: 30px; }
.top-title .en { margin-bottom: 5px; font-size: 45px; letter-spacing: 2px; }
.top-title .jp { font-size: 15px; }
	
.top-search { padding: 140px 0 120px; background-size: 550px; }
.top-search-head { width: 100%; margin-bottom: 50px; }
.top-search-head-comment { font-size: 14px; text-align: center; }
.top-search-items {width: 95%;max-width: 1200px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.top-search-item {width: 49%;margin-bottom: 20px;}
.top-search-item-title { padding: 30px 0 10px; font-size: 20px; cursor: auto; }
.top-search-item-title:after{content:none;}
.top-search-item-title:before { width: 50px; height: 50px; top: -30px; }
.top-search-item-box { padding-bottom: 15px; display: block; }
.top-search-item-image {width: 220px;margin-bottom: 15px;}
.top-search-initems li { font-size: 15px; }
.top-search-initems a { padding: 12px 5px; }
.top-search-initems a:hover { background: #f5ffff; opacity: 1; }
.top-search-initems a:hover:after { right: 15px; }
.top-search-initems a:after { right: 10px; -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
	
.top-campaign { padding-bottom: 160px; }
.top-campaign:before { content: ''; width: 50vw; height: 410px; background: #f3eae2; z-index: -1; position: absolute; bottom: 0; left: 0; }
.top-campaign:after { width: 520px; height: 550px; bottom: 0; left: calc(50% - 410px); }
.top-campaign-content {width: 95%;max-width: 1200px;padding-left: 415px;margin: 0 auto;position: relative;}
.top-campaign-head { width: 415px; margin: 0; position: absolute; top: 0; left: 0; }
.top-campaign-title { text-align: left; }
.top-campaign-head-comment { font-size: 15px; text-align: left; }
.top-campaign-items { width: calc(50vw + 180px); padding-bottom: 80px; margin: 0; }
.top-campaign-items:after { width: calc(50vw + 40px); bottom: 25px; }
.top-campaign-items .prev { width: 50px; height: 50px; font-size: 20px; left: 0; }
.top-campaign-items .next { width: 50px; height: 50px; font-size: 20px; left: 65px; }
.top-campaign-item { width: 380px; margin: 0 20px 0 0; }
.top-campaign-item-image { margin-bottom: 20px; }
.top-campaign-item-title { margin-bottom: 5px; font-size: 15px; }
.top-campaign-item-comment p { font-size: 15px; }
.top-campaign-more { position: absolute; top: 190px; left: 0; }
	
.top-about {padding-bottom: 100px;z-index: 1;}
.top-about-content {width: 95%;max-width: 1200px;margin: 0 auto;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.top-about-image {width: 60%;margin-bottom: 0;}
.top-about-image .image01 {width: 100%;}
.top-about-image .image02 {width: 275px;margin-top: -250px;left: 350px;}
.top-about-image .image03 { width: 185px; margin: -80px auto 0 285px; }
.top-about-text {width: 90%;padding-top: 0;margin: -50px 0 0 0;}
.top-about-subtitle { margin-bottom: 30px; font-size: 26px; }
.top-about-subtitle .des{display:none;}
.top-about-head-comment { margin-bottom: 30px; }
.top-about-head-comment p { font-size: 15px; }
.top-about-deco { width: 2150px; font-size: 130px; letter-spacing: 8px; opacity: 0.5; z-index: -1; top: -110px; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
	
.top-case { padding: 140px 0; }
.top-case-items { padding-bottom: 40px; margin-bottom: 30px; }
.top-case-items .slick-dots li { width: 12px; height: 12px; margin: 0 8px; }
.top-case-item { width: 400px; margin: 0 25px; }
.top-case-item-text { padding: 25px 40px; }
.top-case-item-title { margin-bottom: 12px; font-size: 18px; }
.top-case-item-button { width: 100%; padding: 12px 0; font-size: 15px; }
.top-case-item-button:after {right: 20px;}
.top-case-item-comment { padding-top: 15px; }
.top-case-item-comment p { font-size: 12px; }
.top-case-item-comment .note{font-size: 12px;}
	
.top-instagram { padding-bottom: 140px; z-index: 1; position: relative; }
.top-instagram:after { content: ''; width: 520px; height: 550px; background: url(../images/top-campaign-deco.png) no-repeat top left; background-size: 100%; z-index: -1; position: absolute; right: 0; bottom: 0; }
.top-instagram-title .deco { width: 188px; margin-bottom: 10px; }
.top-instagram-items {width: 95%;max-width: 1200px;margin-bottom: 40px;}
.top-instagram-items li {width: 32%;margin: 0 0 20px 0;}
	
.top-clinic { padding-bottom: 140px; }
.top-clinic-content {width: 95%;max-width: 1200px;margin: 0 auto;position: relative;}
.top-clinic-text {width: 45%;padding: 20px 0;margin: 0;background: none;}
.top-clinic-date { margin-bottom: 10px; }
.top-clinic-date dt { width: 18%; margin-bottom: 20px; font-size: 16px; }
.top-clinic-date dd { width: 82%; padding: 10px 0 10px 30px; margin-bottom: 20px; font-size: 15px; }
.top-clinic-date .back {width: 340px;padding: 6px;margin: 6px 0;text-align: center;}
.top-clinic-link-items { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
.top-clinic-link-items li { width: 48%; margin: 0; }
.top-clinic-map {height: 100%;position: absolute;top: 0;left: 50%;width: 48%;}
	
.top-pickup { padding-bottom: 100px; }
.top-pickup-content {width: 95%;max-width: 1200px;margin: 0 auto;}
.top-pickup-title { margin-bottom: 40px; font-size: 30px; letter-spacing: 2px; }
.top-pickup-title:before { margin-right: 40px; }
.top-pickup-title:after { margin-left: 40px; }
.top-pickup-items { width: 100%; }
.top-pickup-items li {width: 47%;margin: 0 10px 40px 10px;}
.top-pickup-item-image { margin-bottom: 15px; }
.top-pickup-item-title:after { font-size: 20px; right: 5px; }
.top-pickup-item-title .en { margin-bottom: 5px; font-size: 25px; letter-spacing: 2px; }
.top-pickup-item-title .jp { font-size: 15px; }
	
@media screen and (min-width: 1000px) {
.top-search-items{-webkit-justify-content: center;justify-content: center;}
.top-search-item{width: 30%;margin:0 1% 20px 1%; }
.top-instagram-items li{width:16%;}	
}

@media screen and (min-width: 1200px) {
.top-pickup-items li{width: 23%;}
.top-about{padding-bottom: 110px;}
.top-about-image{width: 44%;margin-top: -110px;}
.top-about-image .image02{margin-top: -30px;position: absolute;width: 185px;left: calc(50% - 350px);}
.top-about-image .image03{left: calc(50% - 820px);width: 120px;position: absolute;bottom: -70px;}
.top-about-text{width: 52%;}
.top-clinic-map{width:100%;}
}
	
@media screen and (min-width: 1500px) {
.top-about{padding:80px 0 80px 0;}
.top-about-image .image01{width:600px;}
.top-about-image{width: 700px;margin: -150px 0 0 -200px;}
.top-about-image .image02{margin-top: -90px;}
.top-about-subtitle .des{display:block;}
.top-about-text{width:54%;}
.top-about-subtitle{font-size:25px;}
}
	
/* retina用 ----------------------------------------------- */ }
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) 
{ 
.top-search { background: url(../images/top-search-deco@2x.png) no-repeat top right; background-size: 550px; }
.top-campaign:after { background: url(../images/top-campaign-deco@2x.png) no-repeat top left; background-size: 100%; }
.top-about { background: url(../images/top-about-bg@2x.jpg) no-repeat center bottom; background-size: cover; }
.top-instagram:after { background: url(../images/top-campaign-deco@2x.png) no-repeat top left; background-size: 100%; } }