@charset "utf-8";
/*------------------------------
基本
------------------------------*/
/*header
------------------------------*/
header{
display: flex;
align-items: center;
height:5.625em;
width:100%;
z-index: 9999;
}
header nav{
margin-left:auto;
overflow: hidden;
padding:.5em 0 0 .5em;
}
header .logo{
width:auto;
height:3.75em;
margin:.625em;
}
.header-btn-area{
background: url(../images/header_bg_header-btn.svg) right center / contain no-repeat;
margin-right: -.5em;
padding:1.2em .75em 1.2em 2em;
text-align: right;
font-size:1.25em;
}
.header-btn-area .text-main{
transform: rotate(4deg);
padding-right:1em;
background: url('data:image/svg+xml;charset=UTF-8,') right center / auto .66em no-repeat;
font-weight: 700;
}
main{
flex:1;
padding:0;
}
.container,.container2{
position: relative;
overflow: hidden;
width:1200px;
margin:auto;
z-index: 1;
}
.container{
padding:5em 1em 6.25em;
}
.container2{
padding:0 1em;
}
/* section[id*="block"] .container > div[id]:not(:first-of-type){
padding-top:6em;
} */
/*footer
------------------------------*/
footer{
background: #0399B7;
padding:1em;
color:#fff;
text-align: center;
font-size:.75em
}
/*---------------------------
fv
---------------------------*/
#fv .container{
position: relative;
width:100%;
padding-top: 7.5em;
padding-bottom: 6em;
background: url(../images/fv_bg_pc.jpg) center right / contain no-repeat;
}
/* 情報
---------------------------*/
#fv .container #info-area{
margin: 0;
}
#fv #info-area > *{
margin:auto
}
#fv .cp-area01,#fv .cp-area02{
font-weight: 700;
}
/*catchcopy*/
#fv .catchcopy{
display: inline-block;
position: relative;
padding: .4em .8em;
margin:.5em 1em;
background: #0399B7;
text-align: center;
line-height:1.5;
font-size:1.75em;
font-weight: 700;
color: #FFF;
}
#fv .catchcopy:before, #fv .catchcopy:after {
display: block;
content: '';
position: absolute;
top:0;
width:1.05em;
height:100%;
background: #0399B7;
}
#fv .catchcopy:before {
left: -1em;
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 99% 50%, 0% 0%);
}
#fv .catchcopy:after {
right: -1em;
clip-path: polygon(100% 0%, 1% 50%, 100% 100%, 0 100%, 0 0);
}
#fv .catchcopy .eff-light::before{
top:-.3em;
left:-.25em;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
}
#fv .catchcopy .eff-light::after{
bottom:-.3em;
right:-.25em;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
}
/*月額*/
#fv .pricecard {
position: relative;
padding:.875em;
margin: 1.5em auto .7em;
overflow: hidden;
background: #fff;
border: 1px solid #0399B7;
border-radius:.1em;
font-weight: 700;
}
#fv .pricecard::before,#fv .pricecard::after{
position: absolute;
content:'';
width:3em;
height:3em;
line-height:1;
z-index: 1;
}
#fv .pricecard::before{
top:0;
left:0;
background: linear-gradient(315deg, rgba(3, 153, 183, 0) 50%, rgba(3, 153, 183, 1) 50%);
}
#fv .pricecard::after{
right:0;
bottom:0;
background: linear-gradient(315deg, rgba(3, 153, 183, 1) 50%, rgba(3, 153, 183, 0) 50%);
}
#fv .pricecard p{
padding:0 .5em;
border: 2px solid #BEE1E8;
font-size:3.125em;
color:#116584;
}
#fv .pricecard p .ff-lora{
font-size:1.2em;
color:#0399B7;
}
#fv .price-area .min-font02{
color:#999;
margin-bottom: 1em;
}
/*キャッチ2*/
#fv .cp-area02 .catchcopy2{
font-size:1.5em;
}
#fv .cp-area02 p{
margin-bottom: .35em;
}
#fv .cp-area02 .tag{
color:#0399B7;
font-size:.75em;
font-weight: 500;
font-family: "Noto Sans JP", "游ゴシック", YuGothic, sans-serif;
}
#fv .cp-area02 .tag .tag-symptoms{
padding:.25em 1em;
margin:.15em;
background: #fff;
border:1px solid #0399B7;
border-radius: 100vh;
}
/*営業時間*/
#fv .hours-area{
display: inline-block;
margin-top: .75em;
padding: .5em 1em;
background: #DDF8FD;
font-size:1.75em;
color:#0481C2;
}
#fv .hours-area .ff-lora{
font-size: 1.4em;
font-weight: 600;
}
/* medal
---------------------------*/
#fv #medal-area{
gap:1em;
-webkit-box-pack: center;
justify-content: center;
margin: -4em auto 0;
}
#fv #medal-area li{
width:12.5em;
height:12.5em;
border:1px solid #0EAAC9;
border-radius: 50%;
padding:.5em
}
#fv #medal-area .medal{
width:11.5em;
height:11.5em;
padding-top:.5em;
background: url(../images/common_bg_medal_a.svg) center / contain no-repeat;
text-align: center;
}
#fv #medal-area .ta-center{
font-size:1.5em;
}
#fv #medal-area .medal p{
font-weight:700;
color:#0399B7;
line-height: 1.2;
}
#fv #medal-area .medal p .min-font02 {
text-align: left;
line-height: 1;
}
/* アピールポイント
---------------------------*/
#appeal-area {
margin-top: -10em;
margin-right: 2em;
gap:3.75em;
}
#appeal-area .ap{
position: relative;
padding:0;
width:10em;
height:10em;
text-align: center;
color:#fff;
line-height: 1.25;
}
#appeal-area .ap::before,#appeal-area .ap::after{
content:'';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
transform:rotate(-45deg);
}
#appeal-area .ap::before{
width:100%;
height:100%;
background:rgba(3, 153, 183, .9);
z-index:-1;
}
#appeal-area .ap::after{
width:90%;
height:90%;
border:1px solid #fff
}
#appeal-area .ap-inner{
font-size:1.5em;
}
/* ボタンセクション
---------------------------*/
#fv .btn-section{
margin-top:-6em;
}
/*---------------------------
block01
---------------------------*/
#block01 {
padding-top:8em;
}
#block01 .fuki-title {
left:0;
right:0;
width:15em;
transform: rotate(5deg);
}
#block01 .container {
padding:6.25em 0 5em;
background: #B4F4F1;
width:100%
}
#block01 .container2 {
padding:3em 1em;
}
#block01 .bg-area{
position: absolute;
top:0;
bottom:0;
width:100%;
height:82%;
margin:auto;
background: url(../images/common_bg_diamond.svg) top center / 7.5em auto ;
}
#block01 .flexlist{
gap:1.5em;
}
#block01 #movie-area{
margin-bottom: 1.5em;
}
#block01 #photopgm-area{
margin-bottom: 2.5em;
}
#block01 #photopgm-area img{
border:.4em solid #fff;
}
#block01 #photopgm-area img.photo01{
transform: rotate(-2deg);
}
#block01 #photopgm-area img.photo02{
transform: rotate(1deg);
}
#block01 #photopgm-area img.photo03{
transform: rotate(3deg);
}
#block01 .media01{
transform: rotate(4deg);
}
#block01 #gralogo-area .item:nth-of-type(2) img.logo01{
width:40%;
}
#block01 #gralogo-area .item:nth-of-type(2) img.logo02{
width:30%;
}
#block01 #gralogo-area .item:nth-of-type(2) img.logo03{
width:30%;
}
/*---------------------------
block02
---------------------------*/
#block02{
position: relative;
}
#block02 .container{
width:100%;
}
/*背景
---------------------------*/
#block02::before,#block02::after,.hamidashi::before,.hamidashi::after{
position: absolute;
left:0;
content:'';
width:100%;
height:3.75em;
}
#block02::before,#block02::after{
background: #F7FF93;
z-index:-1;
}
#block02::before{
top:0;
clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
#block02::after{
bottom:0;
clip-path: polygon(0 0, 0 100%, 100% 0);
}
.hamidashi{
position: relative;
background: url(../images/02_bg_stripe_pc.png) left center #DBF9FF;
margin: 3.75em auto;
overflow: visible;
}
.hamidashi::before,.hamidashi::after{
background: url(../images/02_bg_stripe_pc.png) left center #DBF9FF;
}
.hamidashi::before{
top:-3.75em;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.hamidashi::after{
bottom:-3.75em;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
/*タイトル
---------------------------*/
#block02 .title-area{
position: relative;
margin:-1em auto 1em;
padding-top: 1.25em;
text-align: center;
color: #0399B7;
font-size:2.25em;
}
#block02 .content-title{
/* padding:.7em 3em; */
/* background: url(../images/02_bg_title.svg) center / contain no-repeat ; */
}
#block02 .title-area h3.content-title{
position: absolute;
top:0;
left:calc(50% - 7.5em);
text-align: center;
padding:.2em .35em;
background: #0399B7;
line-height: 1.2;
color:#FFFF67;
border: 1px solid #fff;
box-shadow:0 0 0 .15em rgba(3, 153, 183,1);
-webkit-box-shadow:0 0 0 .15em rgba(3, 153, 183,1);
-moz-box-shadow:0 0 0 .15em rgba(3, 153, 183,1);
transform: rotate(-7deg);
}
#block02 .title-area h2.content-title{
padding:.25em 2em;
background: url(../images/02_bg_title2.svg) center / contain no-repeat ;
}
#block02 .title-area .eff-light{
padding:0 .75em;
}
#block02 .title-area .eff-light::before{
top:auto;
bottom:0;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
transform: scale(1,-1);
}
#block02 .title-area .eff-light::after{
top:-.2em;
bottom:auto;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
transform: scale(1,-1);
}
/*リスト
---------------------------*/
#block02 .flexlist{
position: relative;
gap:2.5em;
margin:auto;
counter-reset: number 0;
width:85%;
}
#block02 .list-area .item{
display: -webkit-box;
display: flex;
position: relative;
overflow: hidden;
width:calc((100% - 12.5em) / 6);
aspect-ratio: 1 / 1;
padding:.5em;
background: #fff;
border-radius: 50%;
counter-increment: number 1;/* カウンタの増加数をセット */
border:1px solid #0399B7;
box-shadow:1em 1em 0 0 rgba(3,153,183,1);
-webkit-box-shadow:1em 1em 0 0 rgba(3,153,183,1);
-moz-box-shadow:1em 1em 0 0 rgba(3,153,183,1);
text-align: center;
}
#block02 .list-area .item::after{
position: absolute;
right:0;
left:0;
top:1px;
width:1.25em;
height:1.25em;
margin: auto;
background: #fff;
border-radius: 50%;
content: counter(number);
text-align: center;
font-size:2em;
color:#0399B7;
font-family: "Lora", serif;
z-index: 1;
}
#block02 .list-area .item::before{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width:85%;
height:85%;
margin: auto;
content:'';
border-radius: 50%;
border:1px solid #DFECF5;
}
#block02 .list-area .item .main-text{
width:100%;
margin-top: 1em;
font-size:1.2em;
line-height: 1.1;
color:#111;
font-weight: bold;
z-index: 1;
}
#block02 .list-area .item .main-text p{
margin-bottom: .2em;
}
#block02 .list-area .item .main-text .fc-blue{
font-size:1.2em;
line-height: 1.2;
}
/*プレゼント
---------------------------*/
#block02 .present-area{
position: relative;
width:66%;
max-width: 1100px;
padding:1.5em 0 0 0;
margin:4em auto 0;
}
#block02 .present-area .fuki-title{
top:0;
left:-1em;
display: inline-block;
width:auto;
font-size:2em;
transform: rotate(-4deg);
}
#block02 .present-area .main-text {
padding:1em;
background: #fff;
border-radius: 1.5em;
border:1px solid #0399B7;
box-shadow:.75em .75em 0 0 rgba(3,153,183,1);
-webkit-box-shadow:.75em .75em 0 0 rgba(3,153,183,1);
-moz-box-shadow:.75em .75em 0 0 rgba(3,153,183,1);
}
#block02 .present-area .flexlist {
gap:2em;
width:100%;
padding:1.5em;
border:1px solid #DFECF5;
border-radius: .75em;
}
#block02 .present-area .flexlist .item{
width:calc(50% - 1em)
}
#block02 .present-area .flexlist .item p:not(:last-of-type){
margin-bottom: 1em;
line-height: 1.75;
}
/*---------------------------
block03
---------------------------*/
#block03 .container{
width:100%;
padding-bottom: 5em;
background: #F5F9FB;
border-top:1px solid #0399B7;
border-bottom:1px solid #0399B7;
z-index: 1;
}
/*リスト
---------------------------*/
#block03 #caselist{
width:90%;
gap:2em;
margin:0 auto 2em;
}
#block03 #caselist .item{
position: relative;
display: block;
width:calc((100% - 8em) / 5);
background:#FFF ;
border-radius: 1.25em;
border:1px solid #0399B7;
padding:.9em;
box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
-webkit-box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
-moz-box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
}
#block03 #caselist .item::before{
content:'';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width:calc(100% - 1.8em);
height:calc(100% - 1.8em);
margin: auto;
border-radius:.55em;
border:1px solid #DFECF5;
}
#block03 #caselist .item-area{
overflow: hidden;
border-radius:.55em;
}
#block03 #caselist .item-area img{
width:100%;
height:auto;
}
#block03 #caselist .item-area .main-text{
padding:.8em;
text-align: left;
font-size:1.125em;
}
#block03 #caselist .casenum,.modal-window .casenum{
display: inline-block;
border-radius: 100vh;
color:#fff;
font-weight: 700;
font-family: "Lora", serif;
font-size:1.25em;
}
#block03 #caselist .casenum{
position: absolute;
right: .9em;
bottom:-.9em;
padding:.25em 1.75em .25em 1em;
background: url('data:image/svg+xml;charset=UTF-8,') right .5em center / .66em auto no-repeat #111;
}
.modal-window .casenum{
padding:.25em 1em;
background: #111;
margin-bottom: .25em;
}
/*モーダル
-------------------------*/
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100vh;
z-index: 9988;
}
/*ウィンドウ*/
.modal-window {
display: none;
position: fixed;
overflow: auto;
padding: 2em;
min-width: 360px;
max-height: 80vh;
z-index: 9989;
background: #FFF;
border-radius:1.5em;
border:1px solid #0399B7;
-webkit-overflow-scrolling: touch;
box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
-webkit-box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
-moz-box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
}
/*スクロール*/
.scrollarea {
min-height: 100%;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.modal-window .modalttl{
padding-bottom: .5em;
border-bottom:1px solid #DFECF5;
font-size:1.5em;
color:#111;
}
.modal-window .case-panel{
gap:8%;
background: url(../images/03_ic_arrow.svg) center / 6% auto no-repeat;
}
.modal-window .case-panel img{
border-radius: .6em;
width:46%;
height: auto;
}
.modal-window table{
border-collapse: separate;
border-spacing:0 1em;
font-size: 1.125em;
margin: 1em 0 0;
}
.modal-window table th,.modal-window table td{
vertical-align: top;
}
.modal-window table th{
text-align: left;
padding-right: 1.5em;
white-space:nowrap;
}
.modal-window .btn-close{
position: absolute;
overflow: hidden;
right:1.5em;
top:1.5em;
width:2.5em;
height:2.5em;
background: url('data:image/svg+xml;charset=UTF-8,') center / 1.25em auto no-repeat #0399B7;
border:1px solid #0399B7;
}
.modal-window .btn-close:hover{
background: url('data:image/svg+xml;charset=UTF-8,') center / 1.25em auto no-repeat #ffffff;
}
.modal-window .btn-detail{
display: block;
width:12em;
padding:.4em 1.25em;
margin: auto;
background: url('data:image/svg+xml;charset=UTF-8,') right .75em center / .66em auto no-repeat #0399B7;
border-radius:100vh;
border:1px solid #0399B7;
font-weight: 700;
font-size: 1.25em;
color:#fff;
text-align: center;
text-decoration: none;
}
.modal-window .btn-detail:hover{
background: url('data:image/svg+xml;charset=UTF-8,') right .75em center / .66em auto no-repeat #ffffff;
font-size: 1.25em;
color:#0399B7;
}
/* リボン見出し
---------------------------*/
#block03 .ribon-area{
margin-top:4em;
margin-bottom:1em;
font-size: 1.25em;
}
/* ボタンセクション
---------------------------*/
#block03 .btn-section{
margin-top:-6em;
}
/*---------------------------
block04
---------------------------*/
#block04 .container{
position: relative;
padding-top: 6em;
padding-bottom: 3em;
background: url(../images/04_bg-photo.jpg) center left / contain no-repeat #fff;
}
#block04 .title-area2{
margin:0 auto -3.5em;
}
/*リスト
---------------------------*/
#block04 .list-area{
padding-left:50%;
margin: auto;
}
#block04 #wishlist{
display: inline-flex;
gap:1em 0;
margin:2em auto 0;
font-size:1.25em;
text-align: left;
}
#block04 #wishlist li{
position: relative;
padding-left:1.8em;
font-weight: 700;
}
#block04 #wishlist li::before,#block04 #wishlist li::after{
position: absolute;
content:'';
}
#block04 #wishlist li::before{
top:.23em;
left:0;
width:1.1em;
height:1.1em;
background: #fff;
border-radius: .07em;
border:1px solid #0399B7;
}
#block04 #wishlist li::after{
top:.4em;
left:.4em;
width:.75em;
height:.5em;
border: solid .17em #0399B7;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
#block04 .tri{
position: relative;
width:8em;
height:3em;
margin: auto;
background: #0399B7;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#block04 .tri::before{
content: '';
position: absolute;
top:-1em;
width:8em;
height:3em;
background: #fff;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#block04 .tri::after{
content: '';
position: absolute;
top:calc(-1em - 1px);
width:8em;
height:3em;
background: #0399B7;
clip-path: polygon(0 0, 50% 100%, 100% 0);
z-index:1;
}
/*---------------------------
block05
---------------------------*/
#block05 .container{
width:100%;
padding-top:0;
padding-bottom:0;
}
#block05 .title-area{
position: relative;
width:16em;
height:5em;
margin:0 auto;
padding:2px;
font-size:2em;
background: #0399B7;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
}
#block05 .content-title{
width:calc(100% - 2px);
height:calc(100% - 2px);
background: #fff;
line-height: 3.2;
text-align: center;
z-index: 10;
}
#block05 .content-title,#block05 .content-title::before,#block05 .content-title::after{
content:'';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
}
#block05 .content-title::before{
width:86%;
height:86%;
background: #EDF5FA;
z-index: -1;
}
#block05 .content-title::after{
width:calc(86% - 2px);
height:calc(86% - 2px);
background: #fff;
z-index:-1;
}
#block05 .graphic-area{
padding:4em 0 6em;
text-align: center;
z-index: 0;
}
#block05 .graphic-area img{
width:52%;
border:.5em solid #fff;
transform: rotate(-2deg);
margin: auto;
}
#block05 #tweetlist{
position:absolute;
left:0;
right:0;
gap:2.25em 0;
width:80%;
margin:auto;
z-index: 1;
}
#block05 #tweetlist li{
width:50%;
display: flex;
}
#block05 #tweetlist li:nth-of-type(odd){
justify-content: flex-start;
}
#block05 #tweetlist li:nth-of-type(even){
justify-content: flex-end;
}
#block05 #tweetlist .item{
position: relative;
display: inline-block;
padding:1em;
background: #517284;
border-radius: .8em;
text-align: center;
font-weight: 600;
font-size: 1.25em;
color:#fff;
box-shadow:0 3px 0 0 rgba(255,255,255,1);
-moz-box-shadow:0 3px 0 0 rgba(255,255,255,1);
-webkit-box-shadow:0 3px 0 0 rgba(255,255,255,1);
}
#block05 #tweetlist .item::after{
content: '';
position:absolute;
width:1.2em;
height:1.2em;
background: #517284;
}
#block05 #tweetlist li:nth-of-type(-n+4) .item::after{
bottom:-1.1em;
}
#block05 #tweetlist li:nth-of-type(odd) .item::after{
clip-path: polygon(0 0, 100% 100%, 100% 0);
right:3em;
}
#block05 #tweetlist li:nth-of-type(even) .item::after{
clip-path: polygon(0 0, 0% 100%, 100% 0);
left:3em;
}
#block05 #tweetlist .item .marker-b{
font-size: 1.16em;
}
#block05 #tweetlist li:nth-of-type(5) .item,
#block05 #tweetlist li:nth-of-type(5) .item::after,
#block05 #tweetlist li:nth-of-type(6) .item,
#block05 #tweetlist li:nth-of-type(6) .item::after{
background: #408098;
}
#block05 #tweetlist li:nth-of-type(7) .item,
#block05 #tweetlist li:nth-of-type(7) .item::after,
#block05 #tweetlist li:nth-of-type(8) .item,
#block05 #tweetlist li:nth-of-type(8) .item::after{
background: #3B87A3;
}
#block05 #tweetlist li:nth-of-type(9) .item,
#block05 #tweetlist li:nth-of-type(9) .item::after,
#block05 #tweetlist li:nth-of-type(10) .item,
#block05 #tweetlist li:nth-of-type(10) .item::after{
background: #0399B7;
}
/*---------------------------
#block06
---------------------------*/
#block06 {
padding-top:8em;
}
#block06 .fuki-title {
left:2em;
width:10em;
transform: rotate(-5deg);
}
#block06 .container {
width:100%;
padding:6.25em 0 10em;
background: url(../images/06_bg-photo.jpg) center / cover no-repeat;
}
#block06 .container2 {
padding:3em 1em;
}
/*リスト*/
#block06 .bg-area{
position: absolute;
top:0;
bottom:0;
width:100%;
height:100%;
margin:auto;
}
#block06 .list-area2{
gap:1.25em;
}
#block06 .list-area2 .item{
display: -webkit-box;
display: flex;
position: relative;
width:calc((100% - 6em) / 4);
aspect-ratio: 1 / 1;
padding:0em;
border-radius: 50%;
border:1px solid #0399B7;
background: url(../images/common_bg_medal_b.svg) center / 95% auto no-repeat #fff;
box-shadow:.55em .55em 0 0 rgba(3,153,183,.5);
-webkit-box-shadow:.55em .55em 0 0 rgba(3,153,183,.5);
-moz-box-shadow:.55em .55em 0 0 rgba(3,153,183,.5);
text-align: center;
font-weight: 700;
font-feature-settings: "palt";
}
#block06 .list-area2 .item p{
font-size: 1.5em;
line-height: 1.33;
}
#block06 .list-area2 .item .marker-y{
font-size: 2.5em;
line-height: 1;
}
#block06 .list-area2 .item .marker-y + p{
margin-top: .3em;
}
#block06 .list-area2 .item .marker-y.ff-lora{
font-size: 4em;
}
#block06 .list-area2 .item .ls-05em{
letter-spacing: -.05em;
}
#block06 .list-area2 .item p.ls-05em{
font-size: 1.4em;
}
/*スタッフの声*/
#block06 > .flexlist{
position: relative;
padding-right: 5%;
margin-top: -9em;
margin-bottom: 3em;
z-index: 1;
}
#block06 .staffvoice{
position: relative;
display: inline-block;
margin:1.5em 0 0 1.5em;
transform: rotate(-3deg);
}
#block06 .staffvoice .text-fuki{
position: absolute;
left:-1em;
top:-1.5em;
padding:.4em 1.75em;
background:#111;
font-size:1.25em;
font-weight: 700;
color:#fff;
z-index: 4;
}
#block06 .staffvoice .text-fuki::before{
bottom:calc(-1em);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
#block06 .staffvoice .main-area {
display: inline-flex;
gap:0;
padding:2em 1em;
}
#block06 .waku-box .main-area > *{
width:60%;
}
#block06 .waku-box .main-text{
z-index: 2;
margin-right: -10%;
}
#block06 .waku-box .main-text .dotlist{
/* position: absolute; */
color:#0399B7;
font-weight: 700;
font-size: 1.4em;
z-index: 1;
text-shadow: 0 0 1px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}
#block06 .waku-box .main-text .dotlist .marker-y{
font-size: 1.25em;
}
#block06 .waku-box .main-text .catch{
font-size:1.7em;
position: absolute;
right:1em;
bottom:1.8em;
font-weight: 700;
transform: rotate(-5deg);
text-shadow: 0 0 1px #fff,-1px -1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,1px 1px 1px #fff;
}
#block06 .waku-box .main-text .conclusion{
font-size:1.5em;
margin-top:1.5em;
}
#block06 .waku-box img{
max-width:30em;
margin:0 -.5em 0 0;
height:100%;
border:.5em solid #fff;
transform: rotate(3deg);
}
/*---------------------------
block07
---------------------------*/
#block07 .ribon-area{
position: relative;
margin-bottom:-2em;
padding-bottom: 0;
z-index: 2;
}
#block07 .ribon-area .main-text p{
padding:.3em 1.5em;
font-size: 3em;
}
#block07 .ribon-area .main-text::before{
left:-5em;
}
#block07 .ribon-area .main-text::after{
right:-5em;
}
#block07 .container {
padding:0 1em 1em;
}
#block07 .waku-box{
margin: auto;
border-radius: 1.875em;
box-shadow:1em 1em 0 0 rgba(3,153,183,.5);
-webkit-box-shadow:1em 1em 0 0 rgba(3,153,183,.5);
-moz-box-shadow:1em 1em 0 0 rgba(3,153,183,.5);
}
#block07 .main-area{
padding:4em 1.5em 0;
border:none;
border-radius: .875em;
background-image:-webkit-linear-gradient(#F2F7FA 50%,#fff 50%);
background-image:-moz-linear-gradient(#F2F7FA 50%,#fff 50%);
background-image:linear-gradient(#F2F7FA 50%,#fff 50%);
}
#block07 .photo-dc{
width:40%;
height:auto;
margin:0 auto -1em;
}
#block07 .treat-area {
flex:1
}
#block07 #treatlist{
gap:1.875em;
margin:auto;
}
#block07 #treatlist img{
border-radius:50%;
border:.4em solid #fff;
box-shadow:.25em .25em 2px 0 rgba(0,0,0,0.16);
-moz-box-shadow:.25em .25em 2px 0 rgba(0,0,0,0.16);
-webkit-box-shadow:.25em .25em 2px 0 rgba(0,0,0,0.16);
}
#block07 #treatlist p{
padding:.5em 1.2em;
margin:1em 0;
background: #fff;
border-radius:100vh;
border:1px solid #0399B7;
font-size:1.75em;
font-weight: 700;
color:#0399B7
}
#block07 .treat-area p{
font-size:1.75em;
margin-bottom:.8em
}
/*---------------------------
block08
---------------------------*/
/*
スローガン
---------------------------*/
/*背景*/
#block08 #slogan .bg-cover{
top:0;
left:0;
}
#block08 #slogan.container {
width:100%;
background: url(../images/08_bg-photo.jpg) center / cover no-repeat;
}
/*疑問*/
#block08 #slogan .question{
position: relative;
gap:0 4em;
width:80%;
margin: 0 auto 3em;
}
#block08 #slogan .question::after{
content:'';
position: absolute;
bottom:-2em;
right:0;
left:0;
margin: auto;
width:5em;
height:1.75em;
background: #F3FF5F;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#block08 #slogan .question .main-text{
position: relative;
flex:1;
padding:.8em;
border-radius:2px;
background: #fff;
text-align:center;
font-weight: 700;
font-size:2.25em;
}
#block08 #slogan .question .main-text::after{
content: '';
position: absolute;
top:0;
right:-1.45em;
bottom:0;
width:1.5em;
height:.75em;
margin: auto;
background: #fff;
clip-path: polygon(0 0, 0% 100%, 100% 0);
}
#block08 #slogan .question .gra-area{
width:24%;
}
#block08 #slogan .question .gra-area .b-shadow{
aspect-ratio: 1 / 1;
border-radius: 50%;
border:.5em solid #fff
}
#block08 #slogan .answer{
margin:auto;
}
#block08 #slogan .answer p {
color:#fff;
font-weight: 700;
font-size:3.5em;
}
#block08 #slogan .answer .c-doctor {
padding:.2em;
background: #fff;
font-weight: 700;
font-size:4.5em;
margin:.25em auto;
}
#block08 #slogan .voicelist {
gap:2.25em;
margin:2.5em auto 2em;
}
#block08 #slogan .voicelist .item {
padding:.75em 1.5em;
background: rgba(23, 104, 119, .5);
border-radius:100vh;
border:1px solid #fff;
text-align: center;
color:#fff;
font-weight: 700;
font-size: 1.75em;
}
#block08 #slogan .conclusion {
padding:.25em;
border:.15em solid #fff;
background: #F3FF5F;
text-align: center;
color:#0399B7;
font-weight: 700;
font-size:3.2em;
}
#block08 #slogan .conclusion .eff-light{
padding:.15em .25em;
}
#block08 #slogan .conclusion .eff-light::before{
top:-.15em;
left:-.25em;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
}
#block08 #slogan .conclusion .eff-light::after{
bottom:-.35em;
right:-.35em;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
}
/*
共通
---------------------------*/
#block08 #system.container,
#block08 #lastly.container{
padding:0 1em;
width:100%;
margin-top: 3em;
}
#block08 #system.container .bg-cover,
#block08 #lastly.container .bg-cover{
top:0;
width:50%
}
#block08 #system .container2,
#block08 #lastly .container2{
background: #F2F7FA;
}
/*リボン*/
#block08 .midashi-ribon{
display: inline-block;
position: relative;
padding: .4em .8em;
margin:0 .75em;
background: #0399B7;
text-align: center;
line-height:1.5;
font-weight: 700;
color: #FFF;
z-index: 1;
}
#block08 #sfirst .midashi-ribon:before, #block08 .midashi-ribon:after {
display: block;
content: '';
position: absolute;
top:0;
width:.77em;
height:100%;
background: #0399B7;
}
#block08 .midashi-ribon:after {
right: -.75em;
clip-path: polygon(100% 0%, 1% 50%, 100% 100%, 0 100%, 0 0);
}
/*
システム
---------------------------*/
#block08 #system.container{
margin-bottom: 3em;
}
#block08 #system.container .bg-cover{
left:0;
}
#block08 #system .container2 {
padding:1.75em 1.75em 1.75em 0;
gap:2em;
}
#block08 #system img{
width:48%;
border-radius: 1.275em;
}
#block08 #system .item{
padding-right:1.5em;
}
#block08 #system .item .preface{
margin-bottom: 1em;
font-size:1.7em;
font-weight: 700;
}
#block08 #system .midashi-ribon{
margin:0 .75em 0 0;
font-size:1.5em;
}
#block08 #system .waku-box {
margin:-2em auto 1em;
border-radius: 0.125em;
}
#block08 #system .waku-box .main-area {
padding:2.5em 1.2em 1.2em;
text-align: left;
font-size:.875em;
}
/*
サージェリーファースト
---------------------------*/
#block08 #sfirst .midashi-ribon{
font-size:2em;
}
#block08 #sfirst .midashi-ribon:before {
left: -.75em;
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 99% 50%, 0% 0%);
}
#block08 #sfirst .waku-box {
width:85%;
margin:-2.25em auto 1em;
border-radius: 1.125em;
}
#block08 #sfirst .waku-box .main-area {
padding:2.75em 1.5em 1.5em;
border-radius: .5em;
text-align: left;
}
/*
結論
---------------------------*/
#block08 #lastly.container .bg-cover{
right:0;
}
#block08 #lastly .container2{
padding:1.75em;
}
#block08 #lastly .container2 p{
font-weight: 700;
font-size:1.5em;
line-height: 1.75;
}
#block08 #lastly .container2 p:not(:last-of-type){
margin-bottom: 1em;
}
/*---------------------------
#block09
---------------------------*/
#block09 {
padding-top:6em;
}
#block09 .fuki-title {
left:2em;
width:8em;
transform: rotate(-5deg);
}
#block09 .container {
width:100%;
padding:6.25em 0 5em;
background: url(../images/09_bg-photo.jpg) center / cover no-repeat;
}
#block09 .container2 {
padding:1em;
}
#block09 .bg-area{
position: absolute;
top:0;
bottom:0;
width:100%;
height:100%;
margin:auto;
}
#block09 #photolist{
gap: 0;
}
#block09 #photolist li img{
width:93%;
height:auto;
border:.6em solid #fff;
}
#block09 #photolist li.photo01 img{
transform: rotate(-3deg);
margin-bottom: 5em;
}
#block09 #photolist li.photo02 img{
transform: rotate(5deg);
margin-bottom: 3em;
}
#block09 #photolist li.photo03 img{
transform: rotate(5deg);
}
#block09 #photolist li.photo04 img{
transform: rotate(-4deg);
margin-top: -3em;
}
#block09 #photolist li.photo05 img{
transform: rotate(5deg);
margin-bottom: 3em;
}
#block09 #photolist li.photo06 img{
transform: rotate(-5deg);
}
#block09 #commentlist{
margin: 3em auto 0;
gap:2em 1.5em;
}
#block09 #commentlist li{
position: relative;
padding:1em;
margin-top: .2em;
background: #fff;
border-radius:.88em;
border:1px solid #0399B7;
font-weight: 700;
font-feature-settings: "palt" 1;
line-height: 1.66;
color:#0399B7;
box-shadow:.55em .55em 0 0 rgba(3,153,183,.25);
-webkit-box-shadow:.55em .55em 0 0 rgba(3,153,183,.25);
-moz-box-shadow:.55em .55em 0 0 rgba(3,153,183,.25);
}
#block09 #commentlist li::before,#block09 #commentlist li::after{
content:'';
position: absolute;
right:0;
left:0;
width:1.1em;
height:1.1em;
margin:auto;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#block09 #commentlist li::after{
top:-1em;
background: #fff;
}
#block09 #commentlist li::before{
top:-1.1em;
background:#0399B7;
}
/*ボタン*/
#block09 .btn-section{
margin:2em auto;
}
/*---------------------------
block10
---------------------------*/
/*背景*/
#block10 .bg-cover{
top:0;
left:0;
height:40%;
}
#block10 .bg-cover10{
background: url(../images/10_bg-photo.jpg) center right / cover no-repeat;
}
/*見出し*/
#block10 .catchcopy{
font-size:4.375em;
color:#fff
}
#block10 .catchcopy .bg-cover_white{
color:#0399B7;
padding:0 .2em;
margin: 0 .2em;
}
/*リスト*/
#block10 #servicelist{
gap:1.5em 2.5em;
margin-top: 2.5em;
}
#block10 #servicelist li{
position: relative;
padding-bottom: 1.5em;
width:calc((100% - 5em)/3);
}
#block10 #servicelist .s-kawaii{
position: absolute;
right:1em;
bottom: -1.25em;
padding:.5em 1.2em;
background: #0399B7;
border-radius: 100vh;
font-weight: 600;
color:#fff
}
#block10 .servicect{
position: relative;
overflow: hidden;
background: #fff;
width:3.5em;
aspect-ratio: 2 / 1;
margin:0 auto -2px auto;
border-radius: 100vh 100vh 0 0;
border:1px solid #0399B7;
border-bottom:1px solid #fff;
font-size:1.75em;
text-align: center;
line-height: 2.5;
color:#AEDDEF;
z-index: 1;
}
#block10 .servicect::before{
content: '';
position: absolute;
right:0;
bottom:0;
left:0;
width:85%;
height:85%;
margin:auto;
border-radius: 100vh 100vh 0 0;
border:1px solid #DFECF5;
border-bottom:none;
z-index: 1;
}
#block10 .service-area{
position: relative;
gap:1em;
background: #fff;
border-radius: .25em;
border:1px solid #0399B7;
padding:1em;
}
#block10 .service-area h4.fc-blue{
padding-bottom: .4em;
border-bottom: 1px solid #DFECF5;
text-align: center;
font-weight: 700;
font-size:1.5em;
}
#block10 .service-area img{
width:100%;
height:auto;
}
#block10 .service-area p{
font-size:1.125em;
min-height: 4.5em;
}
/*---------------------------
block11
---------------------------*/
#block11 .container{
background: #F2F7FA;
}
#block11 .bg-cover.bg-cover_white{
left:0;
bottom:5%;
margin:auto;
width:100%;
height:80%;
clip-path: polygon(0 0, 100% 30%, 100% 70%, 0% 100%);
}
/*肩書*/
#block11 #biolist{
margin: 0 auto 2.5em;
}
#block11 .photo-area img{
border:.5em solid #fff;
}
#block11 .title-area{
gap:1em;
}
#block11 .doctor-name{
font-size:2em;
}
#block11 .doctor-name .kana{
font-size:.625em;
}
#block11 .doctor-title{
display: inline-block;
position: relative;
padding: .4em .8em;
margin:0 .75em;
background: #0399B7;
text-align: center;
font-size:2em;
line-height:1.5;
font-weight: 700;
color: #FFF;
}
#block11 .doctor-title:before, #block11 .doctor-title:after {
display: block;
content: '';
position: absolute;
top:0;
width:.76em;
height:100%;
background: #0399B7;
}
#block11 .doctor-title:before {
left: -.75em;
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 99% 50%, 0% 0%);
}
#block11 .doctor-title:after {
right: -.75em;
clip-path: polygon(100% 0%, 1% 50%, 100% 100%, 0 100%, 0 0);
}
#block11 .doctor-o-title p{
font-weight: normal;
margin-bottom: .5em;
}
#block11 .doctor-o-title strong{
font-size: 1.125em;
}
/*証書*/
#block11 .certificate-area{
gap:1em;
padding:.5em;
}
#block11 .certificate-area img{
border:1px solid #80879E
}
#block11 .certificate-area .item:nth-of-type(n+2){
width:calc(50% - 1em);
}
#block11 .certificate-area .item:nth-of-type(1){
width:55%;
}
/*経歴*/
#block11 .history1 {
gap:.7em;
line-height: 1.3;
margin-bottom: 1.5em;
}
#block11 .history1 p{
font-size: 1.125em;
}
#block11 .history2 {
gap:.7em 1em;
line-height: 1.3;
font-size: 1.125em;
}
#block11 .history2 dt{
width:7em;
}
#block11 .history2 dd{
width:calc(100% - 8em);
}
#block11 .history2 dd a{
text-decoration: none;
color: #0399B7;
}
/*メッセージ*/
#block11 .waku-box{
border-radius: 1.25em;
padding:2em;
margin: 1em auto;
}
#block11 .waku-box p{
font-size: 1.25em;
line-height: 1.75;
}
/*---------------------------
block12
---------------------------*/
/*タイトル*/
#block12 .ribon-area{
position: relative;
margin-bottom:-2em;
padding-bottom: 0;
z-index: 2;
}
#block12 .ribon-area .main-text p{
padding:.3em 1.5em;
font-size: 3em;
}
#block12 .ribon-area .eff-light::before{
top:.25em;
left:-.75em;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
}
#block12 .ribon-area .eff-light::after{
bottom:0;
right:-.75em;
background: url('data:image/svg+xml;charset=UTF-8,') center / cover no-repeat;
}
#block12 .ribon-area .main-text::before{
left:-5em;
}
#block12 .ribon-area .main-text::after{
right:-5em;
}
/*背景*/
#block12 .bg-cover_glay2{
transform: rotate(-2deg);
transform-origin: center center;
margin-left: -10%;
}
#block12 .bg-block12{
transform: rotate(2deg);
transform-origin: center center;
background: url(../images/12_bg-photo.jpg) center / cover no-repeat;
margin-left: -10%;
border:1px solid #9FECF1
}
#block12 .bg-cover_sblue2{
transform: rotate(2deg);
transform-origin: center center;
margin-left: -10%;
border:1px solid #9FECF1
}
#block12 .bg-cover{
height:calc(100% - 6em);
}
#block12 .container{
padding-top: 6em;
padding-bottom: 5em;
border:none;
}
/*リスト*/
#block12 #steplist{
gap:2em
}
#block12 #steplist li{
position: relative;
}
#block12 #steplist li:not(:last-of-type)::after{
content:'';
position: absolute;
right:0;
left:0;
width:3em;
height:1.25em;
margin:.75em auto 0;
background: #0399B7;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#block12 .stepct{
position: relative;
overflow: hidden;
background: #fff;
width:6em;
aspect-ratio: 2 / 1;
margin:0 0 -2px .75em;
border-radius: 100vh 100vh 0 0;
border:1px solid #0399B7;
border-bottom:1px solid #fff;
font-size:1.75em;
text-align: center;
line-height: 3;
color:#AEDDEF;
z-index: 1;
}
#block12 .step-area{
gap:1.2em;
background: #fff;
border:1px solid #0399B7;
padding:0 1.25em;
}
#block12 .step-area .main-text{
flex:1;
padding:1.25em 0;
}
#block12 .step-area .main-text h4.fc-blue{
font-weight: 700;
font-size:2em;
padding-bottom: .4em;
margin-bottom: .4em;
border-bottom: 1px solid #DFECF5;
}
#block12 .step-area .main-text p{
font-size:1.5em;
}
#block12 .step-area img{
width:26%;
margin: -1.25em 0 1.25em ;
border:1px solid #fff;
}
/*---------------------------
block13
---------------------------*/
#block13 .container{
width:100%;
padding-bottom: 5em;
background: #F5F9FB;
border-top:1px solid #0399B7;
border-bottom:1px solid #0399B7;
z-index: 1;
}
#block13 .container2{
padding:0;
overflow: visible;
gap:3.5em
}
/*掲示
---------------------------*/
#block13 #posting{
width:75%;
margin: auto;
}
#block13 #posting .dotlist{
gap:1em;
font-size: 1.375em;
}
#block13 #posting .dotlist li{
width:calc(50% - .5em);
margin-bottom: 0;
}
/*注意
---------------------------*/
#block13 #caution h4.midashi2{
position: relative;
width:10em;
margin:0 auto -1em;
padding:.25em 1.5em;
border-radius: 100vh;
background: #0399B7;
color:#fff;
font-weight:700;
font-size:2em;
z-index: 1;
}
#block13 #caution h4.midashi2 img{
width:auto;
height:.9em;
vertical-align:baseline;
margin: .1em .5em -.1em;
}
#block13 #caution .line2-box{
padding-top:2.5em;
font-size:1.25em;
line-height: 1.75;
text-align: center;
}
/*フォーム
---------------------------*/
#block13 #form .waku-box{
border-radius:1em;
}
#block13 #form .main-area{
border-radius:.625em;
padding:1.5em;
gap:1.25em
}
#block13 input,#block13 button{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
#block13 input{
width:100%;
padding:.8em 1em;
border:1px solid #F2F7FA;
border-radius: .4em;
background: #F2F7FA;
font-size: 1.25em;
}
#block13 button{
display: block;
margin:1em auto;
background:#65C00C;
border:1px solid #111;
border-radius: 100vh;
font-family: "Noto Serif JP", "游明朝", Yu Mincho, "ＭＳ 明朝", "MS Mincho", Times New Roman, serif;
font-weight: 700;
z-index: 1;
cursor: pointer;
box-shadow:.5em .5em 0 0 rgba(94,203,0,1),inset .5em .5em 0 0 rgba(255,255,255,1);
-moz-box-shadow:.5em .5em 0 0 rgba(94,203,0,1),inset .5em .5em 0 0 rgba(255,255,255,1);
-webkit-box-shadow:.5em .5em 0 0 rgba(94,203,0,1),inset .5em .5em 0 0 rgba(255,255,255,1);
}
#block13 button:hover{
background:#fff;
border:1px solid #65C00C;
color:#65C00C
}
#block13 button .btn-area::before{
background:none;
}
#block13 #form .form-item.flexlist{
width:100%;
gap:1.25em 2em;
}
#block13 #form .form-item .form-item_title{
position: relative;
width:11em;
padding:.5em 0;
font-weight: 700;
font-size:1.5em;
}
#block13 #form .form-item .form-item_title .required{
display: inline-block;
position: absolute;
top:0;
right:0;
bottom:0;
height:1.875em;
margin: auto;
padding:.2em .5em;
background: #F72586;
color:#fff;
font-size:.875em;
}
#block13 #form .form-item .form-item_inner{
flex:1
}
#block13 #form .form-item.privacy-area .form-item_title{
width:100%;
text-align: center;
}
#block13 #form .form-item_privacy{
overflow-y: scroll;
width:100%;
height:8.5em;
padding:1.2em;
background: #F2F7FA;
font-size: 1.25em;
}
#block13 #form .form-item_privacy h4{
margin-top: 1em;
font-weight: 700;
}
/*電話予約
---------------------------*/
#block13 #tel-reserve .waku-box{
display: inline-block;
border-radius:1em;
}
#block13 #tel-reserve .main-area{
border-radius:.625em;
gap:1.25em
}
#block13 #tel-reserve .main-text .preface{
font-size:1.25em;
}
#block13 #tel-reserve .main-text .phone-num,#block13 #tel-reserve .main-text [data-tel="0120811817"]{
font-weight: 600;
font-size:4.75em;
color:#5ECB01;
line-height: 1.1;
text-decoration: none;
font-family: "Lora", serif;
}
#block13 #tel-reserve .main-text .preface{
font-size:1.25em;
}
#block13 #tel-reserve .supple-text {
padding:1em;
background: #F2F7FA;
font-size:1.25em;
}
/*勧誘理念
---------------------------*/
#block13 #solicitation .line2-box{
padding:2em;
margin-top:8em
}
#block13 #solicitation .line2-box .flexlist{
gap:1.5em
}
#block13 #solicitation .main-text{
flex:1
}
#block13 #solicitation .main-text .midashi2{
margin-bottom: .5em;
font-weight: 700;
font-size: 2.25em;
}
#block13 #solicitation .main-text .midashi2 img{
width:auto;
height:1.5em;
margin-right: .5em;
vertical-align: middle;
}
#block13 #solicitation .main-text p{
font-size: 1.5em;
line-height: 1.75;
}
#block13 #solicitation .gra-area{
width:28%;
margin:-8em 0 -2em;
}
#block13 #solicitation .gra-area img{
width:100%;
height:auto;
}
/*---------------------------
block14
---------------------------*/
#block14 {
padding-top:8em;
}
#block14 .fuki-title {
left:2em;
width:10em;
transform: rotate(-5deg);
}
#block14 .container {
width:100%;
padding:6.25em 0 5em;
background: url(../images/14_bg-photo.jpg) center / cover no-repeat;
}
#block14 .container2 {
padding:3em 1em;
}
#block14 .bg-area{
position: absolute;
top:0;
bottom:0;
width:100%;
height:100%;
margin:auto;
}
#block14 .flexlist{
gap:2em;
}
#block14 .qanda-area{
padding:.8em;
background-color: #fff;
border:1px solid #0399B7;
border-radius:1.25em;
box-shadow:1em 1em 0 0 rgba(0,0,0,0.1);
-moz-box-shadow:1em 1em 0 0 rgba(0,0,0,0.1);
-webkit-box-shadow:1em 1em 0 0 rgba(0,0,0,0.1);
}
#block14 .flexlist dl{
padding:.75em;
border:1px solid #DFECF5;
border-radius:.125em;
font-size: 1.5em;
overflow: hidden;
overflow-wrap: anywhere;
}
#block14 .flexlist dl p{
margin-top: .75em;
font-size: .75em;
}
#block14 .flexlist dt,
#block14 .flexlist dd{
position: relative;
}
#block14 .flexlist dt{
padding:.25em 1.5em .25em 2em;
cursor: pointer;
z-index: 1;
transition: .3s;
}
#block14 .flexlist dd {
display: none;
padding:.25em .25em .25em 2em;
margin-top: .25em;
height:auto;
}
#block14 .flexlist dt::before,
#block14 .flexlist dd::before{
position: absolute;
top:.5em;
left:0;
width:1.5em;
height:1.5em;
border-radius: .25em;
vertical-align: middle;
text-align: center;
font-size:.875em;
font-family: "Lora", serif;
line-height: 1.25;
}
#block14 .flexlist dt::before{
content: "Q";
border:1px solid #0399B7;
color:#0399B7;
}
#block14 .flexlist dd::before{
content: "A";
background: #fff;
border:1px solid #DD2A8A;
color:#DD2A8A;
}
#block14 .flexlist dt:hover::after{
background: url('data:image/svg+xml;charset=UTF-8,') center / .6em auto no-repeat #0399B7;
}
#block14 .flexlist dt::after{
position: absolute;
top:0;
right:0;
bottom:0;
width:1.25em;
height:1.25em;
margin:auto;
content: '';
border-radius: 100vh;
background: url('data:image/svg+xml;charset=UTF-8,') center / .6em auto no-repeat #111111;
transition: .3s;
}
#block14 .flexlist dt.active::after{
transform: rotate(180deg);
}
/*---------------------------
block15
---------------------------*/
#block15 .container{
padding-top: 6em;
padding-bottom: 5em;
background: #F2F7FA;
}
#block15 .bg-cover.bg-cover_white{
left:0;
bottom:5%;
margin:auto;
width:100%;
height:80%;
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}
#block15 .container2 .flexlist{
gap:4em;
}
#block15 .container2 .flexlist h3 + p,#block15 .spacearea1 p{
font-size:1.25em;
}
#block15 .container2 .flexlist p:not(:last-of-type){
margin-bottom: 1em;
}
#block15 .container2 .spacearea1{
padding:2em;
background: #fff;
border:1px solid #0399B7;
border-radius: 1.2em;
box-shadow:.8em .8em 0 0 rgba(0,0,0,.12);
-webkit-box-shadow:.8em .8em 0 0 rgba(0,0,0,.12);
-moz-box-shadow:.8em .8em 0 0 rgba(0,0,0,.12);
margin-bottom: 1em;
}
/*支払方法
---------------------------*/
#block15 #paylist{
gap:2em;
margin: 2em auto 1em;
}
#block15 #paylist li{
position: relative;
width:calc((100% - 6em) / 4);
padding-top: 2em;
}
#block15 #paylist li .icon-area{
position: absolute;
top:0;
right:0;
left:0;
width:60%;
aspect-ratio: 1 / 1;
margin:0 auto;
background-image: url(../images/15_line-circle.svg);
background-position: center;
background-size: 92%;
background-repeat: no-repeat;
border-radius:50%;
border:1px solid #0399B7;
z-index: 1;
}
#block15 #paylist li:nth-of-type(1) .icon-area{
background-color: #2ECEBC;
}
#block15 #paylist li:nth-of-type(2) .icon-area{
background-color: #2EAFCE;
}
#block15 #paylist li:nth-of-type(3) .icon-area{
background-color: #9797D8;
}
#block15 #paylist li:nth-of-type(4) .icon-area{
background-color: #84D062;
}
#block15 #paylist li:nth-of-type(-n+2) img{
width:5em;
height:auto;
}
#block15 #paylist li:nth-of-type(n+3) img{
width:auto;
height:5em;
}
#block15 #paylist li .main-text{
position: relative;
padding:8em 1.5em 1.5em 1.5em;
margin: 0 auto 0;
background: #fff;
border:1px solid #0399B7;
border-radius: 2px;
box-shadow:.8em .8em 6px 0 rgba(0,0,0,0.16);
-moz-box-shadow:.8em .8em 6px 0 rgba(0,0,0,0.16);
-webkit-box-shadow:.8em .8em 6px 0 rgba(0,0,0,0.16);
}
#block15 #paylist li .main-text::before{
content:'';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width:calc(100% - .75em);
height:calc(100% - .75em);
margin: auto;
border:1px solid #DFECF5;
}
#block15 #paylist li h4{
margin: .6em auto;
padding-bottom:.5em;
border-bottom:1px solid #DFECF5;
font-weight: 700;
font-size: 1.5em;
text-align: center;
}
#block15 #paylist li .main-text p{
overflow-wrap: break-word;
min-height:4.5em;
}
/*料金制度
---------------------------*/
#block15 #planlist{
table-layout: fixed;
margin: 1.5em auto 1em;
border-collapse: separate;
border-spacing: 3em 1.5em;
text-align: center;
}
/*共通*/
#block15 #planlist th{
padding:.25em .75em;
width:50%;
font-size: 1.5em;
font-weight: 700;
}
#block15 #planlist th.plan1,#block15 #planlist td.plan1 p{
border:solid 1px #257B90;
}
#block15 #planlist th.plan2,#block15 #planlist td.plan2 p{
border:solid 1px #2DAFCE;
}
/*thead*/
#block15 #planlist .plan-title{
color:#fff;
}
#block15 #planlist .plan-title.plan1{
background: #257B90
}
#block15 #planlist .plan-title.plan2{
background: #2DAFCE
}
/*tbody*/
#block15 #planlist td{
vertical-align: bottom;
}
#block15 #planlist td p{
padding:.25em .5em ;
margin: 0;
}
#block15 #planlist td p:not(:last-of-type){
border-bottom: none;
}
#block15 #planlist .plan1 p:nth-of-type(odd){
background: #F2F7FA;
}
#block15 #planlist .plan1 p:nth-of-type(even){
background: #FFF
}
#block15 #planlist .plan2 p:nth-of-type(odd){
background: #EAF8FF
}
#block15 #planlist .plan2 p:nth-of-type(even){
background: #F7FCFF
}
/*矢印*/
#block15 #planlist .arrow{
margin: .5em auto -1em;
width:2.5em;
height:1em;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#block15 #planlist .plan1 .arrow{
background: #257B90
}
#block15 #planlist .plan2 .arrow{
background: #0399B7;
}
/*縦の長さ*/
#block15 #planlist .h-long1{
padding:.8em .5em
}
#block15 #planlist .h-long2{
padding:1.6em .5em
}
#block15 #planlist .h-long3{
padding:2.4em .5em
}
#block15 #planlist .h-long4{
padding:3.2em .5em
}
#block15 #planlist .h-long5{
padding:4em .5em
}
/*tfoot*/
#block15 #planlist tfoot th{
padding:.5em 1em;
}
#block15 #planlist .plan-conclusion.plan1 {
background: #E8F1F4;
color: #257B90
}
#block15 #planlist .plan-conclusion.plan2 {
background: #EDFCFF;
color: #0399B7;
}
/*---------------------------
block16
---------------------------*/
#block16 .bg-cover_blue2{
transform: rotate(-2deg);
transform-origin: center center;
margin-left: -10%;
}
#block16 .bg-block16{
transform: rotate(2deg);
transform-origin: center center;
background: url(../images/16_bg-photo.jpg) center / cover no-repeat;
margin-left: -10%;
border-top:1px solid #0399B7;
border-bottom:1px solid #0399B7;
}
#block16 .bg-cover_glay{
transform: rotate(2deg);
transform-origin: center center;
margin-left: -10%;
border-top:1px solid #0399B7;
border-bottom:1px solid #0399B7;
}
#block16 .bg-cover{
height:calc(100% - 6em);
}
#block16 .container{
padding-top: 6em;
padding-bottom: 5em;
border:none;
}
#block16 .container2 .flexlist{
gap:3em;
}
#block16 .container2 .flexlist h3 + p{
font-size:1.25em
}
#block16 .container2 .access_map{
overflow: hidden;
margin-bottom: 2em;
border-radius: 1em;;
border:1px solid #0399B7;
}
/*---------------------------
block17
---------------------------*/
#block17 .container{
padding-top: 8em;
padding-bottom: 5em;
background: #F2F7FA;
}
#block17 .title-area2{
margin:0 auto -3.5em;
}
/*---------------------------
右下固定ボタン
---------------------------*/
#toform{
position: fixed;
bottom: 5em;
right: 0;
z-index: 9997;
}
#toform .hide-btn-area{
width:3em;
border-radius:1em 0 0 1em;
text-align: center;
margin-right: -.3em;
}
#toform .hide-btn-area .text-main{
display: block;
position: relative;
margin: auto;
padding:.25em .5em 1.5em .25em;
}
#toform .hide-btn-area .text-main::after{
position: absolute;
bottom:0;
left:.25em;
width:1em;
height:1em;
margin:auto;
content: '';
border-radius: 100vh;
background: url('data:image/svg+xml;charset=UTF-8,') center left .25em / .6em auto no-repeat #111111;
}
/*pcのみ*/
@media only screen and (min-width: 768px) {
.sp{
display: none;
}
.conclusion .main-text{
font-size:2.4em;
}
/*---------------------------
fv
---------------------------*/
#fv {
margin-top: -8em;
}
/* 情報
---------------------------*/
#fv .container #info-area{
width:50%;
}
#fv #info-area > *{
max-width:690px;
}
/*---------------------------
block05
---------------------------*/
#block05 #tweetlist li:nth-of-type(1) .item{
margin-left:em;
}
#block05 #tweetlist li:nth-of-type(2) .item{
margin-right:em;
}
#block05 #tweetlist li:nth-of-type(3) .item{
}
#block05 #tweetlist li:nth-of-type(4) .item{
margin-right:em;
}
#block05 #tweetlist li:nth-of-type(5) .item{
margin-left:2em;
}
#block05 #tweetlist li:nth-of-type(6) .item{
margin-right:em;
}
#block05 #tweetlist li:nth-of-type(1),
#block05 #tweetlist li:nth-of-type(2),
#block05 #tweetlist li:nth-of-type(7),
#block05 #tweetlist li:nth-of-type(8){
-webkit-box-pack: center;
justify-content: center;
}
#block05 #tweetlist li:nth-of-type(5) .item,
#block05 #tweetlist li:nth-of-type(6) .item,
#block05 #tweetlist li:nth-of-type(7) .item,
#block05 #tweetlist li:nth-of-type(8) .item{
margin-top: 1em;
}
#block05 #tweetlist li:nth-of-type(7) .item{
margin-right:3em;
}
#block05 #tweetlist li:nth-of-type(8) .item{
margin-left:3em;
}
#block05 #tweetlist li:nth-of-type(9){
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#block05 #tweetlist li:nth-of-type(10){
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
#block05 #tweetlist li:nth-of-type(10) .item{
margin-left:3em;
}
/*吹き出ししっぽ*/
#block05 #tweetlist li:nth-of-type(n+5) .item::after{
top:-1.1em;
transform: scale(1, -1);
}
/*---------------------------
block09
---------------------------*/
/*写真*/
#block09 #photolist li{
width:38%;
}
#block09 #photolist li.photo03,#block09 #photolist li.photo04{
width:24%;
}
/*コメント*/
#block09 #commentlist li.comment01{
width: 33%;
}
#block09 #commentlist li.comment02{
width: 34%;
}
#block09 #commentlist li.comment03{
width:calc(33% - 3em) ;
}
#block09 #commentlist li.comment04{
width: 26.5%;
}
#block09 #commentlist li.comment05{
width: 29%;
}
#block09 #commentlist li.comment06{
width:calc(44.5% - 3em) ;
}
/*---------------------------
block11
---------------------------*/
#block11 #biolist{
gap:1.5em 3em;
}
#block11 #biolist li:nth-of-type(odd){
width:33%
}
#block11 #biolist li:nth-of-type(even){
width:calc(67% - 3em);
}
#block11 .doctor-title{
margin:0 .75em .5em;
}
/*経歴*/
#block11 .biogra-area{
margin-top: -8.5em;
}
/*---------------------------
block13
---------------------------*/
}
/*1620pxからSPまでの間*/
@media screen and (min-width: 767px) and (max-width: 1620px) {
#fv,#block02,#block03,#block05 {
font-size:0.988vw;
}
}
/*PCの基本の長さからSPまでの間*/
@media only screen and (max-width: 1199px) {
/*------------------------------
基本
------------------------------*/
.container,.container2{
width:100%;
}
}
/*SP*/
@media only screen and (max-width: 767px) {
/*------------------------------
基本
------------------------------*/
header{
height:4.5em;
padding:.5em 0 .5em .5em;
}
header .logo{
width:38%;
height:auto;
}
.header-btn-area{
font-size:1.15em;
}
.container{
padding:2.86em 1em 4.28em;
}
.pc{
display: none;
}
/*---------------------------
fv
---------------------------*/
#fv{
font-size:1em;
margin-top: 0;
}
#fv .container{
padding-top:0;
padding-bottom: 1em;
background: url(../images/fv_bg_sp2.jpg) top 6vw right / contain no-repeat ;
}
#fv .container #info-area{
margin: 0 auto;
}
/*
キャッチコピー
---------------------------*/
#fv .catchcopy{
height: 3em;
font-size:1.2em;
/* border-top:1px solid #fff; */
border-bottom:1px solid #fff;
}
#fv .marker-y{
background:linear-gradient(transparent 0%, #F8FF97 0%);
}
#fv .cp-area01 .lg-font02, #fv .cp-area02 .lg-font02{
font-size :1.2em;
}
/*月額*/
#fv .price-area {
width:95%;
margin: auto;
}
#fv .pricecard p{
padding:0 .25em;
border: 1px solid #BEE1E8;
font-size:2em;
line-height: 1.25;
}
#fv .pricecard p .ff-lora{
font-size:1.2em;
color:#0399B7;
}
/*キャッチ2*/
#fv .cp-area02 .catchcopy2{
font-size:1.1em;
}
#fv .cp-area02 p{
margin-bottom: .35em;
}
/* medal
---------------------------*/
#fv #medal-area{
flex-direction: column;
margin: 1em auto 0;
gap:.75em
}
#fv #medal-area li{
width:9em;
height:9em;
padding:.5em
}
#fv #medal-area .medal{
width:8em;
height:8em;
}
#fv #medal-area .ta-center{
font-size:1.2em;
}
/* アピールポイント
---------------------------*/
#appeal-area {
margin-top: -6em;
margin-right: 1.25em;
margin-bottom: 2em;
gap:2.5em;
}
#appeal-area .ap{
width:7em;
height:7em;
}
#appeal-area .ap-inner{
font-size:1.1em;
}
/*営業時間*/
#fv .hours-area{
display: block;
width:95%;
margin:1em auto 0;
text-align: center;
font-size:1.4em;
color:#0481C2;
}
#fv .hours-area .ff-lora{
font-size: 1.4em;
font-weight: 600;
}
/* ボタンセクション
---------------------------*/
#fv .btn-section{
margin-top:0;
}
#fv .btn-section .btn{
width:80%
}
/*---------------------------
block01
---------------------------*/
#block01 {
padding-top:6em;
}
#block01 .container {
padding:4em 0;
}
#block01 .container2 {
padding:2.5em 1em;
}
#block01 .bg-area{
height:91%;
background: url(../images/common_bg_diamond.svg) top center / 3.5em auto ;
}
#block01 .flexlist{
gap:1em;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
/* #block01 #movie-area{
margin-bottom: 1em;
} */
#block01 #photopgm-area .item:nth-of-type(1){
width:calc(50% - .5em);
margin-bottom: 1em;
}
#block01 #photopgm-area .item:nth-of-type(2){
width:calc(50% - .5em);
}
#block01 #photopgm-area .item:nth-of-type(3){
width:100%;
text-align: center;
}
#block01 #photopgm-area .item:nth-of-type(3) img{
width:50%;
}
#block01 #gralogo-area .item:nth-of-type(1){
width:90%;
margin-bottom: 1em;
}
#block01 #gralogo-area .item:nth-of-type(2){
width:100%;
}
#block01 #gralogo-area .item:nth-of-type(2) img.logo01{
width:50%;
}
#block01 #gralogo-area .item:nth-of-type(2) img.logo02{
width:40%;
}
#block01 #gralogo-area .item:nth-of-type(2) img.logo03{
width:40%;
}
/*---------------------------
block02
---------------------------*/
/*背景
---------------------------*/
#block02{
}
#block02::before,#block02::after,.hamidashi::before,.hamidashi::after{
height:2em;
}
.hamidashi{
background: url(../images/02_bg_stripe_sp.png) left center #DBF9FF;
margin: 2em auto;
}
.hamidashi::before,.hamidashi::after{
background: url(../images/02_bg_stripe_sp.png) left center #DBF9FF;
}
.hamidashi::before{
top:-2em;
}
.hamidashi::after{
bottom:-2em;
}
/*タイトル
---------------------------*/
#block02 .title-area{
margin:-1em auto 1em;
font-size:1.25em;
}
/* #block02 .content-title{
width:100%;
padding:.7em 1em;
} */
#block02 .title-area h3.content-title{
font-size: 1.25em;
padding:.2em .5em;
}
#block02 .title-area h2.content-title{
font-size: 1.75em;
}
/*リスト
---------------------------*/
#block02 .flexlist{
gap:.8em;
width:100%;
}
#block02 .list-area .item{
width:calc((100% - 1.6em) / 3);
padding:.8em;
box-shadow:.6em .6em 0 0 rgba(3,153,183,1);
-webkit-box-shadow:.6em .6em 0 0 rgba(3,153,183,1);
-moz-box-shadow:.6em .6em 0 0 rgba(3,153,183,1);
}
#block02 .list-area .item::after{
width:1.25em;
height:1.25em;
font-size:1.25em;
}
#block02 .list-area .item .main-text{
font-size:1em;
margin-top:.5em
}
#block02 .list-area .item .main-text p{
margin-bottom: .25em;
}
#block02 .list-area .item .main-text .fc-blue{
font-size:1.125em;
}
/*プレゼント
---------------------------*/
#block02 .present-area{
width:100%;
max-width: 100%;
padding:.5em 0 0 0;
margin:4em auto 0;
}
#block02 .present-area .fuki-title{
left:-.5em;
font-size:1.25em;
}
#block02 .present-area .main-text {
padding:1em;
border-radius: 1.25em;
border:1px solid #0399B7;
box-shadow:.75em .75em 0 0 rgba(3,153,183,1);
-webkit-box-shadow:.75em .75em 0 0 rgba(3,153,183,1);
-moz-box-shadow:.75em .75em 0 0 rgba(3,153,183,1);
}
#block02 .present-area .flexlist {
flex-direction: column;
gap:1.5em;
width:100%;
padding:1em;
border-radius: .5em;
}
#block02 .present-area .flexlist .item{
width:100%
}
#block02 .present-area .flexlist .item01{
order:1
}
#block02 .present-area .flexlist .item02{
order:0
}
#block02 .present-area .flexlist .item02 img{
width:98%;
margin:1em auto 0;
}
/*---------------------------
block03
---------------------------*/
#block03 .container{
padding-bottom: 4em;
}
/*リスト
---------------------------*/
#block03 #caselist{
width:100%;
gap:2em 1em;
margin:auto;
}
#block03 #caselist .item{
width:calc(50% - .5em);
border-radius: 1em;
padding:.6em;
box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
-webkit-box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
-moz-box-shadow:1em 1em 0 0 rgba(0,0,0,.12);
}
#block03 #caselist .item::before{
width:calc(100% - 1.2em);
height:calc(100% - 1.2em);
border-radius:.6em;
}
#block03 #caselist .item-area{
border-radius:.6em;
}
#block03 #caselist .item-area .main-text{
font-size:1em;
}
#block03 #caselist .casenum,.modal-window .casenum{
font-size:1.1em;
}
#block03 #caselist .casenum{
right: 1em;
bottom:-.75em;
}
.modal-window .casenum{
padding:.25em 1em;
background: #111;
margin-bottom: .25em;
}
/*モーダル
-------------------------*/
/*ウィンドウ*/
.modal-window {
padding: 1em;
width:95%;
min-width: auto;
max-height: 80vh;
border-radius:1em;
box-shadow:.75em .75em 0 0 rgba(0,0,0,.12);
-webkit-box-shadow:.75em .75em 0 0 rgba(0,0,0,.12);
-moz-box-shadow:.75em .75em 0 0 rgba(0,0,0,.12);
}
.modal-window .modalttl{
font-size:1.125em;
}
.modal-window .case-panel{
gap:8%;
background: url(../images/03_ic_arrow.svg) center / 6% auto no-repeat;
}
.modal-window .case-panel img{
width:46%;
}
.modal-window table{
font-size: 1em;
}
.modal-window table th{
padding-right: 1em;
}
.modal-window .btn-close{
right:.8em;
top:.8em;
width:2em;
height:2em;
background: url('data:image/svg+xml;charset=UTF-8,') center / 1em auto no-repeat #0399B7;
}
.modal-window .btn-detail{
width:95%;
}
/* リボン見出し
---------------------------*/
#block03 .ribon-area{
margin-top:3em;
margin-bottom:0;
font-size: 1em;
}
#block03 .ribon-area .main-text::before{
left:-2.5em;
}
#block03 .ribon-area .main-text::after{
right:-2.5em;
}
/* ボタンセクション
---------------------------*/
#block03 .btn-section{
margin-top:-3em;
}
/*---------------------------
block04
---------------------------*/
#block04 .container{
background: url(../images/04_bg_photo_sp.jpg) center right / cover no-repeat #fff;
}
/*リスト
---------------------------*/
#block04 #wishlist{
margin:1em auto 0;
font-size:1.25em;
text-align: left;
}
#block04 .list-area{
padding-left:1em;
}
#block04 .marker-w{
background:linear-gradient(transparent 0%, #FFFFFF 0%);
}
/*---------------------------
block05
---------------------------*/
#block05 .title-area{
font-size:1.5em;
margin-bottom: 1em;
}
#block05 .graphic-area{
padding:0 0 3em;
margin-top: -6em;
}
#block05 .graphic-area img{
width:120%;
margin: auto;
}
#block05 #tweetlist{
position:relative;
gap:1.75em 1em;
width:100%;
}
#block05 #tweetlist li{
width:calc(50% - .5em);
}
#block05 #tweetlist .item{
padding:.9em;
font-size: .9em;
border-radius: 1em;
box-shadow:0 2px 0 0 rgba(255,255,255,1);
-moz-box-shadow:0 2px 0 0 rgba(255,255,255,1);
-webkit-box-shadow:0 2px 0 0 rgba(255,255,255,1);
}
#block05 #tweetlist li:nth-of-type(n+9) .item{
position: absolute;
bottom: -22vh;
}
#block05 #tweetlist li:nth-of-type(-n+8) .item::after{
bottom:-1.1em;
}
#block05 #tweetlist li:nth-of-type(n+9) .item::after{
top:-1.1em;
transform: scale(1,-1);
}
/*---------------------------
#block06
---------------------------*/
#block06 {
padding-top:5em;
}
#block06 .container {
padding:4em 0 9em;
}
#block06 .container2 {
padding:1.5em 1em;
}
#block06 .list-area2{
gap:.5em;
}
#block06 .list-area2 .item{
width:calc((100% - 1em - 4px) / 3);
box-shadow:.4em .4em 0 0 rgba(3,153,183,.5);
-webkit-box-shadow:.4em .4em 0 0 rgba(3,153,183,.5);
-moz-box-shadow:.4em .4em 0 0 rgba(3,153,183,.5);
}
#block06 .list-area2 .item p{
font-size: 1em;
line-height: 1.2;
}
#block06 .list-area2 .item .marker-y{
font-size: 1.35em;
line-height: 1;
margin-top: .5em;
}
#block06 .list-area2 .item .marker-y.ff-lora{
font-size: 2em;
}
#block06 .list-area2 .item p.ls-05em{
font-size: .875em;
}
/*スタッフの声*/
#block06 > .flexlist{
padding-left: 1.5em;
padding-right: 1.5em;
margin-top: -7em;
}
#block06 .staffvoice{
display: block;
width:100%;
margin:auto;
}
#block06 .staffvoice .text-fuki{
position: absolute;
left:1em;
top:-1.5em;
}
#block06 .staffvoice .main-area {
display: flex;
gap:1em;
flex-direction: column;
padding-bottom: 1em;
}
#block06 .waku-box .main-area > *{
width:100%;
}
#block06 .waku-box .main-text {
order:2;
margin-right: 0;
}
#block06 .waku-box .main-text .dotlist{
position: relative;
font-size: 1.25em;
}
#block06 .waku-box .main-text p{
font-size:1.25em;
margin-top:.5em;
}
#block06 .waku-box img{
order:1;
max-width:auto;
transform: rotate(3deg);
}
#block06 .waku-box .main-text .catch{
margin:1.5em auto -1.5em;
position: relative;
font-weight: 700;
transform: rotate(0deg);
font-size:1.25em;
text-align: right;
}
#block06 .waku-box .main-text .conclusion{
font-size:1.25em;
margin-top:.5em;
}
/*---------------------------
block07
---------------------------*/
#block07 .ribon-area{
margin-bottom:-.875em;
}
#block07 .ribon-area .main-text p{
font-size: 1.75em;
}
.ribon-area .main-text::before,.ribon-area .main-text::after{
bottom:-1.2em;
}
#block07 .ribon-area .main-text::before{
left:-2.5em;
}
#block07 .ribon-area .main-text::after{
right:-2.5em;
}
#block07 .waku-box{
border-radius: 1.25em;
}
#block07 .main-area{
padding:2.5em 1.2em 0;
flex-direction: column;
background-image:-webkit-linear-gradient(#F2F7FA 40%,#fff 40%);
background-image:-moz-linear-gradient(#F2F7FA 40%,#fff 40%);
background-image:linear-gradient(#F2F7FA 40%,#fff 40%);
}
#block07 .photo-dc{
width:70%;
}
#block07 #treatlist{
gap:1.5em;
}
#block07 #treatlist p{
padding:.5em 1.2em;
margin:1em 0;
font-size:1.16em;
}
#block07 .treat-area p{
font-size:1.16em;
margin-bottom:.8em
}
/*---------------------------
block08
---------------------------*/
#block08 .title-area2{
margin:0 auto -3.25em;
}
/*
スローガン
---------------------------*/
#block08 #slogan.container {
padding-bottom:2.5em;
}
/*疑問*/
#block08 #slogan .container2{
padding:0;
}
#block08 #slogan .question{
gap:0 2em;
width:100%;
margin: 0 auto 2em;
}
#block08 #slogan .question::after{
bottom:-2em;
width:3em;
height:1.25em;
}
#block08 #slogan .question .main-text{
font-size:1.25em;
}
#block08 #slogan .question .main-text::after{
right:-1.45em;
width:1.5em;
height:.75em;
}
#block08 #slogan .question .gra-area .b-shadow{
border:.3em solid #fff
}
#block08 #slogan .answer p {
font-size:1.825em;
}
#block08 #slogan .answer .c-doctor {
font-size:2.5em;
}
#block08 #slogan .voicelist {
gap:1em;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
#block08 #slogan .voicelist .item {
padding:.65em 1em;
font-size: 1.125em;
width:calc((100% - 1em) / 2)
}
#block08 #slogan .conclusion {
border:.1em solid #fff;
font-size:2.2em;
}
/*
共通
---------------------------*/
#block08 #system.container,
#block08 #lastly.container{
margin-top: 2.5em;
}
/*
システム
---------------------------*/
#block08 #system.container{
margin-bottom: 2.5em;
}
#block08 #system .container2 {
flex-direction: column;
padding:1.5em 1.5em 1.5em .5em;
gap:1.5em;
}
#block08 #system img{
width:100%;
border-radius: 1.275em;
}
#block08 #system .item{
padding-right:0;
}
#block08 #system .item .preface{
margin-bottom: 1em;
font-size:1.45em;
}
#block08 #system .midashi-ribon{
font-size:1.25em;
}
#block08 #system .waku-box {
margin:-1.5em auto 1em;
}
#block08 #system .waku-box .main-area {
padding:2em 1em 1em;
font-size:.75em;
}
/*
サージェリーファースト
---------------------------*/
#block08 #sfirst .midashi-ribon{
font-size:1.25em;
}
#block08 #sfirst .waku-box {
width:95%;
padding:.8em;
margin:-1.5em auto 1em;
border-radius: 1em;
}
#block08 #sfirst .waku-box .main-area {
padding:2em 1em 1em;
border-radius: .3em;
}
#block08 #sfirst .waku-box .main-area .dotlist {
font-size:.75em;
}
/*
結論
---------------------------*/
#block08 #lastly .container2{
padding:1.25em;
}
#block08 #lastly .container2 p{
font-size:1.2em;
}
/*---------------------------
block09
---------------------------*/
#block09 {
padding-top:4em;
}
#block09 .container {
padding:4em 0 4em;
}
#block09 .container2 {
padding:1.5em 1em;
}
/*写真*/
#block09 #photolist li{
width:50%;
}
#block09 #photolist li.photo03 ,#block09 #photolist li.photo04{
width:40%;
}
#block09 #photolist li img{
width:100%;
border:.4em solid #fff;
}
#block09 #photolist li.photo01 img{
margin-bottom: 5em;
margin-left: .5em;
}
#block09 #photolist li.photo02 img{
margin-right: .5em;
margin-bottom: 3em;
}
#block09 #photolist li.photo03 img{
margin-top: -3em;
margin-bottom: 2em;
margin-left:-1em;
}
#block09 #photolist li.photo04 img{
margin-left:1em;
}
/*コメント*/
#block09 #commentlist{
font-size:.875em
}
#block09 #commentlist li{
width:calc(50% - .75em);
}
#block09 #commentlist li.comment01{
margin-top: -3em;
}
#block09 #commentlist li.comment06{
margin-top: -1.5em;
}
/*---------------------------
block10
---------------------------*/
#block10 .container2 {
padding-right:0;
padding-left:0;
}
#block10 .bg-cover{
height:57%;
}
/*見出し*/
#block10 .catchcopy{
font-size:2.5em;
}
/*リスト*/
#block10 #servicelist{
gap:1em ;
margin-top: 2em;
}
#block10 #servicelist li{
position: relative;
padding-bottom: 1.5em;
width:calc((100% - 1em)/2);
}
#block10 #servicelist .s-kawaii{
right:1em;
bottom: -1.25em;
padding:.5em 1.2em;
}
#block10 .servicect{
width:3.5em;
font-size:1.25em;
line-height: 2.5;
}
#block10 .service-area{
gap:.8em;
padding:.8em;
}
#block10 .service-area h4.fc-blue{
font-size:1.2em;
}
#block10 .service-area p{
font-size:1em;
min-height: 4.5em;
}
/*---------------------------
block11
---------------------------*/
#block11 .container2{
padding-right: 0;
padding-left:0;
}
#block11 .bg-cover.bg-cover_white{
bottom:25%;
height:60%;
clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
}
#block11 #biolist{
flex-direction: column;
gap: 1.5em;
}
#block11 .title-area{
order:1
}
#block11 .photo-area{
order:2;
text-align: center;
}
#block11 .certificate-area{
order:4
}
#block11 .biogra-area{
order:2
}
/*肩書*/
#block11 #biolist{
margin: 0 auto 2em;
}
#block11 .doctor-name{
font-size:1.5em;
}
#block11 .doctor-title{
font-size:1.5em;
}
#block11 .doctor-o-title{
margin: 1em auto 2em;
padding:1.25em;
}
/*写真*/
#block11 .photo-area img{
width: 75%;
}
/*証書*/
#block11 .certificate-area{
padding:.5em 1.5em;
}
/*経歴*/
#block11 .history1 p{
font-size: 1em;
}
#block11 .history2 {
font-size: 1em;
}
/*メッセージ*/
#block11 .waku-box{
border-radius: 1em;
padding:1.25em;
}
#block11 .waku-box p{
font-size: 1.125em;
}
/*---------------------------
block12
---------------------------*/
#block12 .container2 {
padding-right:0;
padding-left:0;
}
/*タイトル*/
#block12 .ribon-area{
margin-bottom:-.875em;
}
#block12 .ribon-area .main-text p{
font-size: 1.75em;
}
.ribon-area .main-text::before,.ribon-area .main-text::after{
bottom:-1.2em;
}
#block12 .ribon-area .main-text::before{
left:-2.5em;
}
#block12 .ribon-area .main-text::after{
right:-2.5em;
}
/*背景*/
#block12 .container{
padding-top: 4em;
padding-bottom: 7em;
border:none;
}
/*リスト*/
#block12 #steplist{
gap:3em
}
#block12 .stepct{
margin:0 auto -2px auto;
font-size:1.2em;
}
#block12 .step-area{
gap:1em;
padding:1em;
flex-direction: column;
}
#block12 .step-area .main-text{
order:2;
padding:0;
}
#block12 .step-area .main-text h4.fc-blue{
font-size:1.25em;
}
#block12 .step-area .main-text p{
font-size:1em;
}
#block12 .step-area img{
order:1;
width:66%;
margin: 0 auto ;
}
/*---------------------------
block13
---------------------------*/
/*掲示
---------------------------*/
#block13 #posting{
width:100%;
margin: auto;
}
#block13 #posting .dotlist{
gap:1em 2em;
font-size: 1em;
}
#block13 #posting .dotlist li{
width:calc(50% - 1em);
}
/*注意
---------------------------*/
#block13 #caution h4.midashi2{
font-size:1.5em;
}
#block13 #caution .line2-box{
font-size:1em;
text-align: left;
}
/*ボタン
---------------------------*/
#block13 .btn .text-main{
font-size:1.75em;
}
#block13 .btn .btn-area::after{
bottom:-.5em;
right:.5em;
width:2.33em;
height:3.17em;
}
/*フォーム
---------------------------*/
#block13 #form .main-area{
padding:1.25em;
gap:1.25em
}
#block13 input{
font-size: 1em;
margin-bottom: .5em;
}
#block13 button{
width:100%;
margin:1em auto;
font-size:1.125em;
box-shadow:.25em .25em 0 0 rgba(94,203,0,1),inset .25em .25em 0 0 rgba(255,255,255,1);
-moz-box-shadow:.25em .25em 0 0 rgba(94,203,0,1),inset .25em .25em 0 0 rgba(255,255,255,1);
-webkit-box-shadow:.25em .25em 0 0 rgba(94,203,0,1),inset .25em .25em 0 0 rgba(255,255,255,1);
}
#block13 button .btn-area::before{
background:none;
}
#block13 #form .form-item.flexlist{
flex-direction: column;
gap:1em;
}
#block13 #form .form-item .form-item_title{
width:100%;
padding:0;
font-size:1.125em;
}
#block13 #form .form-item.privacy-area .form-item_title{
margin-bottom: .5em;
}
#block13 #form .form-item_privacy{
font-size:1em;
height:8em
}
/*電話予約
---------------------------*/
#block13 #tel-reserve .waku-box{
display: block;
}
#block13 #tel-reserve .main-area{
flex-direction: column;
gap:1em;
}
#block13 #tel-reserve .main-text .phone-num,#block13 #tel-reserve .main-text [data-tel="0120811817"]{
font-size:4.5em;
}
#block13 #tel-reserve .supple-text {
width:100%;
padding:.5em;
}
/*勧誘理念
---------------------------*/
#block13 #solicitation .line2-box{
padding:1.25em;
margin-top:1em
}
#block13 #solicitation .line2-box .flexlist{
gap:1em
}
#block13 #solicitation .main-text .midashi2{
font-size: 1.5em;
}
#block13 #solicitation .main-text p{
font-size: 1em;
}
#block13 #solicitation .gra-area{
width:38%;
margin:0 0 -1.25em;
}
/*---------------------------
block14
---------------------------*/
#block14 {
padding-top:5em;
}
#block14 .container {
padding:4em 0 4em;
}
#block14 .container2 {
padding:1.5em 1em;
}
#block14 .flexlist{
gap:1.5em
}
#block14 .qanda-area{
padding:.7em;
border-radius:1em;
box-shadow:.75em .75em 0 0 rgba(0,0,0,0.1);
-moz-box-shadow:.75em .75em 0 0 rgba(0,0,0,0.1);
-webkit-box-shadow:.75em .75em 0 0 rgba(0,0,0,0.1);
}
#block14 .flexlist dl{
padding:.6em;
font-size: 1.125em;
}
#block14 .flexlist dt::before,
#block14 .flexlist dd::before{
top:.35em;
}
/*---------------------------
block15
---------------------------*/
#block15 .container{
padding-bottom: 3em;
}
#block15 .container2{
padding: 0;
overflow: visible;
}
#block15 .bg-cover.bg-cover_white{
left:0;
bottom:5%;
margin:auto;
width:100%;
height:80%;
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}
#block15 .container2 .flexlist h3 + p{
font-size:1.15em;
}
#block15 .container2 .spacearea1{
padding:1.5em;
border-radius: 1em;
}
#block15 #paylist{
gap:1em;
margin: 1.5em auto 1em;
}
#block15 #paylist li{
position: relative;
width:calc(50% - .5em);
padding-top: 2em;
}
#block15 #paylist li .icon-area{
position: absolute;
top:0;
right:0;
left:0;
width:60%;
aspect-ratio: 1 / 1;
margin:0 auto;
background-image: url(../images/15_line-circle.svg);
background-position: center;
background-size: 92%;
background-repeat: no-repeat;
border-radius:50%;
border:1px solid #0399B7;
z-index: 1;
}
#block15 #paylist li:nth-of-type(-n+2) img{
width:5em;
height:auto;
}
#block15 #paylist li:nth-of-type(n+3) img{
width:auto;
height:5em;
}
#block15 #paylist li .main-text{
padding:6.5em 1.25em 1.25em 1.25em;
}
#block15 #paylist li .main-text::before{
width:calc(100% - .75em);
height:calc(100% - .75em);
}
#block15 #paylist li h4{
font-size: 1.15em;
}
#block15 #paylist li .main-text p{
overflow-wrap: break-word;
font-size:.9em
}
/*料金制度*/
#block15 #planlist{
width:calc(100% + 2em);
margin: 0 -1em;
border-spacing: 1em 1.5em;
}
/*共通*/
#block15 #planlist th{
font-size: 1.16em;
}
/*tbody*/
#block15 #planlist td p{
padding:.25em ;
}
/*---------------------------
block16
---------------------------*/
#block16 .container2 .flexlist h3 + p{
font-size:1.15em;
}
/*---------------------------
block17
---------------------------*/
#block17 .container{
padding-top: 6em;
padding-bottom: 3em;
}
#block17 .container2 .flexlist h3 + p{
font-size:1.15em;
}
/*---------------------------
右下固定ボタン
---------------------------*/
#toform{
bottom: 3em;
}
/*footer
------------------------------*/
footer{
font-size:.875em
}
.hide-btn-area{
font-size:1.15em;
}
}