html {
font-size: 62.5%;
width: 100%;
margin: 0 auto;
background: #ffffff;
}
body {
position: relative;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
margin: 0 auto;
padding-bottom: 40px;
background: #ffffff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem; /* 16px*/
line-height: 2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
h1, h2, h3, h4, h5, h6 {
margin: 0 auto;
padding: 0;
font-family: 'Noto Sans JP', sans-serif;
}
a:link {
background-color: transparent;
color: #000000;
text-decoration: underline;
}
a:visited {
background-color: transparent;
color: #000000;
text-decoration: none;
}
a:active {
background-color: transparent;
color: #000000;
text-decoration: none;
}
a:hover {
background-color: transparent;
color: #000000;
text-decoration: none;
}
.alpha a:hover img {
opacity: 0.95;
filter: alpha(opacity=95);
-ms-filter: "alpha(opacity=95)";
}
img {
max-width: 100%;
}
#doctor01 {
margin-top: -150px;
padding-top: 150px;
}
#worries01 {
/* margin-top: -150px; */
padding-top: 150px;
}
#worries02 {
margin-top: -150px;
padding-top: 150px;
}
#type9 {
margin-top: -150px;
padding-top: 150px;
}
#contact {
margin-top: -150px;
padding-top: 150px;
}
#reason {
margin-top: -150px;
padding-top: 150px;
}
#point01 {
margin-top: -150px;
padding-top: 150px;
}
#point02 {
margin-top: -150px;
padding-top: 150px;
}
#point03 {
margin-top: -150px;
padding-top: 150px;
}
#point04 {
margin-top: -150px;
padding-top: 150px;
}
#point05 {
margin-top: -150px;
padding-top: 150px;
}
#menu {
margin-top: -150px;
padding-top: 150px;
}
#about {
margin-top: -150px;
padding-top: 150px;
}
#refund {
margin-top: -150px;
padding-top: 150px;
}
#price {
margin-top: -150px;
padding-top: 150px;
}
#voice {
margin-top: -150px;
padding-top: 150px;
}
#flow {
margin-top: -150px;
padding-top: 150px;
}
#faq {
margin-top: -150px;
padding-top: 150px;
}
#doctor02 {
margin-top: -150px;
padding-top: 150px;
}
#clinic {
margin-top: -150px;
padding-top: 150px;
}
#doctor03 {
margin-top: -150px;
padding-top: 150px;
}
/*__________________________________________________
header
__________________________________________________*/
header {
position: fixed;
z-index: 2;
width: 100%;
/* height: 150px; */
height: 35px;
margin: 0 auto 0 auto;
padding: 0;
background: #ffffff;
}
.headlineBox {
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0;
background: #b0a287;
}
.headlineBox .head-line {
width: 1140px;
height: 30px;
margin: 0 auto;
padding: 0;
}
.headlineBox .head-line h1 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-align: left;
line-height: 2;
}
/* nav */
.gnav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
width: 100%;
/* margin: 20px auto 70px auto; */
margin: 0px auto 20px auto;
padding: 0;
}
.logo > a {
width: 100%;
padding: 0;
text-decoration: none;
color: #333;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li.type01 {
display: inline-block;
margin: 0;
padding: 0 15px 0 0;
}
.nav li.type02 {
display: inline-block;
margin: 0;
padding: 0 15px 0 0;
}
.nav li.type03 {
display: inline-block;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: #333333;
}
.nav a.active, .nav a:hover {
text-decoration: none;
color: #333333;
}
.nav .tel-icon {
width: 20px;
height: 20px;
margin: 7px 0 0 0;
padding: 0;
}
.nav p.txt01 {
width: 100%;
height: 25px;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.05em;
}
.nav p.txt02 {
width: 100%;
/* height: 20px; */
margin: 0;
padding: 0;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.05em;
}
.nav p.txt03 {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.05em;
}
@media screen and (max-width: 1024px) {
header {
position: fixed;
z-index: 2;
width: 100%;
/* height: 150px; */
margin: 0 auto 0 auto;
padding: 0;
background: #ffffff;
}
.headlineBox {
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0 3px;
background: #b0a287;
}
.headlineBox .head-line {
width: 1140px;
height: 30px;
margin: 0 auto;
padding: 0;
}
.headlineBox .head-line h1 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-align: left;
line-height: 2;
}
/* nav */
.gnav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
width: 94%;
margin: 20px auto 70px auto;
padding: 0;
}
.logo {
/* width: 30%; */
}
.logo > a {
width: 100%;
padding: 0;
text-decoration: none;
color: #333;
}
.nav ul {
list-style: none;
margin: 0 0 0 9%;
padding: 0;
}
.nav li.type01 {
display: inline-block;
margin: 0;
padding: 0 15px 0 0;
}
.nav li.type02 {
display: inline-block;
width: 28%;
margin: 0;
padding: 0 15px 0 0;
}
.nav li.type03 {
display: inline-block;
width: 25%;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: #333333;
}
.nav a.active, .nav a:hover {
text-decoration: none;
color: #333333;
}
.nav .tel-icon {
width: 20px;
height: 20px;
margin: 7px 0 0 0;
padding: 0;
}
.nav p.txt01 {
width: 100%;
height: 25px;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.05em;
}
.nav p.txt02 {
width: 100%;
/* height: 20px; */
margin: 0;
padding: 0;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.05em;
}
.nav p.txt03 {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.05em;
}
}
@media screen and (max-width: 768px) {
header {
position: fixed;
width: 100%;
/* height: 10%; */
height: 5%;
margin: 0 auto 0 auto;
padding: 0;
background: #ffffff;
}
.headlineBox {
width: 100%;
height: 20px;
margin: 0 auto;
padding: 0 5px;
background: #b0a287;
}
.headlineBox .head-line {
width: 100%;
height: 20px;
margin: 0 auto;
padding: 0;
}
.headlineBox .head-line h1 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0 0;
font-size: 10px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
/* nav */
.gnav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
width: 97%;
margin: 10px auto 70px auto;
padding: 0;
}
.logo {
/* width: 50%; */
/* width: 75%; */
}
.logo > a {
padding: 0;
text-decoration: none;
color: #333;
}
.nav ul {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
}
.nav li.type01 {
display: inline-block;
margin: 0 0 0 28%;
padding: 0 5px 0 0;
}
.nav li.type02 {
display: inline-block;
width: 30%;
margin: 0;
padding: 0 5px 0 0;
}
.nav li.type03 {
display: inline-block;
width: 28%;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: #333333;
}
.nav a.active, .nav a:hover {
text-decoration: none;
color: #333333;
}
.nav .tel-icon {
width: 20px;
height: 20px;
margin: 7px 0 0 0;
padding: 0;
}
.nav p.txt01 {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 10px;
font-weight: 400;
letter-spacing: -0.07em;
}
.nav p.txt02 {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 400;
letter-spacing: -0.07em;
}
.nav p.txt03 {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 10px;
font-weight: 400;
letter-spacing: -0.07em;
}
}
@media screen and (width: 667px) {
header {
position: fixed;
width: 100%;
height: 22%;
margin: 0 auto 0 auto;
padding: 0;
background: #ffffff;
}
}
@media screen and (width: 640px) {
header {
position: fixed;
width: 100%;
height: 22%;
margin: 0 auto 0 auto;
padding: 0;
background: #ffffff;
}
}
/*__________________________________________________
container
__________________________________________________*/
@media only screen and (max-width: 1100px) {
.container {
width: 100%;
margin: 0 auto;
/* padding: 160px 0 0 0; */
/* padding: 170px 0 0 0; */
padding: 43px 0 0 0;
/*overflow-x: hidden;*/
}
}
@media only screen and (min-width: 1101px) {
.container {
width: 100%;
margin: 0 auto;
/* padding: 160px 0 0 0; */
padding: 160px 0 0 0;
/* padding: 43px 0 0 0; */
/*overflow-x: hidden;*/
}
}
@media only screen and (max-width: 768px) {
.container {
width: 100%;
margin: 0 auto;
/* padding: 80px 0 0 0; */
padding: 50px 0 0 0;
max-width: 1160px;
overflow: hidden;
}
}
/* @media screen and (min-width: 768px) {
.container {
margin: 140px auto 0;
max-width: 1160px;
padding: 0 5px;
width: 100%;
}
} */
/*__________________________________________________
vis background: #FFCCFF;
__________________________________________________*/
.visBox {
width: 100%;
margin: 0 auto;
padding: 0;
background: #FFFFFF;
text-align: center;
}
.visBox img{
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.visBox {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background: #FFCCFF;
text-align: center;
}
.visBox img{
vertical-align: top;
}
}
/*__________________________________________________
contentsBox01
__________________________________________________*/
.contentsBox01 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox01 .contents-box01 {
width: 100%;
margin: 70px auto 60px auto;
padding: 0;
text-align: center;
}
.contentsBox01 .contents-box02 {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 768px) {
.contentsBox01 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox01 .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
}
.contentsBox01 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
}
}
/*__________________________________________________
contentsBox02
__________________________________________________*/
.contentsBox02 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox02 .contents-box01 {
width: 100%;
margin: 70px auto 60px auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox02 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox02 .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
}
}
@media only screen and (max-width: 768px) {
.contentsBox02 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox02 .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
}
}
/*__________________________________________________
contentsBox03
__________________________________________________*/
.contentsBox03 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox03 .contents-box01 {
max-width: 641px;
width: 100%;
margin: 70px auto 60px auto;
padding: 0;
}
.contentsBox03b {
width: 100%;
height: 1220px;
margin: 0 auto;
padding: 0;
background: url("assets/images/type_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox03b .contents-box01 {
width: 100%;
margin: 70px auto 60px auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox03 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox03 .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
text-align: center;
}
.contentsBox03b {
width: 100%;
min-height: 1000px;
height: 100%;
margin: 0 auto;
padding: 0;
background: url("assets/images/type_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox03b .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
}
}
@media only screen and (max-width: 768px) {
.contentsBox03 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox03 .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
}
.contentsBox03b {
width: 100%;
min-height: 850px;
height: 100%;
margin: 0 auto;
padding: 0;
background: url("assets/images/type_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox03b .contents-box01 {
max-width: 100%;
width: 90%;
margin: 35px auto 30px auto;
padding: 0;
}
}
/*__________________________________________________
contentsBox04
__________________________________________________*/
.contentsBox04 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox04 .contents-box01 {
width: 100%;
height: 964px;
margin: 70px auto 0 auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox04 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox04 .contents-box01 {
max-width: 100%;
width: 100%;
height: 100%;
margin: 35px auto 0 auto;
padding: 0;
}
.contentsBox04 .contents-box01 img {
vertical-align: top;
}
}
@media only screen and (max-width: 768px) {
.contentsBox04 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox04 .contents-box01 {
max-width: 100%;
width: 100%;
height: 100%;
margin: 35px auto 0 auto;
padding: 0;
}
.contentsBox04 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox05
__________________________________________________*/
.contentsBox05 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox05 .contents-box01 {
width: 100%;
margin: 70px auto 0 auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox05 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox05 .contents-box01 {
max-width: 100%;
width: 90%;
height: 100%;
margin: 35px auto 0 auto;
padding: 0;
}
}
@media only screen and (max-width: 768px) {
.contentsBox05 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox05 .contents-box01 {
max-width: 100%;
width: 90%;
height: 100%;
margin: 35px auto 0 auto;
padding: 0;
}
}
/*__________________________________________________
contentsBox06
__________________________________________________*/
.contentsBox06 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox06 .contents-box01 {
width: 100%;
margin: 70px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox06 .contents-box01 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox06 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox06 .contents-box01 {
max-width: 100%;
width: 100%;
height: 100%;
margin: 35px auto 0 auto;
padding: 0;
}
}
/*__________________________________________________
contentsBox07
__________________________________________________*/
.contentsBox07 {
width: 100%;
height: 1040px;
margin: 0 auto;
padding: 0;
background: url("assets/images/point01_bg01.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox07 .contents-box01 {
width: 100%;
height: 919px;
margin: 0 auto;
padding: 90px 0 0 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox07 {
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background: url("assets/images/point01_bg01.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox07 .contents-box01 {
max-width: 100%;
width: 90%;
height: 100%;
margin: 0 auto 0 auto;
padding: 45px 0 20px 0;
}
}
@media only screen and (max-width: 768px) {
.contentsBox07 {
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background: url("assets/images/point01_bg01.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox07 .contents-box01 {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0 auto 0 auto;
padding: 45px 0 20px 0;
}
}
/*__________________________________________________
contentsBox08
__________________________________________________*/
.contentsBox08 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox08 .contents-box01 {
/* width: 100%;*/
width: 80%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
.contentsBox08 .contents-box02 {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox08 .contents-box021 {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
background: #fcdce4
}
.contentsBox08 .contents-box02 p {
margin: 0 0 20px 0;
padding: 0;
font-size: 18px;
font-weight: 500;
text-align: left;
}
.contentsBox08 .contents-box03 {
width: 100%;
margin: 0 auto;
padding: 40px 0 0 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox08 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox08 .contents-box01 {
width: 80%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox08 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
}
.contentsBox08 .contents-box021 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: #fcdce4
}
.contentsBox08 .contents-box02 p {
margin: 0 0 20px 0;
padding: 0;
font-size: 14px;
font-weight: 500;
text-align: left;
}
.contentsBox08 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 20px 0 0 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox08 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox08 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox08 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
}
.contentsBox08 .contents-box021 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: #fcdce4
}
.contentsBox08 .contents-box02 p {
margin: 0 0 20px 0;
padding: 0;
font-size: 14px;
font-weight: 500;
text-align: left;
line-height: 1.6em;
}
.contentsBox08 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 20px 0 0 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox09
__________________________________________________*/
.contentsBox09 {
width: 100%;
margin: 50px auto 0 auto;
padding: 0;
background: url("assets/images/point01_bg02.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox09 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 90px 0 85px 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox09 {
width: 100%;
margin: 25px auto 0 auto;
padding: 0;
}
.contentsBox09 .contents-box01 {
max-width: 100%;
width: 90%;
height: 100%;
margin: 0 auto;
padding: 45px 0 40px 0;
}
}
@media only screen and (max-width: 768px) {
.contentsBox09 {
width: 100%;
margin: 25px auto 0 auto;
padding: 0;
}
.contentsBox09 .contents-box01 {
max-width: 100%;
width: 90%;
height: 100%;
margin: 0 auto;
padding: 45px 0 40px 0;
}
}
/*__________________________________________________
contentsBox10
__________________________________________________*/
.contentsBox10 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox10 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox10 .contents-box01 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox10 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox10 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox10 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox11
__________________________________________________*/
.contentsBox11 {
width: 100%;
margin: 0 auto;
padding: 0;
background: url("assets/images/point02_bg01.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox11 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 90px 0 60px 0;
text-align: center;
}
.contentsBox11 .contents-box02 {
width: 100%;
margin: 0 auto;
padding: 0 0 30px 0;
text-align: center;
}
.contentsBox11 .contents-box03 {
width: 100%;
margin: 0 auto;
padding: 0 0 40px 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox11 {
width: 100%;
margin: 0 auto;
padding: 0;
background: url("assets/images/point02_bg01.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox11 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 45px 0 30px 0;
text-align: center;
}
.contentsBox11 .contents-box02 {
width: 90%;
margin: 0 auto;
padding: 0 0 15px 0;
text-align: center;
}
.contentsBox11 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0 0 20px 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox11 {
width: 100%;
margin: 0 auto;
padding: 0;
background: url("assets/images/point02_bg01.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox11 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 45px 0 30px 0;
text-align: center;
}
.contentsBox11 .contents-box02 {
width: 90%;
margin: 0 auto;
padding: 0 0 15px 0;
text-align: center;
}
.contentsBox11 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0 0 20px 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox12
__________________________________________________*/
.contentsBox12 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox12 .contents-box01 {
width: 100%;
margin: 70px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox12 .contents-box02 {
width: 100%;
margin: 20px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox12 .contents-box03 {
width: 100%;
margin: 70px auto 0 auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox12 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox12 .contents-box01 {
width: 90%;
margin: 35px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox12 .contents-box02 {
width: 90%;
margin: 10px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox12 .contents-box03 {
width: 90%;
margin: 35px auto 0 auto;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox12 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox12 .contents-box01 {
width: 90%;
margin: 35px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox12 .contents-box02 {
width: 90%;
margin: 10px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox12 .contents-box03 {
width: 90%;
margin: 35px auto 0 auto;
padding: 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox13
__________________________________________________*/
.contentsBox13 {
width: 100%;
margin: 90px auto 0 auto;
padding: 10px 0 110px 0;
background: url("assets/images/menu_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox13 .contents-box01 {
width: 100%;
margin: 70px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox13 .contents-box02 {
width: 100%;
margin: 50px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox13 .contents-box03 {
width: 100%;
margin: 30px auto 0 auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox13 {
width: 100%;
margin: 45px auto 0 auto;
padding: 5px 0 55px 0;
background: url("assets/images/menu_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox13 .contents-box01 {
width: 90%;
margin: 35px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox13 .contents-box02 {
width: 90%;
margin: 25px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox13 .contents-box03 {
width: 90%;
margin: 15px auto 0 auto;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox13 {
width: 100%;
margin: 45px auto 0 auto;
padding: 5px 0 55px 0;
background: url("assets/images/menu_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox13 .contents-box01 {
width: 90%;
margin: 35px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox13 .contents-box02 {
width: 90%;
margin: 25px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox13 .contents-box03 {
width: 90%;
margin: 15px auto 0 auto;
padding: 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox14
__________________________________________________*/
.contentsBox14 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox14 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox14 .contents-box01 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox14 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox14 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox14 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox15
__________________________________________________*/
.contentsBox15 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox15 .contents-box01 {
width: 100%;
margin: 45px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox15 .contents-box01 img {
vertical-align: top;
}
@media screen and (max-width: 1024px) {
.contentsBox15 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox15 .contents-box01 {
width: 90%;
margin: 22px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox15 .contents-box01 img {
vertical-align: top;
}
}
@media only screen and (max-width: 768px) {
.contentsBox15 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox15 .contents-box01 {
width: 90%;
margin: 22px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox15 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox16
__________________________________________________*/
.contentsBox16 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox16 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox16 .contents-box01 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox16 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox16 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox16 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox17
__________________________________________________*/
.contentsBox17 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox17 .contents-box01 {
width: 100%;
margin: 45px auto 100px auto;
padding: 0;
text-align: center;
}
.contentsBox17 .contents-box01 img {
vertical-align: top;
}
@media screen and (max-width: 1024px) {
.contentsBox17 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox17 .contents-box01 {
width: 90%;
margin: 22px auto 50px auto;
padding: 0;
text-align: center;
}
.contentsBox17 .contents-box01 img {
vertical-align: top;
}
}
@media only screen and (max-width: 768px) {
.contentsBox17 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox17 .contents-box01 {
width: 90%;
margin: 22px auto 50px auto;
padding: 0;
text-align: center;
}
.contentsBox17 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox18
__________________________________________________*/
.contentsBox18 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox18 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox18 .contents-box01 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox18 {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f3f3f3;
}
.contentsBox18 .contents-box01 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox18 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox19
__________________________________________________*/
.contentsBox19 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox19 .contents-box01 {
width: 100%;
margin: 45px auto 60px auto;
padding: 0;
text-align: center;
}
.contentsBox19 .contents-box01 img {
vertical-align: top;
}
.contentsBox19 .contents-box02 {
position: relative;
width: 100%;
margin: 45px auto 60px auto;
padding: 0;
text-align: center;
}
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -2230px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox19 .contents-box02 .unit .btn01 {
max-width: 218px;
width: 100%;
margin: 0 30px 0 0;
padding: 0;
}
.contentsBox19 .contents-box02 .unit .btn02 {
max-width: 269px;
width: 100%;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 768px) {
.contentsBox19 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox19 .contents-box01 {
width: 90%;
margin: 22px auto 30px auto;
padding: 0;
text-align: center;
}
.contentsBox19 .contents-box01 img {
vertical-align: top;
}
.contentsBox19 .contents-box02 {
position: relative;
width: 100%;
margin: 22px auto 30px auto;
padding: 0;
text-align: center;
}
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -950px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
.contentsBox19 .contents-box02 .unit .btn01 {
max-width: 100%;
width: 25%;
margin: 0 15px 0 0;
padding: 0;
}
.contentsBox19 .contents-box02 .unit .btn02 {
max-width: 100%;
width: 31%;
margin: 0;
padding: 0;
}
}
@media only screen and (width: 834px) {
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -1950px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
}
@media only screen and (width: 768px) {
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -1600px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
}
@media only screen and (width: 667px) {
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -1520px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
}
@media only screen and (width: 640px) {
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -1460px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
}
@media only screen and (width: 375px) {
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -870px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
}
@media only screen and (width: 360px) {
.contentsBox19 .contents-box02 .unit {
position: absolute;
top: -840px;
left: auto;
right: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0 0 0 5%;
padding: 0;
}
}
/*__________________________________________________
contentsBox20
__________________________________________________*/
.contentsBox20 {
width: 100%;
margin: 0 auto;
padding: 20px 0 0 0;
background: #f4f4f4;
}
.contentsBox20 .contents-box01 {
width: 100%;
margin: 45px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox20 .contents-box01 img {
vertical-align: top;
}
.contentsBox20 .contents-box01 .unit {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 30px auto 0 auto;
padding: 0;
}
.contentsBox20 .contents-box01 .unit .btn01 {
max-width: 468px;
width: 100%;
margin: 0 30px 60px 0;
padding: 0;
}
.contentsBox20 .contents-box01 .unit .btn02 {
max-width: 468px;
width: 100%;
margin: 0 0 60px 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.contentsBox20 {
width: 100%;
margin: 0 auto;
padding: 10px 0 0 0;
background: #f4f4f4;
}
.contentsBox20 .contents-box01 {
width: 90%;
margin: 22px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox20 .contents-box01 img {
vertical-align: top;
}
.contentsBox20 .contents-box01 .unit {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 15px auto 0 auto;
padding: 0;
}
.contentsBox20 .contents-box01 .unit .btn01 {
max-width: 100%;
width: 50%;
margin: 0 15px 30px 0;
padding: 0;
}
.contentsBox20 .contents-box01 .unit .btn02 {
max-width: 100%;
width: 50%;
margin: 0 0 30px 0;
padding: 0;
}
}
@media only screen and (max-width: 768px) {
.contentsBox20 {
width: 100%;
margin: 0 auto;
padding: 10px 0 0 0;
background: #f4f4f4;
}
.contentsBox20 .contents-box01 {
width: 90%;
margin: 22px auto 0 auto;
padding: 0;
text-align: center;
}
.contentsBox20 .contents-box01 img {
vertical-align: top;
}
.contentsBox20 .contents-box01 .unit {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 15px auto 0 auto;
padding: 0;
}
.contentsBox20 .contents-box01 .unit .btn01 {
max-width: 100%;
width: 50%;
margin: 0 15px 30px 0;
padding: 0;
}
.contentsBox20 .contents-box01 .unit .btn02 {
max-width: 100%;
width: 50%;
margin: 0 0 30px 0;
padding: 0;
}
}
/*__________________________________________________
contentsBox21
__________________________________________________*/
.contentsBox21 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox21 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 50px 0 50px 0;
text-align: center;
}
.contentsBox21 .contents-box02 {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox21 .contents-box02 p {
margin: 0 0 20px 0;
padding: 0;
font-size: 18px;
font-weight: 500;
text-align: left;
}
.contentsBox21 .contents-box03 {
width: 100%;
margin: 0 auto;
padding: 40px 0 10px 0;
text-align: center;
}
.contentsBox21 .contents-box04 {
width: 100%;
margin: 0 auto;
padding: 40px 0 50px 0;
text-align: center;
}
.contentsBox21 .contents-box05 {
width: 100%;
margin: 0 auto;
padding: 20px 0 70px 0;
text-align: center;
}
.contentsBox21 .contents-box06 {
width: 100%;
margin: 0 auto;
padding: 0px 0 0px 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox21 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox21 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 25px 0;
text-align: center;
}
.contentsBox21 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
}
.contentsBox21 .contents-box02 p {
margin: 0 0 10px 0;
padding: 0;
font-size: 14px;
font-weight: 500;
text-align: left;
line-height: 1.6em;
}
.contentsBox21 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 20px 0 5px 0;
text-align: center;
}
.contentsBox21 .contents-box04 {
width: 90%;
margin: 0 auto;
padding: 20px 0 25px 0;
text-align: center;
}
.contentsBox21 .contents-box05 {
width: 90%;
margin: 0 auto;
padding: 10px 0 35px 0;
text-align: center;
}
.contentsBox21 .contents-box06 {
width: 90%;
margin: 0 auto;
padding: 0px 0 0px 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox21 {
width: 100%;
margin: 0 auto;
padding: 0;
}
.contentsBox21 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 25px 0;
text-align: center;
}
.contentsBox21 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
}
.contentsBox21 .contents-box02 p {
margin: 0 0 10px 0;
padding: 0;
font-size: 14px;
font-weight: 500;
text-align: left;
line-height: 1.6em;
}
.contentsBox21 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 20px 0 5px 0;
text-align: center;
}
.contentsBox21 .contents-box04 {
width: 90%;
margin: 0 auto;
padding: 20px 0 25px 0;
text-align: center;
}
.contentsBox21 .contents-box05 {
width: 90%;
margin: 0 auto;
padding: 10px 0 35px 0;
text-align: center;
}
.contentsBox21 .contents-box06 {
width: 90%;
margin: 0 auto;
padding: 0px 0 0px 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox22（治療費）
__________________________________________________*/
.contentsBox22 {
width: 100%;
margin: 60px auto 0 auto;
padding: 0 0 105px 0;
background: url("assets/images/price_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox22 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box02 {
width: 100%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box03 {
width: 100%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box04 {
width: 100%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box04 p.txt01 {
max-width: 960px;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #508fdf;
font-size: 18px;
text-align: right;
}
.contentsBox22 .contents-box04 p.txt02 {
max-width: 960px;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #7c68eb;
font-size: 18px;
text-align: right;
}
.contentsBox22 .contents-box04 p.txt03 {
max-width: 960px;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #57c316;
font-size: 18px;
text-align: right;
}
.contentsBox22 .contents-box04 p.txt04 {
max-width: 960px;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #ff5565;
font-size: 18px;
text-align: right;
}
/* table col01 */
table.col01 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #508fdf;
}
table.col01 th {
padding: 5px 15px;
background: #508fdf;
font-size: 24px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col01 td {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col01 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col01 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: right;
}
/* table col02 */
table.col02 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #7c68eb;
}
table.col02 th {
padding: 5px 15px;
background: #7c68eb;
font-size: 24px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col02 td {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col02 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col02 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: right;
}
/* table col03 */
table.col03 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #57c316;
}
table.col03 th {
padding: 5px 15px;
background: #57c316;
font-size: 24px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col03 td {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col03 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col03 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: right;
}
/* table col04 */
table.col04 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #ff5565;
}
table.col04 th {
padding: 5px 15px;
background: #ff5565;
font-size: 24px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col04 th.type01 {
padding: 5px 15px;
background: #ffe5e8;
font-size: 24px;
font-weight: 400;
color: #ff5565;
text-align: right;
}
table.col04 td {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col04 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col04 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 18px;
font-weight: 400;
color: #000000;
text-align: right;
}
@media screen and (max-width: 1024px) {
.contentsBox22 {
width: 100%;
margin: 30px auto 0 auto;
padding: 0 0 55px 0;
background: url("assets/images/price_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox22 .contents-box01 {
width: 30%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box02 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box03 {
width: 60%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box04 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox22 {
width: 100%;
margin: 30px auto 0 auto;
padding: 0 0 55px 0;
background: url("assets/images/price_bg.png") no-repeat;
background-size: cover;
background-position: center;
}
.contentsBox22 .contents-box01 {
width: 30%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box02 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box03 {
width: 60%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box04 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
.contentsBox22 .contents-box04 p.txt01 {
max-width: 100%;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #508fdf;
font-size: 14px;
text-align: right;
}
.contentsBox22 .contents-box04 p.txt02 {
max-width: 100%;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #7c68eb;
font-size: 14px;
text-align: right;
}
.contentsBox22 .contents-box04 p.txt03 {
max-width: 100%;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #57c316;
font-size: 14px;
text-align: right;
}
.contentsBox22 .contents-box04 p.txt04 {
max-width: 100%;
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
color: #ff5565;
font-size: 14px;
text-align: right;
}
/* table col01 */
table.col01 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #508fdf;
}
table.col01 th {
padding: 5px 15px;
background: #508fdf;
font-size: 16px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col01 td {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col01 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col01 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: right;
}
/* table col02 */
table.col02 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #7c68eb;
}
table.col02 th {
padding: 5px 15px;
background: #7c68eb;
font-size: 16px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col02 td {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col02 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col02 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: right;
}
/* table col03 */
table.col03 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #57c316;
}
table.col03 th {
padding: 5px 15px;
background: #57c316;
font-size: 16px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col03 td {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col03 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col03 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: right;
}
/* table col04 */
table.col04 {
max-width: 960px;
width: 100%;
margin: 0 auto 5px auto;
padding: 0;
background: #ff5565;
}
table.col04 th {
padding: 5px 15px;
background: #ff5565;
font-size: 16px;
font-weight: 400;
color: #ffffff;
text-align: left;
}
table.col04 th.type01 {
padding: 5px 15px;
background: #ffe5e8;
font-size: 14px;
font-weight: 400;
color: #ff5565;
text-align: right;
}
table.col04 td {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col04 td.type01 {
width: 50%;
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: left;
}
table.col04 td.type02 {
padding: 5px 15px;
background: #ffffff;
font-size: 14px;
font-weight: 400;
color: #000000;
text-align: right;
}
}
/*__________________________________________________
contentsBox23
__________________________________________________*/
.contentsBox23 {
width: 100%;
margin: 30px auto 157px auto;
padding: 0 0 0 0;
}
.contentsBox23 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox23 {
width: 100%;
margin: 15px auto 78px auto;
padding: 0 0 0 0;
}
.contentsBox23 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox23 {
width: 100%;
margin: 15px auto 78px auto;
padding: 0 0 0 0;
}
.contentsBox23 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox24
__________________________________________________*/
.contentsBox24 {
width: 100%;
margin: 50px auto 120px auto;
padding: 0 0 0 0;
}
.contentsBox24 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 50px 0 0 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox24 {
width: 100%;
margin: 25px auto 60px auto;
padding: 0 0 0 0;
}
.contentsBox24 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox24 {
width: 100%;
margin: 25px auto 60px auto;
padding: 0 0 0 0;
}
.contentsBox24 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
}
}
/*__________________________________________________
contentsBox25 background: #78737a;#FFFACD
__________________________________________________*/
.contentsBox25 {
width: 100%;
margin: 50px auto 90px auto;
padding: 0 0 0 0;
}
.contentsBox25 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 50px 0 60px 0;
text-align: center;
}
.contentsBox25 .contents-box02 {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
background: #78737a;
}
.contentsBox25 .contents-box02 p {
margin: 0 0 0 0;
padding: 90px 30px 30px 30px;
font-size: 18px;
font-weight: 500;
color: #ffffff!important;
text-align: justify;
}
.contentsBox25 .contents-box03 {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox25 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox25 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
.contentsBox25 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: #78737a;
}
.contentsBox25 .contents-box02 p {
margin: 0 0 0 0;
padding: 45px 15px 15px 15px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
text-align: justify;
}
.contentsBox25 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox25 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox25 .contents-box01 {
width: 40%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
.contentsBox25 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: #78737a;
}
.contentsBox25 .contents-box02 p {
margin: 0 0 0 0;
padding: 45px 15px 15px 15px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
text-align: justify;
line-height: 1.6em;
}
.contentsBox25 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
}
}
}
.contentsBox314 .contents-box02 p {
margin: 0 0 0 0;
padding: 25px 15px 15px 15px;
font-size: 16px;
font-weight: 500;
color: #fff;
text-align: justify;
line-height: 1.6em;
z-index: 1;
}
.contentsBox314 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
/****** flame231 *****/
.flame231 {
position: relative;
margin: 2em auto;
width: 95%;
padding: 1em;
border: 1px solid #fff;
border-radius: 0px;
}
.flame231 .flame231-title {
position: absolute;
display: inline-block;
top: -13px;
left: 15px;
padding: 0 10px;
line-height: 1;
font-size: 18px;
background-color: transparent;
color: #fff;
font-weight: bold;
}
.flame231 p {
padding: 1px 1px;
margin: 0;
}
/*__________________________________________________
contentsBox30
__________________________________________________*/
.contentsBox30 {
width: 100%;
margin: 50px auto 90px auto;
padding: 0 0 0 0;
}
.contentsBox30 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 50px 0 60px 0;
text-align: center;
}
.contentsBox30 .contents-box02 {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
background: #FFFACD;
}
.contentsBox30 .contents-box02 p {
margin: 0 0 0 0;
padding: 90px 30px 30px 30px;
font-size: 18px;
font-weight: 500;
color: #ffffff;
text-align: justify;
}
.contentsBox30 .contents-box03 {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
@media screen and (max-width: 1024px) {
.contentsBox30 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox30 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
.contentsBox30 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: #FFFACD;
}
.contentsBox30 .contents-box02 p {
margin: 0 0 0 0;
padding: 45px 15px 15px 15px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
text-align: justify;
}
.contentsBox30 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.contentsBox30 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox30 .contents-box01 {
width: 40%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
.contentsBox30 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: #FFFACD;
}
.contentsBox30 .contents-box02 p {
margin: 0 0 0 0;
padding: 45px 15px 15px 15px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
text-align: justify;
line-height: 1.6em;
}
.contentsBox30 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
}
/*__________________________________________________
flame24
__________________________________________________*/
.flame24 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
border: solid 3px #4a41ad;
}
.flame24 .flame24-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 24px;
background: #4a41ad;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.flame24 p {
padding: 15px 20px;
margin: 0;
text-align:left;
}
/*__________________________________________________
contentsBox31 background: #78737a;
__________________________________________________*/
.contentsBox31 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox31 .contents-box01 {
width: 40%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
.contentsBox31 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("https://nogizaka-aga.com/wp-content/uploads/2024/04/29424267_s-e1714239421533.jpg"); no-repeat;
background-size: cover;
position: relative;
}
.contentsBox31 .contents-box02 p {
margin: 0 0 0 0;
padding: 25px 15px 15px 15px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
text-align: justify;
line-height: 1.6em;
z-index: 1;
}
.contentsBox31 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
/****** flame23 *****/
.flame23 {
position: relative;
margin: 2em 0.5em 1em 1em;
width: 95%;
padding: 1em;
border: 1px solid #fff;
border-radius: 0px;
}
.flame23 .flame23-title {
position: absolute;
display: inline-block;
top: -13px;
left: 15px;
padding: 0 10px;
line-height: 1;
font-size: 18px;
background-color: transparent;
color: #a3b77c;
font-weight: bold;
}
.flame23 p {
padding: 1px 1px;
margin: 0;
color: #fff !important;
}
/*__________________________________________________
contentsBox315 background: #78737a;
__________________________________________________*/
.contentsBox315 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox315 .contents-box01 {
width: 40%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
/* .contentsBox315 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
url("https://nogizaka-aga.com/on/wp-content/uploads/2023/04/E4A9896D-48B9-4450-8415-984F0AFF1B71-e1682095645573.png") no-repeat;
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
url("
https://nogizaka-aga.com/wp-content/uploads/2024/07/IMG_3909-e1720602307203.png") no-repeat;
background-size: cover;
} */
.contentsBox315 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: linear-gradient(rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)), url( https://nogizaka-aga.com/wp-content/uploads/2024/07/IMG_3909-e1720602938434.png );
background-size: cover;
position: relative;
}
.contentsBox315 .contents-box02 p {
margin: 0 0 0 0;
padding: 25px 15px 15px 15px;
font-size: 16px;
font-weight: 500;
color: #fff;
text-align: justify;
line-height: 1.6em;
z-index: 1;
}
.contentsBox315 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
/*__________________________________________________
contentsBox314 background: #78737a;
__________________________________________________*/
.contentsBox314 {
width: 100%;
margin: 25px auto 45px auto;
padding: 0 0 0 0;
}
.contentsBox314 .contents-box01 {
width: 40%;
margin: 0 auto;
padding: 25px 0 30px 0;
text-align: center;
}
.contentsBox314 .contents-box02 {
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 0;
background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
opacity: 0.5;
animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
.contentsBox314 .contents-box02 p {
margin: 0 0 0 0;
padding: 25px 15px 15px 15px;
font-size: 16px;
font-weight: 500;
color: #fff;
text-align: justify;
line-height: 1.6em;
z-index: 1;
}
.contentsBox314 .contents-box03 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
/****** flame231 *****/
.flame231 {
position: relative;
margin: 2em auto;
width: 95%;
padding: 1em;
border: 1px solid #fff;
border-radius: 0px;
}
.flame231 .flame231-title {
position: absolute;
display: inline-block;
top: -13px;
left: 15px;
padding: 0 10px;
line-height: 1;
font-size: 18px;
background-color: transparent;
color: #fff;
font-weight: bold;
}
.flame231 p {
padding: 1px 1px;
margin: 0;
color: #fff !important;
}
/*__________________________________________________
flame25
__________________________________________________*/
.flame25 {
position: relative;
margin: 2em auto;
padding: 1.2em;
width: 100%;
color: #555555;
background-color: #fff;
border: 2px solid #8FBC8F;
box-shadow: 2px 2px 1px #ccc;
}
.flame25 .flame25-title{
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #8FBC8F;
}
.flame25 p {
padding: 15px 20px;
margin: 0;
text-align:left;
}
/*__________________________________________________
contentsBox26
__________________________________________________*/
.contentsBox26 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
}
.contentsBox26 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 0px 0 60px 0;
text-align: center;
}
.contentsBox26 .contents-box02 {
width: 100%;
margin: 0 auto;
padding: 0 0 0 0;
text-align: center;
}
.contentsBox26 .contents-box02 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox26 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
}
.contentsBox26 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 0px 0 30px 0;
text-align: center;
}
.contentsBox26 .contents-box02 {
width: 90%;
margin: 0 auto;
padding: 0 0 0 0;
text-align: center;
}
.contentsBox26 .contents-box02 img {
vertical-align: top;
}
}
/*__________________________________________________
contentsBox27
__________________________________________________*/
.contentsBox27 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
}
.contentsBox27 .contents-box01 {
width: 100%;
margin: 0 auto;
padding: 30px 0 30px 0;
text-align: center;
}
.contentsBox27 .contents-box01 img {
vertical-align: top;
}
@media only screen and (max-width: 768px) {
.contentsBox27 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
}
.contentsBox27 .contents-box01 {
width: 90%;
margin: 0 auto;
padding: 15px 0 15px 0;
text-align: center;
}
.contentsBox27 .contents-box01 img {
vertical-align: top;
}
}
/*__________________________________________________
faqBox
__________________________________________________*/
.faqBox {
max-width: 960px;
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: left;
}
.faqBox h2 {
width: 100%;
margin: 0 auto 60px auto;
padding: 0;
text-align: center;
}
.faqBox dl.faq {
width: 100%;
margin: 0 0 0px 0;
padding: 0 0 5px 0;
border: none;
}
.faqBox dl.faq dt.answer {
clear: left;
float: left;
width: 3.3%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 8px 0;
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
vertical-align: middle;
text-align: left;
}
.faqBox dl.faq dd.answer {
margin-left: 30px;
padding: 0 0 15px 0;
font-size: 18px;
color: #3c3c3c;
text-align: left;
}
@media screen and (max-width: 1024px) {
.faqBox {
max-width: 100%;
width: 90%;
margin: 0 auto 0 auto;
padding: 0;
text-align: left;
}
.faqBox h2 {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.faqBox dl.faq {
width: 100%;
margin: 0 0 0px 0;
padding: 0 0 5px 0;
border: none;
}
.faqBox dl.faq dt.answer {
clear: left;
float: left;
width: 5%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 8px 0;
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
vertical-align: middle;
text-align: left;
}
.faqBox dl.faq dd.answer {
margin-left: 30px;
padding: 0 0 15px 0;
font-size: 16px;
color: #3c3c3c;
text-align: left;
}
}
@media only screen and (max-width: 768px) {
.faqBox {
max-width: 100%;
width: 90%;
margin: 0 auto 0 auto;
padding: 0;
text-align: left;
}
.faqBox h2 {
width: 40%;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
.faqBox dl.faq {
width: 100%;
margin: 0 0 0px 0;
padding: 0 0 5px 0;
border: none;
}
.faqBox dl.faq dt.answer {
clear: left;
float: left;
width: 5%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 8px 0;
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
vertical-align: middle;
text-align: left;
}
.faqBox dl.faq dd.answer {
margin-left: 30px;
padding: 0 0 15px 0;
font-size: 16px;
color: #3c3c3c;
text-align: left;
}
}
/*__________________________________________________
accordion
__________________________________________________*/
.accordion {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.accordion a {
display: block;
cursor: pointer;
}
.accordion .child {
display: none;
max-width: 960px;
width: 100%;
margin: 0 0 0 0;
padding: 0;
background: #ffffff;
border-top: 3px solid #ffffff;
}
.accordion .child .menu {
margin: 0 0 0 0;
background: #0f68b3;
color: #ffffff;
}
.accordion .child .menu:hover {
background: #1171c1;
}
.accordion li {
list-style-type: none;
margin: 0 0 0 -40px;
padding: 0;
}
.accordion .child > li {
margin: 15px 0 0 0;
font-size: 18px;
text-align: left;
line-height: 1.5;
}
.accordion .child > li:last-child {
border-bottom: 0;
}
.switch .menu:after {
position: absolute;
top: 80%;
right: 0px;
margin-top: -3.3rem;
content: url("assets/images/check_icon01.png");
font-family: FontAwesome;
font-size: 3.0rem;
font-weight: bold;
-moz-transition: all, 0.25s, linear;
-o-transition: all, 0.25s, linear;
-webkit-transition: all, 0.25s, linear;
transition: all, 0.25s, linear;
}
.switch .menu.active:after {
-moz-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);title-box
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.child01 {
border: none;
}
.menu {
display: block;
position: relative;
left: 0;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 18px;
letter-spacing: -0.05em;
}
.accordion01 .menu {
max-width: 960px;
width: 100%;
padding: 10px 0;
background: #ffffff;
color: #3c3c3c;
}
.accordion01 .menu:hover {
padding: 10px 0;
background: #ffffff;
text-decoration: none;
}
.accordion01 .menu .icon {
position: relative;
top: 5px;
left: -2px;
padding: 10px 15px 0 0;
}
@media only screen and (max-width: 768px) {
.accordion {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.accordion a {
display: block;
cursor: pointer;
}
.accordion .child {
display: none;
max-width: 960px;
width: 100%;
margin: 0 0 0 0;
padding: 0;
background: #ffffff;
border-top: 3px solid #ffffff;
}
.accordion .child .menu {
margin: 0 0 0 0;
background: #0f68b3;
color: #ffffff;
}
.accordion .child .menu:hover {
background: #1171c1;
}
.accordion li {
list-style-type: none;
margin: 0 0 0 -40px;
padding: 0;
}
.accordion .child > li {
margin: 15px 0 0 0;
font-size: 18px;
text-align: left;
line-height: 1.5;
}
.accordion .child > li:last-child {
border-bottom: 0;
}
.switch .menu:after {
position: absolute;
top: 80%;
right: 0px;
margin-top: -3.3rem;
content: url("assets/images/check_icon01.png");
font-family: FontAwesome;
font-size: 3.0rem;
font-weight: bold;
-moz-transition: all, 0.25s, linear;
-o-transition: all, 0.25s, linear;
-webkit-transition: all, 0.25s, linear;
transition: all, 0.25s, linear;
}
.switch .menu.active:after {
-moz-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);title-box
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.child01 {
border: none;
}
.menu {
display: block;
position: relative;
left: 0;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 16px;
letter-spacing: -0.05em;
}
.accordion01 .menu {
max-width: 100%;
width: 100%;
padding: 10px 0;
background: #ffffff;
color: #3c3c3c;
}
.accordion01 .menu:hover {
padding: 10px 0;
background: #ffffff;
text-decoration: none;
}
.accordion01 .menu .icon {
position: relative;
top: 5px;
left: -2px;
padding: 10px 15px 0 0;
}
}
/*__________________________________________________
form
__________________________________________________*/
.formBox {
clear: both;
max-width: 900px;
width: 100%;
margin: 0 auto 40px auto;
padding: 0;
}
.formBox h2 {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.form-box {
clear: both;
width: 100%;
margin: 0 auto 40px auto;
padding: 0;
}
.form-box p.txt01 {
margin: 0 auto;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 768px) {
.formBox {
max-width: 100%;
width: 90%;
margin: 0 auto 30px auto;
padding: 0;
}
.formBox h2 {
width: 50%;
margin: 25px auto 0 auto;
padding: 0;
text-align: center;
}
.form-box {
width: 100%;
margin: 0 auto;
padding: 0;
}
}
/*__________________________________________________
return
__________________________________________________*/
.return {
clear: both;
width: 50px;
right: 0;
margin: 0 0 0 auto;
padding: 0 0 40px 0;
text-align: right;
}
@media only screen and (max-width: 768px) {
.return {
clear: both;
right: 0;
margin: 0 0 0 auto;
padding: 0 0 40px 0;
text-align: right;
}
}
/*__________________________________________________
contactBox
__________________________________________________*/
.contactBox {
width: 100%;
margin: 0 auto;
padding: 0 0 30px 0;
background: #b9a466;
}
.contactBox .title {
max-width: 263px;
width: 100%;
margin: 0 auto;
padding: 30px 0 0 0;
}
.contactBox .unit {
display: flex;
justify-content: center;
align-items: center;
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 30px 0 0 0;
}
.contactBox .unit .btn01 {
width: 465px;
margin: 0 30px 0 0;
}
.contactBox .unit .btn02 {
width: 465px;
margin: 0;
}
.contactBox .unit .box01 {
width: 270px;
margin: 0 30px 20px 0;
}
.contactBox .unit .box02 {
width: 270px;
margin: 0 0 20px 0;
}
.contactBox .unit img {
vertical-align: top;
}
@media screen and (max-width: 1024px) {
.contactBox {
width: 100%;
margin: 0 auto;
padding: 0 0 15px 0;
background: #b9a466;
}
.contactBox .title {
max-width: 100%;
width: 50%;
margin: 0 auto;
padding: 15px 0 0 0;
text-align: center;
}
.contactBox .unit {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 15px 0 0 0;
}
.contactBox .unit .btn01 {
width: 50%;
margin: 0 15px 0 0;
}
.contactBox .unit .btn02 {
width: 50%;
margin: 0;
}
.contactBox .unit .box01 {
width: 50%;
margin: 0 15px 10px 0;
}
.contactBox .unit .box02 {
width: 50%;
margin: 0 0 10px 0;
}
.contactBox .unit img {
vertical-align: top;
}
}
@media only screen and (max-width: 768px) {
.contactBox {
width: 100%;
margin: 0 auto;
padding: 0 0 15px 0;
background: #b9a466;
}
.contactBox .title {
max-width: 100%;
width: 50%;
margin: 0 auto;
padding: 15px 0 0 0;
text-align: center;
}
.contactBox .unit {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: 90%;
margin: 0 auto;
padding: 15px 0 0 0;
}
.contactBox .unit .btn01 {
width: 50%;
margin: 0 15px 0 0;
}
.contactBox .unit .btn02 {
width: 50%;
margin: 0;
}
.contactBox .unit .box01 {
width: 50%;
margin: 0 15px 10px 0;
}
.contactBox .unit .box02 {
width: 50%;
margin: 0 0 10px 0;
}
.contactBox .unit img {
vertical-align: top;
}
}
/*__________________________________________________
footer
__________________________________________________*/
p.copy {
margin: 0 auto;
color: #000000;
font-size: 16px;
font-weight: 500;
line-height: 2;
text-align: center;
}
@media (max-width: 768px) {
p.copy {
margin: 0 auto;
color: #000000;
font-size: 12px;
line-height: 1.5;
font-weight: 500;
text-align: center;
}
}
/*__________________________________________________
common
__________________________________________________*/
@media (max-width: 768px) {
.pconly {
display: none;
}
}
@media (min-width: 769px) {
.sponly {
display: none;
}
}
@media screen and (max-width: 1024px) {
.br-sp { display: none; }
}
@media screen and (min-width: 768px) {
.br-pc { display: none; }
}
hr.type01 {
margin: 10px 0 40px 0;
padding: 0;
border: none;
border-top: dotted 1px #cccccc;
height: 1px;
color: #FFFFFF;
}
/*__________________________________________________
ボタン０１１比較サイト紹介
__________________________________________________*/
a {
text-decoration: none!important;
}
.button-011 {
text-align: center;
}
.button-011 div {
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: translateY(7px);
width: 150px;
margin: 0 auto;
padding: .2em 0;
border-radius: 10px;
background-color: #fff;
color: #2589d0;
font-size: .8em;
}
.button-011 div::before,
.button-011 div::after {
position: absolute;
top: 100%;
content: '';
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.button-011 div::before {
width: 16px;
height: 8px;
background-color: #2589d0;
}
.button-011 div::after {
width: 12px;
height: 6px;
background-color: #fff;
}
.button-011 button {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 0 auto;
padding: 1em 2em;
border: none;
border-radius: 5px;
background-color: #2589d0;
color: #fff;
font-weight: 600;
font-size: 1em;
}
.button-011 button::after {
transform: rotate(45deg);
width: 5px;
height: 5px;
margin-left: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
content: '';
}
.button-010 button:hover {
background-color: #1579c0;
}
戻る
次に進む
塗りつぶされたボタンのトグルボタン風バージョン
トグルボタン風
/*__________________________________________________
ボタン０１2女 比較サイト紹介
__________________________________________________*/
a {
text-decoration: none!important;
}
.button-012 {
text-align: center;
}
.button-012 div {
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: translateY(7px);
width: 150px;
margin: 0 auto;
padding: .2em 0;
border-radius: 10px;
background-color: #fff;
color: #FF1493;
font-size: .8em;
}
.button-012 div::before,
.button-012 div::after {
position: absolute;
top: 100%;
content: '';
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.button-012 div::before {
width: 16px;
height: 8px;
background-color: #FF1493;
}
.button-012 div::after {
width: 12px;
height: 6px;
background-color: #fff;
}
.button-012 button {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 0 auto;
padding: 1em 2em;
border: none;
border-radius: 5px;
background-color: #FF1493;
color: #fff;
font-weight: 600;
font-size: 1em;
}
.button-012 button::after {
transform: rotate(45deg);
width: 5px;
height: 5px;
margin-left: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
content: '';
}
.button-010 button:hover {
background-color: #1579c0;
}
戻る
次に進む
塗りつぶされたボタンのトグルボタン風バージョン
トグルボタン風
/*__________________________________________________
ボタン０１３ 円形 比較サイト紹介
__________________________________________________*/
a {
text-decoration: none!important;
}
.button-013 {
text-align: center;
}
.button-013 div {
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: translateY(7px);
width: 150px;
margin: 0 auto;
padding: .2em 0;
border-radius: 10px;
background-color: #fff;
color: #FF8C00;
font-size: .8em;
}
.button-013 div::before,
.button-013 div::after {
position: absolute;
top: 100%;
content: '';
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.button-013 div::before {
width: 16px;
height: 8px;
background-color: #FF8C00;
}
.button-013 div::after {
width: 12px;
height: 6px;
background-color: #fff;
}
.button-013 button {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 0 auto;
padding: 1em 2em;
border: none;
border-radius: 5px;
background-color: #FF8C00;
color: #fff;
font-weight: 600;
font-size: 1em;
}
.button-013 button::after {
transform: rotate(45deg);
width: 5px;
height: 5px;
margin-left: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
content: '';
}
.button-010 button:hover {
background-color: #1579c0;
}
戻る
次に進む
塗りつぶされたボタンのトグルボタン風バージョン
トグルボタン風
/*__________________________________________________
ボタン０１4 FAGA 比較サイト紹介
__________________________________________________*/
a {
text-decoration: none!important;
}
.button-014 {
text-align: center;
}
.button-014 div {
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: translateY(7px);
width: 150px;
margin: 0 auto;
padding: .2em 0;
border-radius: 10px;
background-color: #fff;
color: #FF1493;
font-size: .8em;
}
.button-014 div::before,
.button-014 div::after {
position: absolute;
top: 100%;
content: '';
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.button-014 div::before {
width: 16px;
height: 8px;
background-color: #FF1493;
}
.button-014 div::after {
width: 12px;
height: 6px;
background-color: #fff;
}
.button-014 button {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 0 auto;
padding: 1em 2em;
border: none;
border-radius: 5px;
background-color: #FF1493;
color: #fff;
font-weight: 600;
font-size: 1em;
}
.button-014 button::after {
transform: rotate(45deg);
width: 5px;
height: 5px;
margin-left: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
content: '';
}
.button-010 button:hover {
background-color: #1579c0;
}
戻る
次に進む
塗りつぶされたボタンのトグルボタン風バージョン
トグルボタン風
/*-------------------------------------------------
!--水色△矢印↓
---------------------------------------------------*/
.text_on_img {
position: relative;
}
.text_on_img p {
width: 90%;
position: absolute;
font-weight: bold;
font-family: serif;
text-shadow: 3px 3px 5px #FFFFFF;
font-size: 2em;
color: #0040FF;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
}
.text_on_img img {
width: 100%;
max-width: 400px;
opacity: 0.5;
}
/*!--水色△矢印↓--*/
.text_on_img {
position: relative;
}
.text_on_img p {
width: 90%;
position: absolute;
font-weight: bold;
font-family: serif;
text-shadow: 3px 3px 5px #FFFFFF;
font-size: 2em;
color: #0040FF;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
}
.text_on_img img {
width: 100%;
max-width:400px;
opacity:0.5;
}
/*!-- 上部厚タイトル付きボックススタート #e3f2fd #2196f3 #FFB000-->*/
.title-box4{
margin: 1em;
width: 95%;
background-color: #fff;
border: 2px solid #1E90FF;
letter-spacing: .3px;
border-radius: 0px;
width: 95%;
margin: 0 auto 30px auto !important;
}
.title-box4-title{
# color: #fff; #
font-weight: bold;
background-color: #1E90FF;
padding: 4px 6px;
text-align: center;
}
.title-box4 p{
margin: 0;
padding: 1em;
}
.title-box4 li {
font-size: 24px;
line-height: 1.8;
}
.list-010 {
# list-style-type: ''; #
padding: 0.5em 0.5em 0.5em 2em;
}
.list-010 li {
padding: .2.5em;
}
/*ピンク色どっとボックス シャドー大 */
.sample_box15 {
padding: 1em 1.5em;
margin: 2em 0;
background: #ffebf0;/*背景色*/
background-image: radial-gradient(#fad6de 10%, transparent 25%), radial-gradient(#fad6de 10%, transparent 25%);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
/*color:#333;/*文字色*/
text-shadow: 3px 3px 5px #FFFFFF !important;
}
/*水色どっとボックス 大*/
.sample_box13 {
padding: 1em 1.5em;
margin: 2em 0;
background: #ddf2fa;/*背景色*/
background-image: radial-gradient(#fff 10%, transparent 15%), radial-gradient(#fff 10%, transparent 15%);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color:#333;/*文字色*/
}
/* heroconceptgreen*/
.concept95 {
width: 90%;
margin: 25px auto 25px auto;
}
.heroconceptgreen {
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
url("http://nogizaka-aga.com/on/wp-content/uploads/2023/06/BCB2184C-2567-4EBC-A189-A33465A1B02D-e1687781644610.png"); repeat;
/* background-image: url(https://uruoi-clinic.com/wp-content/uploads/2023/07/26644669_m.jpg); */
background-size: cover;
background-position: center;
height: 400px;
width: 100%;
position: relative;
}
.conceptrich {
/*display: flex;*/
/*justify-content: center;*/
/*position: relative; */
/*text-align:center;
flex: block;*/
margin-left: 5%;
margin-right: 5%;
}
.conceptrich h2 {
color: blanchedalmond;
text-shadow: 1px 1px 10px #4b2c14;
font-family: 'Montserrat', serif;
/* font-size: 4.8vw; */
font-size: 6.2vw;
letter-spacing: 0.04em;
font-weight: bold;
position: absolute;
top: 25%;
left: 35%;
-ms-transform: translate(-0%,-50%);
-webkit-transform: translate(-0%,-50%);
transform: translate(-0%,-50%);
}
@media screen and (max-width: 640px) {
.conceptrich h2 {
font-size: 12.4vw;
left:20%;
top: 13%;
}
}
.conceptrich p {
position: absolute;
font-weight: bold;
font-family: serif;
/*text-shadow: 5px 5px 7px #FFFFFF ; */
text-shadow: 5px 5px 7px #FFFFFF,5px 5px 7px #FFFFFF,5px 5px 7px #FFFFFF,5px 5px 7px #FFFFFF,
5px 5px 10px #FFFFFF,5px 5px 10px #FFFFFF,5px 5px 10px #FFFFFF,5px 5px 10px #FFFFFF,5px 5px 10px #FFFFFF;
font-size: ;
color: #0040FF;
line-height: 1.2;
left: 5%;
-ms-transform: translate(-0%,-50%);
-webkit-transform: translate(-0%,-50%);
transform: translate(-0%,-50%);
flex: inline-block;
bottom: 100px;
}
@media screen and (max-width: 640px) {
.conceptrich p {
line-height: 1.8;
letter-spacing: 0.04em;
font-size: 18px;
bottom: 60px;
}
}
.btnconcept {
bottom: 50px;
lef: 15px;
position: absolute;
}
.btnconcept a {
display: inline-block;
align-items: center;
position: relative;
padding: 10px 20px;
line-height: 1;
border-top: 1px solid #333 ;
border-bottom:1px solid #333;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
text-align: center;
transition: ease-in-out 0.2s;
font-family: fot-matisse-pron, serif;
font-weight: 500;
font-style: normal;
color: #333;
font-size: 15px;
text-decoration: none;
}
@media screen and (min-width: 960px){
.conceptrich p {
font-size: 24px;
}
}
/* 見出し start */
.heading-039 {
 margin: 0.5em auto;
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
width: 95%;
margin: 0 auto 10px auto !important;
}
/* クリニック情報 start */
.info dl {
display: flex;
flex-wrap: wrap;
border-top: 1px solid #c8c8c8;
margin-bottom: 30px;
margin: 0 auto;
width: 75%;
}
.info dt {
width: 20%;
border-bottom: 1px solid #c8c8c8;
padding: 15px;
}
.info dd {
width: 70%;
border-bottom: 1px solid #c8c8c8;
padding: 15px;
}
@media screen and (max-width: 600px) {
.info dl {
flex-direction: column;
}
.info dt {
width: 100%;
border-bottom: none;
padding-bottom: 0;
}
.info dd {
width: 100%;
padding-top 0;
}
}
/* クリニック情報 end */
/*----ED治療薬の比較表-start-*/
.h_type_1 {
font-size: 3.2rem;
background-color: #185594;
color: #fff;
text-align: center;
padding: 40px 15px 20px 15px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.h_type_1 span.ruby {
font-size: 3.6rem;
color: #ffc107;
position: relative;
}
.ruby::before {
content: '';
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: calc(100% + 1px);
width: 8px;
height: 8px;
background-color: #ffc107;
border-radius: 50%;
}
/*--.ed_content--*/ .table_pattern_two {
border-collapse: collapse;
max-width: 960px;
width: 100%;
margin: 30px auto;
text-align: center;
vertical-align: middle;
}
/*--.ed_content--*/ .table_pattern_two tbody {
width: 100%;
table-layout: fixed;
}
/*--.ed_content--*/ .table_pattern_two tr th {
width: 20%;
box-sizing: border-box;
padding: 10px 15px;
color: #fff;
background: #185594;
border-right: 1px solid;
}
/*--.ed_content--*/ .table_pattern_two .backred {
width: 20%;
box-sizing: border-box;
padding: 10px 15px;
color: #fff;
background: #991912;
border-right: 1px solid;
}
/*--.ed_content--*/ .table_pattern_two table, /*--.ed_content--*/ .table_pattern_two tr th, /*--.ed_content--*/ .table_pattern_two tr td {
border: 1px solid #185594;
}
.backcolor_gray {
background: #f0f0f0;
}
b {
font-weight: bold;
}
/*--.ed_content--*/ .table_pattern_two tr td {
line-height: 2;
font-size: 16px;
padding: 10px 15px;
word-break: break-all;
}
@media (max-width: 640px) {
.table_comparison {
margin: 0 20px;
}
}
.sp_none {
display: block;
}
.pc_none {
display: none;
}
@media (max-width: 640px) {
.pc_none {
display: block;
}
.sp_none {
display: none;
}
}
/*--.ed_content--*/ .table_pattern_two tr th:last-child {
border-right: 1px solid #185594;
}
@media (max-width: 640px) {
/*-- .ed_content--*/ .table_pattern_two tr th {
width: 100%;
}
}
@media (max-width: 640px) {
/*--.ed_content--*/ .table_pattern_two tr td:first-child {
width: 40%;
font-weight: 600;
}
}
@media (max-width: 640px) {
/*--.ed_content--*/ .table_pattern_two tr td:first-child {
width: 40%;
font-weight: 600;
}
}
/*-- ED薬の比較表 --*/
.hargbox {
padding: 30px 0;
max-width: 960px;
width: 95%;
margin: 0 auto;
align-content: center;
align-items: center;
background: url( https://nogizaka-aga.com/wp-
padding-left: 10px;
padding-right: 10px;
}
.harg {
margin: 0 auto;
width: 100%;
}
.harg p{
padding-left: 10px;
padding-right: 10px;
}
/*========= ナビゲーションドロップダウン ===============*/
/*==ナビゲーション全体の設定*/
nav{
background:#333;
color:#fff;
text-align: center;
}
/*ナビゲーションを横並びに*/
nav ul{
list-style: none;
display: flex;
justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
display: block;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
position: relative;
}
/*ナビゲーションのリンク設定*/
nav ul li a{
display: block;
text-decoration: none;
color: #999;
/* padding:20px 35px; */
transition:all .3s;
}
nav ul li li a{
padding:10px 35px;
}
nav ul li a:hover{
color:#fff;
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
content:'';
position: absolute;
left:15px;
top:25px;
width:6px;
height:6px;
border-top: 2px solid #999;
border-right:2px solid #999;
transform: rotate(135deg);
}
/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
content:'';
position: absolute;
left:6px;
top:17px;
width:6px;
height:6px;
border-top: 2px solid #fff;
border-right:2px solid #fff;
transform: rotate(45deg);
}
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
nav li.has-child ul{
/*絶対配置で位置を指定*/
position: absolute;
left:0;
top:62px;
z-index: 4;
/*形状を指定*/
background:#28BFE7;
width:180px;
/*はじめは非表示*/
visibility: hidden;
opacity: 0;
/*アニメーション設定*/
transition: all .3s;
}
/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
visibility: visible;
opacity: 1;
}
/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
color: #fff;
border-bottom:solid 1px rgba(255,255,255,0.6);
}
nav li.has-child ul li:last-child > a{
border-bottom:none;
}
nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
background:#3577CA;
}
/*==3階層目*/
/*3階層目の位置*/
nav li.has-child ul ul{
top:0;
left:182px;
background:#66ADF5;
}
nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
background:#448ED3;
}
/*==768px以下の形状*/
@media screen and (max-width:768px){
nav{
padding: 0;
/* padding-top: 30px; /* ロゴがみえない*/
}
nav ul{
display: block;
}
nav li.has-child ul,
nav li.has-child ul ul{
position: relative;
left:0;
top:0;
width:100%;
visibility:visible;/*JSで制御するため一旦表示*/
opacity:1;/*JSで制御するため一旦表示*/
display: none;/*JSのslidetoggleで表示させるため非表示に*/
transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
nav ul li a{
border-bottom:1px solid #ccc;
}
/*矢印の位置と向き*/
nav ul li.has-child::before{
left:20px;
}
nav ul ul li.has-child::before{
transform: rotate(135deg);
left:20px;
}
nav ul li.has-child.active::before{
transform: rotate(-45deg);
}
}
/*----accoreing2----*/
.accordion2 {
/*margin: 1em auto;*/
margin: 0.5em 0;
max-width: 93vw;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
/* background-color: #19f4ff; */
background-color: transparent;
margin-left: 1em;
margin-right: 1em;
}
.title2,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title2 {
border: solid 1px #ccc;
/*padding: 0.5rem;*/
padding: 1.00rem;
display: block;
color: #fff;
font-weight: bold;
font-size: 1.6rem;
}
.title2::after,
.title2::before {
content: "";
position: absolute;
right: 1.25em;
/*top: 1.25em;*/
top: 0.70em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title2::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 1.7em!important;
line-height: 1.5;
}
.toggle:checked + .title2 + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title2::before {
transform: rotate(90deg) !important;
}
.option {
position: relative;
margin-bottom: 1em;
margin-top: 1em;
}
.toggle {
display: none;
}
.title2,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title2 {
border: solid 1px #ccc;
/*padding: 0.5rem;*/
padding: 1.00rem;
display: block;
/* color: #fff;*/
color: #333;
font-weight: bold;
font-size: 1.6rem;
}
.title2::after,
.title2::before {
content: "";
position: absolute;
right: 1.25em;
/*top: 1.25em;*/
top: 0.70em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title2::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 1.7em!important;
line-height: 1.5;
}
.toggle:checked + .title2 + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title2::before {
transform: rotate(90deg) !important;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
/*font-size: 0.9em;*/
font-size: 1.6rem!important;
line-height: 1.5;
}
.title3,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title3 {
border: solid 1px #ccc;
/*padding: 0.5rem;*/
padding: 1.00rem;
display: block;
color: #fff;
font-weight: bold;
font-size: 1.6rem;
}
.toggle:checked + .title3 + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title2::before {
transform: rotate(90deg) !important;
}
.title3,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title3 {
border: solid 1px #ccc;
/*padding: 0.5rem;*/
padding: 1.00rem;
display: block;
/* color: #fff;*/
color: #333;
font-weight: bold;
font-size: 1.6rem;
}
.toggle:checked + .title3 + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title2::before {
transform: rotate(90deg) !important;
}
@media screen and (max-width:940px){
.site_nav {
/* display: none; */
}
}
/*--------------------------------------
header-midashi .navi_list
-----------------------------------------*/
.site_nav {
width: 100%;
/* justify-content: space-around; */
margin: auto;
text-align: center;
display: block;
/* margin-top: 36px; */
}
.nav_list {
width: 100%;
/* justify-content: space-between; */
margin: 0 auto;
display: block;
}
.nav_item {
list-style: none;
padding: 0;
margin:0 auto 5px;
display: inline-block;
flex-wrap: wrap;
justify-content: space-around;
}
.nav_link {
color: inherit;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: block;
padding: 0.5em 0em 0.5em 0em;
transition: all 0.3s ease-in-out 0s;
}
.nav_link:hover {
color: #fff;
background-color: #50360d;
opacity: 0.8;
}
.nav_link i {
margin-right: 0.5em;
}
@media only screen and (min-width: 768px) {
.nav_item {
font-size: 24px;
margin:0 1em 0 5px;
}
}
/*-----他院での治療経験がある患者様へ 黄緑見出し
-----------------------------------*/
.keiken {
margin-bottom: 15px;
margin-top: 45px;
}
.keiken p {
/* color: #55934f; */
font-family: "century-gothic", sans-serif;
font-size: 32px;
font-weight: 500;
line-height: 1;
margin-bottom: 15px;
margin-top: 30px;
}
/*メディアクエリ (左右リバー）*/
@media (min-width:768px) {
/*メニュー*/
.feauture-item {
padding-bottom: 15px;
margin-bottom: 5px;
}
.feauture-title {
font-size: 18px;
}
.feauture-text p {
padding-left: 15px;
padding-right: 15px;
}
.feauture-item:nth-child(1) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.feauture-item:nth-child(2) {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.feauture-item:nth-child(3) {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.feauture-item:nth-child(4) {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
} */
.feauture-item:nth-child(2).feauture-image,
.feauture-item:nth-child(3).feauture-image {
width: 250px;
}
.feauture-item:nth-child(2).feauture-text,
.feauture-item:nth-child(3).feauture-text {
width: 250px;
}
.feauture-item:nth-child(4).feauture-image {
width: 250px;
}
.feauture-item:nth-child(4).feauture-text {
width: 250px;
}
}
@media (min-width:768px) {
.feauture-text {
width: 48%;
}
.feauture-image {
width: 48%;
}}
/*-----ul-menu------*/
.ul-menu {
display; flex;
padding: 5px 30px;
list-style:none;
}
/*-------tensen-------*/
.tensen {
border-bottom: 1px dashed #918b8b;
display: flex;
padding: 2px 0;
width: 90%;
}
li {
list-style: none;
}
/*-------R-point-------*/
.R-point {
color: #55934f;
font-family: "century-gothic", sans;
font-size: 3rem;
font-weight: normal;
line-height: 1;
padding-right: 30px;
}
/*------R-poin span------*/
.R-point span {
font-size: 3rem;
font-weight: 500;
margin-right: 8px;
}
/*------R-num--------*/
.R-num {
font-family: "century-gothic", sans-serif;
font-weight: bold;
line-height: 1;
color: #55934f;
font-size: 30px;
padding-right: 1.5vw;
padding-top: 2px;
}
/*--左右リバースエンド (左右リバー）--*/
.align-center-95 {
margin: 0 auto;
width: 95%;
max-width: 1200px;
}
/*-------REASON-------*/
@media screen and (min-width: 769px) {
.REASON {
width: auto;
padding: 110px 0 90px 0;
/* background: transparent url( https://natural-aga.com/wp-content/uploads/2024/05/reason_bg.png ) 0 0 no-repeat; */
/*background: linear-gradient(90deg,rgba(251,213,251,1),rgba(149,233,243,1)) ;*/
background: url( https://natural-aga.com/wp-content/uploads/2024/05/86059541.png) 0 0 no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
}
@media screen and (min-idth: 769px) {
.REASON h3 {
width: auto;
font-size: 50px;
line-height: 1.8em;
font-weight: normal;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
}
}
.gold {
color: #b9a466 !important;
}
@media (min-width: 769px) {
.visible_sp {
display: none;
}
}
@media screen and (min-width: 769px) {
.REASON ul {
width: 900px;
margin: 0 auto;
padding: 100px 0 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
}
@media screen and (min-width: 769px) {
.REASON ul li {
width: 425px;
padding: 0 0 40px 0;
list-style: none;
}
}
@media screen and (min-width: 769px) {
.REASON ul li dl {
width: auto;
}
}
@media screen and (min-width: 769px) {
.REASON ul li dl dt {
width: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
margin: 0;
padding: 0;
line-height: 1.8em;
font-size: 12px;
font-weight: normal;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
}
}
element.style {
}
@media screen and (min-width: 769px) {
.REASON_HEAD div.inner ul li dl dd {
width: auto;
padding: 30px 0 0 0;
font-size: 15px;
text-align: left;
/* padding: 0; */
line-height: 1.8em;
/* font-size: 12px; */
font-weight: normal;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
}
}
@media screen and (min-width: 769px) {
.REASON ul li dl dt span.num {
width: 120px;
display: block;
margin: 0 10px 0 0;
font-size: 95px;
color: #dac8a3;
font-family: 'Montserrat', sans-serif;
}
}
@media screen and (min-width: 769px) {
.REASON ul li dl dt em {
width: 300px;
display: block;
font-size: 22px;
text-align: left;
line-height: 1.5em;
letter-spacing: -0.05em;
}
}
em, i {
font-style: normal;
}
@media screen and (min-width: 769px) {
.REASON_HEAD div.inner ul li dl dd {
width: auto;
padding: 30px 0 0 0;
font-size: 15px;
text-align: left;
}
}
/*--------sp-----------------------------*/
@media screen and (max-width: 768px) {
.REASON {
width: auto;
padding: 50px 0 60px 0;
background: transparent url( https://natural-aga.com/wp-content/uploads/2024/05/86059541.png ) 0 0 no-repeat;
-webkit-background-size: contain;
background-size: contain;
}
}
@media screen and (max-width: 768px) {
.REASON h3 {
width: auto;
font-size: 33px;
font-weight: normal;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
linepadding: 0;-height: 1.8em;
margin: 0;
padding: 0;}
}
@media screen and (max-width: 768px) {
.REASON h3 span {
width: auto;
font-size: 36px;
}
}
@media (max-width: 768px) {
.visible_sp {
display: block;
}
}
@media screen and (max-width: 768px) {
.REASON ul {
width: auto;
margin: 0 1rem;
padding: 40px 0 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
}
@media screen and (max-width: 768px) {
.REASON ul li {
width: auto;
padding: 0 0 40px 0;
}
}
@media screen and (max-width: 768px) {
.REASON ul li dl {
width: auto;
}
}
@media screen and (max-width: 768px) {
.REASON ul li dl dt {
width: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
}
@media screen and (max-width: 768px) {
.REASON ul li dl dt span.num {
width: auto;
display: block;
margin: 0 10px 0 0;
font-size: 60px;
color: #dac8a3;
font-family: 'Montserrat', sans-serif;
}
}
@media screen and (max-width: 768px) {
.REASON ul li dl dt em {
width: auto;
display: block;
font-size: 19px;
text-align: left;
line-height: 1.5em;
letter-spacing: -0.05em;
}
}
@media screen and (max-width: 768px) {
.REASON ul li dl dd {
width: auto;
margin: 15px 0 0 0;
padding: 1rem;
background-color: rgba(204, 204, 204, 0.22);
font-size: 15px;
text-align: left;
}
}
.REASON h3 {
font-weight: normal;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
font-size: 33px;
line-height: 1.5;
}
/*------------最近こんな悩みレ点--------------*/
.worry {
background-color: #f2f5f7;
}
@media (max-width: 1024px) {
.worry .inner {
padding-top: 80px;
}
}
.worry .inner {
/* padding-top: 112px; */
padding-top: 40px;
padding-bottom: 38px;
max-width: 1125px;
width: 100%;
margin: 0 auto;
padding: 50px 50px;
}
@media (max-width: 1024px) {
.worry__h2 {
font-size: 40px;
padding: 20px 0;
}
}
.worry__h2 {
font-size: 50px;
font-weight: 700;
letter-spacing: 0;
text-align: center;
border: 5px solid #0b3157;
background-color: #fff;
padding: 31px 0;
}
@media (max-width: 1024px) {
.worry__h2 {
font-size: 40px;
padding: 20px 0;
margin-right: 8px;
margin-left: 8px;
}
}
.worry__h2-large {
font-size: 1.25em;
color: #0091d9;
}
.worry__content {
display: flex;
justify-content: space-between;
margin: 50px 0 0px;
}
.worry__ul {
/* width: calc(100% - 326px); */
width: calc(100% - 0px);
}
.worry__li {
margin-bottom: 35px;
display: flex;
align-items: center;
line-height: 1.42;
}
.worry__li-check {
display: inline-block;
width: 36px;
flex-shrink: 0;
}
.worry__li-check img {
width: 100%;
vertical-align: bottom;
}
.worry__li-p {
margin-left: 26px;
font-size: 30px;
font-weight: 700;
letter-spacing: 0.025em;
}
.marker-green {
background: linear-gradient(transparent 70%, #b8dd0a 0%);
background: linear-gradient(transparent 70%, #0f0 0%);
}
.worry__content-img {
width: 326px;
}
.worry__content-img img {
width: 100%;
}
.worry__bottom-arrow {
width: 30px;
margin: 0 auto;
}
.worry__bottom-arrow {
width: 30px;
margin: 0 auto;
}
/-------sp------/
@media (max-width: 1024px) {
.worry .inner {
padding-top: 80px;
}
}
@media (max-width: 850px) {
.worry__h2 {
font-size: 32px;
padding: 16px 0;
}
}
@media (max-width: 750px) {
.worry__h2 {
font-size: 16px;
border: 2px solid #0b3157;
}
}
@media (max-width: 850px) {
.worry__content {
margin-bottom: 35px;
}
}
@media (max-width: 750px) {
.worry__content {
display: block;
margin-top: 25px;
}
}
@media (max-width: 750px) {
.worry__ul {
width: 100%;
margin-bottom: 30px;
}
}
@media (max-width: 850px) {
.worry__li {
margin-bottom: 28px;
}
}
@media (max-width: 750px) {
.worry__li {
margin-bottom: 20px;
}
}
@media (max-width: 850px) {
.worry__li-check {
width: 28.8px;
}
}
@media (max-width: 750px) {
.worry__li-check {
width: 18px;
}
}
@media (max-width: 850px) {
.worry__li-p {
margin-left: 20.8px;
font-size: 24px;
}
}
@media (max-width: 750px) {
.worry__li-p {
margin-left: 10px;
font-size: 16px;
}
}
@media (max-width: 750px) {
.worry__bottom-arrow {
width: 20px;
}
}
/*------------最近こんな悩みレ点------end--------*/
/*blog box*/
.blogBox {
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
}
.blogBox .blog-box01 {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.blogBox .blog-box01 h3.title01 {
margin: 30px 0 30px 0 !important;
padding: 0 !important;
border-bottom: none !important;
font-size: 24px !important;
font-weight: bold !important;
color: #000000 !important;
text-indent: 15px !important;
border-left: 5px solid #8f7d4b !important;
}
.blogBox .blog-box01 h4.title01 {
margin: 30px 0 30px 0 !important;
padding: 5px 0 !important;
border-bottom: 1px solid #8f7d4b !important;
font-size: 18px !important;
font-weight: bold !important;
color: #000000 !important;
}
.blogBox .blog-box01 h4.title01:before {
content: '◆';
position: relative;
top: -2px;
margin-right: 5px;
font-size: 10px;
color: #8f7d4b;
}
.blogBox .blog-box01 p.txt01 {
margin: 0 0 30px 0 !important;
padding: 0 !important;
letter-spacing: -0.05em !important;
}
.blogBox .blog-box01 .blog-img-box {
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
}
/* リスト番号 */
ul.list01 {
counter-reset: li;
}
ul.list01 li {
position: relative;
font-size: 18px;
padding-left: 0;
margin: 0 0 20px 0;
list-style: none;
}
ul.list01 li:before {
position: absolute;
top: 3px;
left: -23px;
content: url("/wp-content/uploads/2022/04/check_icon.png");
margin-right: 5px;
}
/* リスト番号 */
ol.list02 {
counter-reset: li;
}
ol.list02 li {
position: relative;
font-size: 18px;
padding-left: 0;
margin: 0 0 20px 0;
list-style: none;
}
ol.list02 li:before {
position: absolute;
top: 0;
left: -30px;
margin: 0;
padding: 0 8px;
background: #8f7d4b;
border-radius: 3px;
font-weight: bold;
color: #ffffff;
counter-increment: li;
content: counter(li);
}
/*追加 見出文字白*/
ul.outline li.title03 a {
text-decoration: none !important;
color: #ffffff !important;
} /*見出しの色はここを変える*/
ul.outline li.title03 a:hover {
text-decoration: underline !important;
color: #ffffff !important;
} /*マウス乗った時の下線含めた色*/
ul.outline li.title04 a {
text-decoration: none !important;
color: #ffffff !important;
} /*サブ見出色*/
ul.outline li.title04 a:hover {
text-decoration: underline !important;
color: #ffffff !important;
} /*マウス乗った時のサブ見出色*/
ul.outline li.title03 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #ffffff;
text-align: left;
} /*見出*/
ul.outline li.title04 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #ffffff;
text-align: left;
text-indent: 15px; /*右にずらせ*/
} /*サブ見出*/
/* outline */
.outlineBox {
width: 95%;
margin: 0 auto 30px auto;
padding: 0;
}
.outlineBox .outline-box01 {
max-width: 958px;
width: 100%;
margin: 0 auto;
padding: 0;
background: #f8f8f8;
border: 1px solid #988b69;
}
.outlineBox .outline-box01 .outline-title {
margin: 0;
padding: 30px 0 15px 0;
font-size: 18px;
font-weight: 500;
color: #000000;
text-align: center;
}
ul.outline {
list-style-type: none !important;
margin: 0;
padding: 0;
}
ul.outline li.title01 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #6e6448;
text-align: left;
}
ul.outline li.title02 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #6e6448;
text-align: left;
text-indent: 15px;
}
ul.outline li.title01 a {
text-decoration: none !important;
color: #6e6448 !important;
}
ul.outline li.title01 a:hover {
text-decoration: underline !important;
color: #6e6448 !important;
}
ul.outline li.title02 a {
text-decoration: none !important;
color: #6e6448 !important;
}
ul.outline li.title02 a:hover {
text-decoration: underline !important;
color: #6e6448 !important;
}
/*blog */
.blogBox {
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
}
.blogBox p {
color: #7D7269;
}
.blogBox .blog-box01 {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.blogBox .blog-box01 h3.title01 {
margin: 30px 0 30px 0 !important;
padding: 0 !important;
border-bottom: none !important;
font-size: 24px !important;
font-weight: bold !important;
color: #7D7269 !important;
text-indent: 15px !important;
border-left: 5px solid #8f7d4b !important;
}
.blogBox .blog-box01 h4.title01 {
margin: 30px 0 30px 0 !important;
padding: 5px 0 !important;
border-bottom: 1px solid #8f7d4b !important;
font-size: 18px !important;
font-weight: bold !important;
color: #7D7269 !important;
}
.blogBox .blog-box01 h4.title01:before {
content: '◆';
position: relative;
top: -2px;
margin-right: 5px;
font-size: 10px;
color: #8f7d4b;
}
.blogBox .blog-box01 p.txt01 {
margin: 0 0 30px 0 !important;
padding: 0 !important;
letter-spacing: -0.05em !important;
}
.blogBox .blog-box01 .blog-img-box {
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
}
/* リスト番号 */
ul.list01 {
counter-reset: li;
}
ul.list01 li {
position: relative;
font-size: 18px;
padding-left: 0;
margin: 0 0 20px 0;
list-style: none;
}
ul.list01 li:before {
position: absolute;
top: 3px;
left: -23px;
content: url("/wp-content/uploads/2022/04/check_icon.png");
margin-right: 5px;
}
/* リスト番号 */
ol.list02 {
counter-reset: li;
}
ol.list02 li {
position: relative;
font-size: 18px;
padding-left: 0;
margin: 0 0 20px 0;
list-style: none;
}
ol.list02 li:before {
position: absolute;
top: 0;
left: -30px;
margin: 0;
padding: 0 8px;
background: #8f7d4b;
border-radius: 3px;
font-weight: bold;
color: #ffffff;
counter-increment: li;
content: counter(li);
}
/*追加 見出文字白*/
ul.outline li.title03 a {
text-decoration: none !important;
color: #ffffff !important;
} /*見出しの色はここを変える*/
ul.outline li.title03 a:hover {
text-decoration: underline !important;
color: #ffffff !important;
} /*マウス乗った時の下線含めた色*/
ul.outline li.title04 a {
text-decoration: none !important;
color: #ffffff !important;
} /*サブ見出色*/
ul.outline li.title04 a:hover {
text-decoration: underline !important;
color: #ffffff !important;
} /*マウス乗った時のサブ見出色*/
ul.outline li.title03 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #ffffff;
text-align: left;
} /*見出*/
ul.outline li.title04 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #ffffff;
text-align: left;
text-indent: 15px; /*右にずらせ*/
} /*サブ見出*/
/* outline */
.outlineBox {
width: 95%;
margin: 0 auto 30px auto;
padding: 0;
}
.outlineBox .outline-box01 {
max-width: 958px;
width: 100%;
margin: 0 auto;
padding: 0;
background: #f8f8f8;
border: 1px solid #988b69;
}
.outlineBox .outline-box01 .outline-title {
margin: 0;
padding: 30px 0 15px 0;
font-size: 18px;
font-weight: 500;
color: #000000;
text-align: center;
}
ul.outline {
list-style-type: none !important;
margin: 0;
padding: 0;
}
ul.outline li.title01 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #6e6448;
text-align: left;
}
ul.outline li.title02 {
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 400;
color: #6e6448;
text-align: left;
text-indent: 15px;
}
ul.outline li.title01 a {
text-decoration: none !important;
color: #6e6448 !important;
}
ul.outline li.title01 a:hover {
text-decoration: underline !important;
color: #6e6448 !important;
}
ul.outline li.title02 a {
text-decoration: none !important;
color: #6e6448 !important;
}
ul.outline li.title02 a:hover {
text-decoration: underline !important;
color: #6e6448 !important;
}
.blogBox h2 {
/*font-size: 24px;
color: #8f7d4b;
background: #f7f7f8;
border-left: 5px solid #c9ab53!important;
font-size: 26px !important;
margin-bottom: 10px; */
font-size: 26px;
color: #c9ab53;
font-family: 'Noto Sans JP', sans-serif;
}
/*blog box outline end*/
/* 主な脱毛タイプ */
@media screen and (min-width: 835px) {
.sec-case {
/* background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/case-bg-pc-cs.png) bottom no-repeat; */
background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/case-bgbl-pc-cs-.png) bottom no-repeat;
/* background-color: snow; */
background-size: cover;
padding: 88px 0 236px;
z-index: 2;
position: relative;
}}
@media screen and (max-width: 834px) {
.sec-case {
/* background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/case-bg-pc-cs.png ) bottom no-repeat; */
background: url(https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/case-bgbl-pc-cs-.png) bottom no-repeat;
/* background-color: snow; */
background-size: cover;
padding: 88px 0 236px;
z-index: 2;
position: relative;
}}
.sec-case .inner {
display: block;
max-width: 1030px;
padding: 0 15px;
margin: 0 auto;
}
.case-ttl {
text-align: center;
font-weight: 500;
font-size: 6rem;
letter-spacing: 16px;
margin-bottom: 62px;
line-height: 1.8;
color: #fff;
}
.case-ttl small {
display: block;
font-size: 3.5rem;
letter-spacing: 5.4px;
margin-bottom: 4px;
}
@media screen and (max-width: 1200px) {
.case-list {
margin: 0 -10px 41px;
}
}
.case-list {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -25px 21px;
}
@media screen and (max-width: 1200px) {
.case-list__item {
padding: 0 10px 48px;
}
}
.case-list__item {
position: relative;
text-align: center;
width: 33.333%;
font-weight: 500;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.625;
padding: 0 25px 48px;
}
li {
list-style: none;
}
.case-list__img {
position: relative;
margin-bottom: 29px;
}
.case-list__img:before {
content: "";
display: block;
padding-bottom: 100%;
}
.case-list__img .imgs {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
}
.case-list__img .imgs {
vertical-align: middle;
max-width: 100%;
}
@media screen and (max-width: 1024px) {
.case-list__item p {
padding: 0;
color: #fff;
}
}
.case-list__item p {
padding: 0 20px;
letter-spacing: 2px;
color: #fff;
}
.case-list__ttl {
position: absolute;
text-align: center;
max-width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
min-width: 192px;
/* background: #567E9C; */
background: #0B3156;
color: white;
font-weight: 500;
font-size: 2rem;
letter-spacing: 3px;
padding: 2px 15px;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/*---sp---*/
@media screen and (max-width: 834px) {
.case-ttl {
font-size: 3.4rem;
letter-spacing: 9.6px;
margin-bottom: 35px;
line-height: 1.8;
}
}
@media screen and (max-width: 834px) {
.case-ttl {
font-size: 3.4rem;
letter-spacing: 9.6px;
margin-bottom: 35px;
}
}
.case-list {
margin: 0 -10px 41px;
}
@media screen and (max-width: 640px) {
.case-list__item {
width: 100%;
padding: 0 42px 48px;
margin-bottom: 35px;
}
}
@media screen and (max-width: 834px) {
.case-list__item {
font-size: 18px;
font-size: 1.8rem;
line-height: 1.395;
}
}
@media screen and (max-width: 1200px) {
.case-list__item {
padding: 0 10px 48px;
}
}
@media screen and (max-width: 640px) {
.case-list__img {
max-width: 198px;
margin: 0 auto 17px;
}
}
@media screen and (max-width: 834px) {
.case-desc {
font-size: 2.4rem;
line-height: 1.8;
letter-spacing: 3px;
color: #fff;
}
}
.case-desc {
text-align: center;
font-weight: 500;
font-size: 4.5rem;
line-height: 1.32;
letter-spacing: 5.5px;
color: #fff;
}
.case-desc span {
border-bottom: 1px solid white;
padding-bottom: 2px;
}
@media screen and (max-width: 834px) {
.case-desc small {
font-size: 1.987rem;
}
}
.case-desc small {
position: relative;
font-size: 3rem;
letter-spacing: 3.4px;
top: -6px;
}
@media screen and (max-width: 834px) {
.case-note {
width: 77px;
height: 77px;
font-size: 1.719rem;
bottom: 48px;
}
}
.case-note {
position: absolute;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
width: 106px;
height: 106px;
/* background: white;*/
background: orange;
color: #fff;
border-radius: 50%;
font-weight: 500;
font-size: 2.375rem;
line-height: 1;
margin: 0 auto;
bottom: 99px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* 主な脱毛タイプ end */
/*---誤ったケア---*/
.sec-symptoms {
/* margin-top: -121px; */
margin-top: -100px;
overflow: hidden;
position: relative;
}
.sec-symptoms .inner {
display: block;
max-width: 1030px;
padding: 0 15px;
margin: 0 auto;
}
.symptoms-ttl {
position: relative;
text-align: center;
color: white;
font-weight: 500;
font-size: 3.383rem;
letter-spacing: 3px;
padding: 127px 0 38px;
z-index: 1;
}
.symptoms-ttl:before {
content: "";
position: absolute;
/* background: url( https://harg.nogizaka-aga.com/wp-content/uploads/2024/06/symptoms-bg-pc-scaled.jpg ) center no-repeat; */
background-size: cover;
background-color: #0B3156;
width: 100vw;
height: 100%;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
.symptoms-ttl small {
display: inline-block;
background: white;
color: #554F4D;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 5px;
box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 5px;
font-size: 3rem;
padding: 9px 60px 8px;
margin-bottom: 18px;
letter-spacing: 2.5px;
}
.symptoms-ttl span {
position: relative;
display: block;
padding-right: 58px;
z-index: 1;
}
.symptoms-ttl span:before {
content: "";
position: absolute;
background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/14121438_TP_V-e1719067986741.png ) top no-repeat;
background-size: cover;
width: 362px;
height: 246px;
bottom: -38px;
right: -113px;
z-index: -1;
}
.symptoms-ttl strong {
position: relative;
color: #F4ED7A;
font-weight: 500;
font-size: 4.3979rem;
letter-spacing: 6.4px;
top: 4px;
}
.symptoms-wrap {
position: relative;
text-align: center;
font-weight: 500;
font-size: 2.8rem;
letter-spacing: 2.5px;
padding: 94px 0 34px;
z-index: 1;
}
.symptoms-wrap:before {
content: "";
position: absolute;
width: 100vw;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(#F7F1F5), to(#EDDFE9));
background: -o-linear-gradient(left, #F7F1F5, #EDDFE9);
background: linear-gradient(90deg, #F7F1F5, #EDDFE9);
background: linear-gradient(90deg, #a0cfef, #a0cfef);
/* background-color: #0191D8; */
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
.symptoms-wrap__ttl {
color: #B95874;
font-size: 6rem;
letter-spacing: 11px;
margin: 7px 0 14px;
}
/* .symptoms-wrap:after {
content: "";
position: absolute;
background: url( file:///C:/Users/user/Downloads/symptoms-shape.svg ) center no-repeat;
background-size: contain;
width: 56px;
height: 45px;
top: 26px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
} */
.symptoms-desc {
position: relative;
color: white;
font-weight: 500;
font-size: 4rem;
letter-spacing: 3.8px;
padding: 36px 0 25px 252px;
z-index: 1;
}
.symptoms-desc:before {
content: "";
position: absolute;
width: 100vw;
height: 100%;
/* background: #d79daa; */
background: #0B3156;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
.symptoms-desc small {
display: block;
font-size: 3rem;
margin-bottom: 11px;
}
.symptoms-desc:after {
content: "";
position: absolute;
background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/PASONAZ160306060I9A1905_TP_V4-e1719068284838.png ) center no-repeat;
background-size: contain;
width: 308px;
height: 330px;
left: -33px;
bottom: 0;
}
.symptoms-desc2 {
position: relative;
color: white;
font-weight: 500;
font-size: 4rem;
letter-spacing: 3.8px;
padding: 36px 0 25px 252px;
z-index: 1;
}
.symptoms-desc2:before {
content: "";
position: absolute;
width: 100vw;
height: 100%;
/* background: #d79daa; */
background: #0B3156;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
.symptoms-desc2 small {
display: block;
font-size: 3rem;
margin-bottom: 11px;
}
.symptoms-desc2:after {
content: "";
position: absolute;
background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/PASONAZ160306150I9A1901_TP_V-e1719071661305.png ) center no-repeat;
background-size: contain;
width: 308px;
height: 330px;
left: -33px;
bottom: 0;
}
/*---sp----*/
@media screen and (max-width: 834px) {
.sec-symptoms {
/* margin-top: -58px; */
margin-top: -50px;
}
}
@media screen and (max-width: 640px) {
.symptoms-ttl {
text-align: left;
text-shadow: black 0 0 10px;
letter-spacing: -1px;
}
}
@media screen and (max-width: 834px) {
.symptoms-ttl {
font-size: 2.058rem;
padding: 65px 0 17px;
}
}
@media screen and (max-width: 640px) {
.symptoms-ttl:before {
/* background: url( https://harg.nogizaka-aga.com/wp-content/uploads/2024/06/symptoms-bg-sp.jpg ) center no-repeat; */
background-color: #0B3156;
background-size: cover;
}
}
@media screen and (max-width: 834px) {
.symptoms-ttl small {
text-shadow: none;
font-size: 1.836rem;
padding: 6px 39px 4px;
margin-bottom: 7px;
letter-spacing: 1.5px;
}
}
@media screen and (max-width: 834px) {
.symptoms-ttl span {
padding-right: 110px;
}
}
@media screen and (max-width: 834px) {
.symptoms-ttl span:before {
background: url( https://uruoi-clinic.com/uruoi2/wp-content/uploads/2024/06/14121438_TP_V-e1719067986741.png ) top no-repeat;
background-size: cover;
width: 170px;
height: 156px;
bottom: -17px;
right: -13px;
}
}
@media screen and (max-width: 640px) {
.symptoms-ttl strong {
display: block;
}
}
@media screen and (max-width: 834px) {
.symptoms-ttl strong {
font-size: 2.6754rem;
letter-spacing: 4.4px;
top: 0;
}
}
@media screen and (max-width: 834px) {
.symptoms-wrap {
font-size: 1.8rem;
letter-spacing: 1.5px;
padding: 57px 0 37px;
}
}
@media screen and (max-width: 834px) {
.symptoms-wrap__ttl {
font-size: 3.6rem;
letter-spacing: 5.3px;
margin: -4px 0 0;
}
}
@media screen and (max-width: 834px) {
.symptoms-wrap:after {
width: 35px;
height: 27px;
top: 16px;
}
}
@media screen and (max-width: 834px) {
.symptoms-desc {
text-shadow: rgba(178, 141, 173, 0.75) 0 0 3px;
font-size: 23.5px;
font-size: 2.35rem;
line-height: 1.349787234;
letter-spacing: -1px;
padding: 13px 0 9px 81px;
margin-right: -10px;
}
}
@media screen and (max-width: 834px) {
.symptoms-desc small {
font-size: 1.762rem;
margin-bottom: 8px;
}
}
@media screen and (max-width: 834px) {
.symptoms-desc:after {
width: 160px;
height: 170px;
left: -55px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl {
font-size: 2.1rem;
padding: 22px 0 30px;
margin-bottom: 7px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span {
font-size: 3.955rem;
padding: 0 10px;
margin-top: 8px;
letter-spacing: 5px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span:before {
bottom: -15px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span small {
font-size: 2.373rem;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span strong {
font-size: 3.641rem;
}
}
@media screen and (max-width: 834px) {
.reasons-list__item {
padding: 26px 0 45px;
}
}
@media screen and (max-width: 640px) {
.reasons-list__item:nth-child(odd):before {
background: url( https://harg.nogizaka-aga.com/wp-content/uploads/2024/06/reasons-bg-sp-scaled.jpg ) top no-repeat;
background-size: cover;
}
}
@media screen and (max-width: 834px) {
.reasons-list__tag {
font-size: 1.899rem;
letter-spacing: 3px;
margin-bottom: 14px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__tag span {
font-size: 2.374rem;
margin-left: 8px;
left: 2px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__ttl {
font-size: 26px;
font-size: 2.6rem;
line-height: 1.6153846154;
letter-spacing: 0.9px;
margin-bottom: 16px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__ttl span {
padding-bottom: 0;
}
}
/*@media screen and (max-width: 834px) {
.reasons-list__wrap {
margin-bottom: 39px;
}
}*/
@media screen and (max-width: 834px) {
.reasons-list__wrap-img {
width: 100%;
margin-bottom: 18px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-ct {
width: 100%;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-ttl {
font-size: 22px;
font-size: 2.2rem;
line-height: 1.5454545455;
letter-spacing: 0;
margin-bottom: 14px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__item:nth-child(2) {
padding: 39px 0 44px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-tag {
font-size: 1.7rem;
letter-spacing: 3.2px;
margin: 6px 0 14px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__item:nth-child(3) {
padding: 17px 0 27px;
}
}
.reasons-list__item:nth-child(3) {
padding: 72px 0 98px;
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-desc {
max-width: 325px;
font-size: 2.6rem;
letter-spacing: 1px;
padding: 1px 0 3px;
margin: -6px 0 13px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__desc {
margin: -9px 0 17px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug {
margin-bottom: 10px;
}
}
@media screen and (max-width: 640px) {
.reasons-list__drug-item {
width: 100%;
padding: 13px 11px;
margin-bottom: 10px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug-icon {
width: 63px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug-ct {
width: calc(100% - 76px);
font-size: 14px;
font-size: 1.4rem;
line-height: 1.375;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug-ttl {
font-size: 1.7rem;
letter-spacing: -1px;
margin-bottom: 8px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__txt {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.8461538462;
}
}
/*---誤ったケア---*/
/*------blog box ---スマホの左右余白-----*/
@media screen and (max-width: 939px) {
.blogBox .blog-box01 {
max-width: 960px;
width: 95%;
margin: 0 auto;
padding: 0;
}}
/***** flexbox5 *****/
.flex_test-box5 {
background-color: transparent; /* 背景色指定 */
padding: 3px; /* 余白指定 */
display: flex; /* フレックスボックスã«ã™ã‚‹ */
justify-content:center;
text-decoration: none;
}
.flex_test-item5 {
padding: 3px;
color: #a3b77c; /* æ–‡å—色 */
margin: 3px; /* 外å´ã®ä½™ç™½ */
border-radius: 0px; /* 角丸指定 */
width: 22%; /* 幅指定 */
border: 1px solid #a3b77c;
}
.flex_test-item5:nth-child(1) {
background-color: #fff; /* 背景色指定 */
font-size: 24px
}
.flex_test-item5:nth-child(2) {
background-color: #fff; /* 背景色指定 */
font-size: 24px
}
.flex_test-item5:nth-child(3) {
background-color: #fff; /* 背景色指定 */
font-size: 24px
}
.flex_test-item5:nth-child(4) {
background-color: #fff; /* 背景色指定 */
font-size: 24px
}
.align-center-85 {
margin: 0 auto;
width: 85%
}
/*blog */
.blogBox {
/* width: 100%; */
width: 95%;
margin: 0 auto 30px auto;
padding: 0;
}
.blogBox .blog-box01 {
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.blogBox .blog-box01 h3.title01 {
margin: 30px 0 30px 0 !important;
padding: 0 !important;
border-bottom: none !important;
font-size: 24px !important;
font-weight: bold !important;
color: #000000 !important;
text-indent: 15px !important;
}
.blogBox .blog-box01 h4.title01 {
margin: 30px 0 30px 0 !important;
padding: 5px 0 !important;
border-bottom: 1px solid #8f7d4b !important;
font-size: 18px !important;
font-weight: bold !important;
color: #000000 !important;
}
.blogBox .blog-box01 h4.title01:before {
content: 'â—†';
position: relative;
top: -2px;
margin-right: 5px;
font-size: 10px;
color: #8f7d4b;
}
.blogBox .blog-box01 p.txt01 {
margin: 0 0 30px 0 !important;
padding: 0 !important;
letter-spacing: -0.05em !important;
}
.blogBox .blog-box01 .blog-img-box {
width: 100%;
margin: 0 auto 30px auto;
padding: 0;
}
.blogBox h2 {
font-size: 24px;
font-size: 32px;
color: #c9ab53;
padding: 0.51851em 0;
border-bottom: 2px solid #10326a;
/* border-top: 2px solid #10326a; */
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}
/*blog-end- */
/*------fit flow------*/
@media screen and (min-width: 560px) {
.online_flow_box {
padding: 24px 24px 0;
}
}
.online_flow_box {
border: 1px solid #ADB2C1;
padding: 24px 16px 0;
margin-bottom: 32px;
background: #F6F7F9;
}
.step {
background: #454545;
color: #fff;
padding: 8px 16px;
line-height: 1;
font-size: 16px;
margin: 0;
}
.step_name {
display: inline-block;
font-weight: 600;
font-size: 18px;
line-height: 35px;
margin: 0 0 16px;
margin-left: 4px;
}
.wrapper p {
line-height: 1.8;
margin-bottom: 24px;
}
.cap {
font-size: 0.85rem;
color: #666;
}
/*------fit flow---end---*/
/*------proce matome---end---*/
.medicine_comparison3 {
width: 100%;
margin-bottom: 32px;
table-layout: fixed;
}
.txt_L {
text-align: left !important;
}
.medicine_comparison3 th {
border: 1px solid #ADB2C1;
padding: 1em;
background: #F6F7F9;
line-height: 1.4;
vertical-align: middle;
}
.per30 {
width: 30%;
}
.medicine_comparison3 td {
border: 1px solid #ADB2C1;
padding: 1em;
line-height: 1.4;
vertical-align: middle;
text-align: left !important;
}
.bold_red {
color: #dd2525;
font-weight: 600;
}
/*------price matome---end---*/
/*------price fit-----*/
.price_list02 {
width: 100%;
margin-bottom: 32px;
border-collapse: collapse;
}
.price_list02 thead th {
padding: 1em;
border: 1px solid #ADB2C1;
background: #005EAD;
color: #fff;
}
.price_list02 tbody tr th {
border: 1px solid #ADB2C1;
padding: 1em;
background: #F6F7F9;
line-height: 1.4;
vertical-align: middle;
}
.price_list02 tbody tr td {
/* width: 50%; デフォルト */
width: 75%;
border: 1px solid #ADB2C1;
padding: 0.8em;
text-align: center;
line-height: 1.4;
vertical-align: middle;
}
/*------online alert-----*/
.step_block_2 {
background: #f7f7f7;
border: 1px solid #d3d3d3;
padding: 24px;
line-height: 1.8;
margin-bottom: 24px;
}
.step_block_2 .step_block_head {
font-weight: bold;
font-size: 1.125rem;
}
.step_block_2 ul {
list-style: inside;
margin-bottom: 0;
margin-left: 0;
margin: 0 0 0.5rem 1.5rem;
padding-inline-start: 0px !important;
}
/*section ul li {
padding: 0.5rem;
line-height: 1.6;
}*/
.step_block_2 ul li {
padding: 0.5rem;
line-height: 1.6;
}
/*------online alert----end-*/
/*------open QA-----*/
#archive_faq_list_open {
margin: 0 auto 24px;
}
#archive_faq_list_open .faq_open {
margin-bottom: 32px;
border: 1px solid #ADB2C1;
}
.question_open {
line-height: 32px;
}
.question_open {
line-height: 1.6;
padding: 16px 32px 16px 16px;
font-weight: normal;
background: #F6F7F9;
}
.question_open .quest, .answer_open .ans {
font-size: 16px;
display: inline-block;
background: #005EAD;
color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
margin-right: 5px;
vertical-align: top;
}
.question_open .quest, .answer_open .ans {
font-size: 16px;
display: inline-block;
background: #00326a;
color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
margin-right: 5px;
vertical-align: top;
}
.question_open .num, .answer_open .num {
font-size: 0.75rem;
}
.answer_open {
padding: 16px 32px 16px 16px;
border-top: 1px solid #ADB2C1;
}
.answer_open {
padding: 16px 32px 16px 16px;
border-top: 1px solid #ADB2C1;
}
.answer_open {
padding: 16px 32px 16px 16px;
border-top: 1px solid #ADB2C1;
}
/*------online meritdemerit-------*/
.medicine_comparison3 {
width: 100%;
margin-bottom: 32px;
table-layout: fixed;
border-collapse: collapse;
}
.medicine_comparison3 thead th {
background: #005EAD;
color: #fff;
/* font-size: 0.85rem; */
/* white-space: nowrap; */
border: 1px solid #ADB2C1;
padding: 1em;
line-height: 1.4;
vertical-align: middle;
}
.medicine_comparison3 td {
height: 70px;
position: 0.5rem !important;
/* font-size: 0.85rem; */
padding: .5rem;
border: 1px solid #ADB2C1;
line-height: 1.4;
vertical-align: middle;
}
.medicine_comparison3 td ul {
/* margin: 0 16px; */
margin: 0 8px;
padding-inline-start: 0px !important;
}
section ul li {
padding: 0.5rem;
line-height: 1.6;
}
/*------online meritdemerit----end-*/
/*------online dg price----*/
.plan--bg {
padding: 4.9375rem 0 2.0625rem;
}
.inner {
/* width: 43.125rem; */
margin: 0 auto;
}
.plan-item {
position: relative;
z-index: 5;
/* width: 40.625rem; */
width: 80%;
margin: 0 auto 2.625rem;
padding: 0 0 2.5rem;
border-radius: 2.5rem;
border: 1px solid #eeb1ab;
}
.plan-item-ttl {
padding: 2.3125rem 0;
background: #eeb1ab;
border-radius: 2.5rem 2.5rem 0 0;
color: #ffffff;
font-size: 2.5rem;
letter-spacing: 0.1em;
text-align: center;
}
.plan-item-plan01 {
width: 36.875rem;
margin: 2.25rem auto 2.5rem;
}
.plan-item-box {
margin: 0 1.9375rem 2.5rem 1.8125rem;
padding: 1.4375rem 0 1.0625rem;
background: #f5f5f5;
border-radius: 0.625rem;
}
.plan-item-box-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 1.25rem;
padding: 0 0 0.6875rem 1.5625rem;
border-bottom: 1px solid #ed627c;
}
.plan-item-box-ttl.diff {
margin: 0 2.5rem 0 0;
}
.plan-item-box-ttl {
/* margin: 0 4.0625rem 0 0; */
color: #333333;
font-size: 1.75rem;
/* letter-spacing: 1; */
}
.plan-item-box-price {
color: #ed627c;
font-size: 1.375rem;
letter-spacing: 0.02em;
}
.plan-item-box-price .num {
margin: 0 0.3125rem 0 0;
font-size: 4rem;
}
.kaisotai {
font-family: "kaisotai", sans-serif;
}
.plan-item-box-price .num {
margin: 0 0.3125rem 0 0;
font-size: 4rem;
}
.kaisotai {
font-family: "kaisotai", sans-serif;
}
.plan-item-box-txt {
margin: 0 0 0 1.625rem;
color: #333333;
font-size: 1.125rem;
letter-spacing: 0.1em;
line-height: 1.5;
}
/*------online dg proce----end-*/
/*------auro img site-----*/
.approach {
max-width: 960px;
/* margin-left: auto;
margin-right: auto; */
}
.approach img {
/* margin-left: auto;
margin-right: auto; */
width: 100%;
}
.approach p,.approach h2,.approach h3 {
margin: 0 ;
padding: 0;
line-height: 0;
font-size: 0;
display: block;
/* margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0; */
/* text-align: center; */
}
/*------auro img site--end---*/
/*---3つの理由---*/
.sec-reasons .inner {
display: block;
max-width: 1030px;
padding: 0 15px;
margin: 0 auto;
}
section {
position: relative;
}
.sec-reasons .inner {
display: block;
max-width: 1030px;
padding: 0 15px;
margin: 0 auto;
}
.reasons-ttl {
position: relative;
text-align: center;
color: white;
font-weight: 500;
font-size: 3rem;
padding: 39px 0 56px;
z-index: 1;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
.reasons-ttl:before {
content: "";
position: absolute;
background: #554f4d;
width: 100vw;
height: 100%;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
.reasons-ttl span {
position: relative;
display: inline-block;
font-size: 6.755rem;
line-height: 1;
padding: 0 18px;
margin-top: 16px;
letter-spacing: 9px;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
.reasons-ttl span:before {
content: "";
position: absolute;
background: url(../img/index/reasons-shape.svg) center no-repeat;
background-size: contain;
width: 100%;
height: 21px;
bottom: -20px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.reasons-ttl span small {
font-size: 4.053rem;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
.reasons-ttl span strong {
font-weight: 500;
font-size: 6.219rem;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
.reasons-list__item {
position: relative;
padding: 60px 0 82px;
z-index: 1;
}
li {
list-style: none;
}
.reasons-list__item:nth-child(odd):before {
content: "";
position: absolute;
/* background: url( https://harg.nogizaka-aga.com/wp-content/uploads/2024/06/reasons-bg-pc.png ) top no-repeat; */
background: url( https://harg.nogizaka-aga.com/wp-content/uploads/2022/03/price_bg.png ) top no-repeat;
background-size: cover;
width: 100vw;
height: 100%;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
z-index: -1;
}
.reasons-list__tag {
text-align: center;
font-weight: 500;
font-size: 2.4rem;
letter-spacing: 4px;
margin-bottom: 35px;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
color: rgb(89, 89, 89);
}
.reasons-list__tag span {
position: relative;
font-size: 3rem;
margin-left: 12px;
top: 2px;
}
/*font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
.reasons-list__ttl {
text-align: center;
font-weight: 500;
font-size: 3rem;
letter-spacing: 3.9px;
margin-bottom: 55px;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
color: rgb(89, 89, 89)!important;
}
.reasons-list__ttl span {
/* border-bottom: 1px solid #dda7b2; */
border-bottom: 1px solid #0191D8;
padding-bottom: 3px;
}
@media screen and (min-width: 641px) {
.sp-sm {
display: none !important;
}
}
.reasons-list__wrap:last-child {
margin-bottom: 0;
}
.reasons-list__wrap {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
-ms-flex-align: start;
-webkit-box-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 92px;
}
.reasons-list__wrap-img {
width: 47%;
border-radius: 10px 0 0 0;
}
.imgs {
vertical-align: middle;
max-width: 100%;
}
.reasons-list__wrap-ct {
width: 50%;
font-weight: 500;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.6666666667;
letter-spacing: 1.4px;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
color: rgb(89, 89, 89);
}
.reasons-list__wrap-ttl {
font-weight: 500;
font-size: 2.8rem;
line-height: 1.57;
letter-spacing: 1px;
margin-bottom: 12px;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
color: rgb(89, 89, 89);
}
.reasons-list__wrap-ttl span {
/* color: #b95874; */
color: #0191D8;
/* border-bottom: 1px solid #dda7b2; */
border-bottom: 1px solid #1a3d61;
}
.reasons-list__wrap-ttl p {
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
color: rgb(89, 89, 89);
}
.reasons-list__item:nth-child(2) {
padding: 74px 0 108px;
}
.reasons-list__ttl small {
display: block;
font-size: 2.4rem;
margin-bottom: 12px;
letter-spacing: 3.2px;
}
.reasons-list__wrap-tag {
display: block;
/* color: #999999; */
color: #b9a466;
font-weight: 500;
font-size: 2rem;
line-height: 1;
letter-spacing: 4px;
margin: 5px 0 15px;
}
.reasons-list__wrap--rv {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.reasons-list__item:nth-child(3) {
padding: 72px 0 98px;
}
.reasons-list__wrap-desc {
max-width: 440px;
font-weight: 500;
font-size: 3.5rem;
/* border: solid #dda7b2; */
border: solid #0191D8;
border-width: 1px 0;
margin-bottom: 20px;
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
color: rgb(89, 89, 89);
}
.reasons-list__wrap-desc small {
font-size: 2.45rem;
}
.reasons-list__desc {
text-align: center;
/* background: #d09ea8;*/
background: #0B3156;
color: white;
-webkit-box-shadow: rgba(193, 163, 171, 0.75) 0 0 12px;
box-shadow: rgba(193, 163, 171, 0.75) 0 0 12px;
font-weight: 500;
font-size: 2.2rem;
line-height: 1;
padding: 9px 10px;
margin: -22px 0 24px;
}
.reasons-list__drug {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.reasons-list__drug-item {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 48.5%;
background: white;
-webkit-box-shadow: rgba(193, 163, 171, 0.75) 0 0 12px;
/* box-shadow: rgba(193, 163, 171, 0.75) 0 0 12px;*/
box-shadow: rgba(0, 0, 255, 0.75) 0 0 12px;
padding: 24px 14px 27px;
margin-bottom: 23px;
}
.reasons-list__drug-icon {
width: 89px;
}
.reasons-list__drug-ct {
width: calc(100% - 100px);
font-weight: 500;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.6875;
padding-top: 1px;
}
.reasons-list__drug-ttl {
/* color: #b95874; */
color: #0191D8;
font-weight: 500;
font-size: 2rem;
margin-bottom: 6px;
}
.reasons-list__txt {
font-weight: 500;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.7142857143;
letter-spacing: -0.34px;
}
/*--sp--*/
@media screen and (max-width: 834px) {
.reasons-ttl {
font-size: 2.1rem;
padding: 22px 0 30px;
margin-bottom: 7px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span {
font-size: 3.955rem;
padding: 0 10px;
margin-top: 8px;
letter-spacing: 5px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span:before {
bottom: -15px;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span small {
font-size: 2.373rem;
}
}
@media screen and (max-width: 834px) {
.reasons-ttl span strong {
font-size: 3.641rem;
}
}
@media screen and (max-width: 834px) {
.reasons-list__item {
padding: 26px 0 45px;
}
}
@media screen and (max-width: 640px) {
.reasons-list__item:nth-child(odd):before {
background: url( https://harg.nogizaka-aga.com/wp-content/uploads/2022/03/price_bg.png ) top no-repeat;
background-size: cover;
}
}
@media screen and (max-width: 834px) {
.reasons-list__tag {
font-size: 1.899rem;
letter-spacing: 3px;
margin-bottom: 14px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__tag span {
font-size: 2.374rem;
margin-left: 8px;
left: 2px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__ttl {
font-size: 26px;
font-size: 2.6rem;
line-height: 1.6153846154;
letter-spacing: 0.9px;
margin-bottom: 16px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__ttl span {
padding-bottom: 0;
}
}
/*@media screen and (max-width: 834px) {
.reasons-list__wrap {
margin-bottom: 39px;
}
}*/
@media screen and (max-width: 834px) {
.reasons-list__wrap-img {
width: 100%;
margin-bottom: 18px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-ct {
width: 100%;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-ttl {
font-size: 22px;
font-size: 2.2rem;
line-height: 1.5454545455;
letter-spacing: 0;
margin-bottom: 14px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__item:nth-child(2) {
padding: 39px 0 44px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-tag {
font-size: 1.7rem;
letter-spacing: 3.2px;
margin: 6px 0 14px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__item:nth-child(3) {
padding: 17px 0 27px;
}
}
.reasons-list__item:nth-child(3) {
padding: 72px 0 98px;
}
@media screen and (max-width: 834px) {
.reasons-list__wrap-desc {
max-width: 325px;
font-size: 2.6rem;
letter-spacing: 1px;
padding: 1px 0 3px;
margin: -6px 0 13px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__desc {
margin: -9px 0 17px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug {
margin-bottom: 10px;
}
}
@media screen and (max-width: 640px) {
.reasons-list__drug-item {
width: 100%;
padding: 13px 11px;
margin-bottom: 10px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug-icon {
width: 63px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug-ct {
width: calc(100% - 76px);
font-size: 14px;
font-size: 1.4rem;
line-height: 1.375;
}
}
@media screen and (max-width: 834px) {
.reasons-list__drug-ttl {
font-size: 1.7rem;
letter-spacing: -1px;
margin-bottom: 8px;
}
}
@media screen and (max-width: 834px) {
.reasons-list__txt {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.8461538462;
}
}
ul {
padding-inline-start: 10px !important;
}
/*----3つの理由---*/
/* Grid style-----コラム--- */
.display-posts-listing.grid {
display: grid;
grid-gap: 30px;
}
.display-posts-listing.grid .title {
display: block;
}
@media (max-width: 599px) {
.display-posts-listing.grid img {
display: block;
width: 75vw;
height: auto;
}
}
@media (min-width: 600px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 2, 1fr );
}
.display-posts-listing.grid img {
display: block;
width: 47vw;
height: auto;
}
}
@media (min-width: 1024px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 4, 1fr );
}
.display-posts-listing.grid img {
display: block;
width; 20vw;
height: auto;
}
}
/* Grid style ---end*/
/*------page waku----*/
.page ul {
display: flex;
flex-wrap: wrap;
margin-left: 4px;
margin-right: 4px;
}
.page li {
border: solid 1px #000;
display: inline-block;
padding: 2px 2px;
}
.page a {
display: block;
padding: 2px 2px;
text-decoration: none;
}
/*---page----wakunashi-----*/
.pagination {
display: inline-block;
}
.pagination a {
font: 24px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
/*---枠付けるなら-----*/
border: solid 1px #000;
margin: 2px 2px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
/*--------koramu page--design-----*/
.box1 {
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
width: 100%;
}
@media screen and (max-width: 640px) {
.box1 {
width: auto;
margin: 0 auto;
padding: 30px 5%;
}
}
.box1 h2:before {
left: 0;
}
.box1 h2:before, .box1 h2:after {
position: absolute;
top: calc(50% + 18px);
width: 30px;
height: 8px;
content: '';
border-top: solid 2px #8cd1f1;
border-bottom: solid 2px #8cd1f1;
}
.box1 h2 {
text-align: center;
border-bottom: none;
display: table;
margin: 0 auto 40px;
position: relative;
width: fit-content;
width: -moz-fit-content;
display: block;
padding: 42px 46px 0;
margin: 0 auto 30px;
line-height: 1.2;
font-family: tbudgothic-std, sans-serif;
font-weight: 400;
font-size: 28px;
letter-spacing: 0.15em;
/* color: #555; */
}
@media screen and (max-width: 640px) {
.box1 h2 {
margin: 0 auto 10px;
font-size: 25px;
letter-spacing: 0.12em;
}
}
/*------blogBox スマホ 左右余白----*/
@media screen and (max-width: 939px) {
.blogBox .blog-box01 {
max-width: 960px;
width: 95%;
margin: 0 auto;
padding: 0;
}}
/*------yokohama+motomachi 下層 疾患-----*/
@media screen and (max-width: 640px) {
.box1 h3 {
margin: 0 0 20px;
padding: 8px 6px 8px 24px;
font-size: 19px;
}
}
.box1 h3 {
position: relative;
/* padding: 8px 6px 6px 24px; */
padding: 10px 8px 10px 24px;
margin: 0 0 24px;
line-height: 1.2;
font-family: tbudgothic-std, sans-serif;
font-weight: 400;
/* font-size: 21px; */
font-size: 23px;
letter-spacing: 0.1em;
color: #fff;
border-radius: 8px;
/* background-color: #38a1d2; */
}
.box1 dl {
display: block;
position: relative;
display: flex;
flex-wrap: wrap;
margin: 5px 0;
}
.box1 dt {
width: 100%;
padding: 1.5%;
background-color: #f7f7f7;
letter-spacing: 0.1em;
color: #38a1d2;
font-weight: bold;
font-size: 120%;
text-align: center;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
line-height: 1.5;
}
.box1 dd {
padding: 3%;
margin-inline-start: 0px !important;
}
/*--------koramu page--design---end--*/
/*-----記事 小目次*/
@media screen and (max-width: 750px) {
.article ul, .article ol {
/* font-size: 3.4666666667vw; */
font-size: 18px;
margin-bottom: 4vw;
padding: 4vw;
padding-left: 8vw;
width: 100%;
}
}
.article ul, .article ol {
border: 1px solid #d7dadf;
margin-bottom: 10px;
padding: 20px;
padding-left: 40px;
/* width: 440px;*/
}
.article ol li {
list-style-type: decimal;
}
.container2 {
width: 100%;
margin: -160px auto 0;
}
@media only screen and (max-width: 768px) {
.container2 {
width: 100%;
margin: -80px auto 0;
}
}
/*------review-------*/
.review {
background-color: #99ffcc;
padding-bottom: 80px;
padding-top: 70px;
}
@media screen and (max-width: 750px) {
.review {
padding-bottom: 12vw;
padding-top: 9.3333333333vw;
}
}
@media screen and (max-width: 1100px) {
.review_contents {
gap: 15px;
}
}
.review_contents {
display: grid;
gap: 25px;
grid-template-columns: repeat(3, 1fr);
max-width: 1160px;
padding: 0 30px;
width: 100%;
}
@media screen and (max-width: 750px) {
.review_contents {
gap: 3.3333333333vw;
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 1100px) {
.review_item {
padding: 35px 20px;
}
}
.review_item {
background-color: #fafafa;
border: 1px solid #bcbcbc;
border-radius: 14px;
color: #000;
padding: 35px;
box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24) !important;
}
@media screen and (max-width: 750px) {
.single-shop .review_item {
border-radius: 1.8666666667vw;
padding: 6.6666666667vw 5.3333333333vw;
}
}
.review_icon {
background-color: #ec6941;
border-radius: 50%;
color: #fff;
display: grid;
font-size: 3.4rem;
height: 60px;
line-height: 1;
margin: 0 auto 10px;
place-items: center;
width: 60px;
}
@media screen and (max-width: 750px) {
.review_icon {
font-size: 8.8vw;
height: 15.6vw;
margin-bottom: 4vw;
width: 15.6vw;
}
}
.review_name {
font-size: 2.2rem;
margin-bottom: 10px;
text-align: center;
}
@media screen and (max-width: 750px) {
.review_name {
font-size: 4.5333333333vw;
margin-bottom: 1.3333333333vw;
}
}
.review_star {
color: #ffc64a;
font-size: 2.2rem;
letter-spacing: calc((40 / 1000)* 1em);
margin-bottom: 20px;
text-align: center;
}
@media screen and (max-width: 750px) {
.review_star {
font-size: 4.5333333333vw;
margin-bottom: 6.6666666667vw;
}
}
.review_txt {
letter-spacing: -1px;
line-height: calc(26 / 16);
}
@media screen and (max-width: 750px) {
.review_txt {
font-size: 3.4666666667vw;
letter-spacing: 0;
}
}
/*------review1-------*/
/*---aga-tko.com-----Why-ninki-----*/
.Why {
padding-top: 112px;
padding-bottom: 38px;
max-width: 1125px;
width: 100%;
margin: 0 auto;
/* padding: 100px 50px; */
padding: 30px 25px;
/* background: #00326a; */
background: #eaf8ff;
}
/*.Why {
padding: 90px 0;
background-image: url( https://aga-tko.com/wp-content/uploads/2024/06/bg01-scaled.jpg) ;
background-size: cover;
background-repeat: no-repeat;
}*/
.Why .container {
margin: 0 auto;
padding: 30px 0 0 0;
}
@media (min-width: 992px) {
.Why .container {
max-width: 960px;
}
}
/*@media (min-width: 768px) {
.Why .container {
max-width: 720px;
}
}
@media (min-width: 576px) {
.Why .container {
max-width: 540px;
}
}*/
.Why h2, .Why h3 {
line-height: 1.3;
color: #00326a!important;
}
}
.Why .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
/*@media (min-width: 992px) {
.col-lg-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}*/
.font_big1 {
font-size: 38px;
}
.min {
font-family: "ヒラギノ明朝 ProN W3", HiraMinProN-W3, HG明朝L, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.text-white {
color: #fff !important;
}
.text-center {
text-align: center !important;
}
/*@media (min-width: 992px) {
.mb-lg-5, .my-lg-5 {
margin-bottom: 3rem !important;
}
}*/
.mb-3, .my-3 {
margin-bottom: 1rem !important;
}
.font_big2 {
font-size: 50px;
}
.wh_border {
border-bottom: 1px solid #fff;
}
.font_big2 {
font-size: 50px;
}
.wh_border {
border-bottom: 1px solid #fff;
}
.Why .nom span {
font-size: 40px;
}
.font_big1 {
font-size: 38px;
}
@media (max-width: 992px) {
.font_big1 {
font-size: 24px;
}
}
.blue_color {
color: #00326a;
}
/*@media (min-width: 992px) {
.mb-lg-4, .my-lg-4 {
margin-bottom: 1.5rem !important;
}
}
@media (min-width: 992px) {
.mb-lg-4, .my-lg-4 {
margin-bottom: 1.5rem !important;
}
}
@media (min-width: 992px) {
.mb-lg-4, .my-lg-4 {
margin-bottom: 1.5rem !important;
}
}*/
/*@media (min-width: 992px) {
.pt-lg-0, .py-lg-0 {
padding-top: 0 !important;
}
}*/
span.marker {
background: #f4eed6;
padding: 0 3px;
}
.bg-white {
background-color: #fff !important;
}
@media (min-width: 992px) {
.col-lg-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
img {
max-width: 100%;
height: auto;
}
img {
vertical-align: bottom;
}
.Why .bg-white {
/* padding: 30px 50px 40px; */
padding: 25px 25px 25px;
}
/*@media (min-width: 992px) {
.mb-lg-5, .my-lg-5 {
margin-bottom: 3rem !important;
}
}*/
.mb-3, .my-3 {
margin-bottom: 1rem !important;
}
.bg-white {
background-color: #fff !important;
border: 2px solid #00326a;
}
.bg-black {
color: rgb(89, 89, 89);
background-color: #fff !important;
border: 2px solid #00326a;
}
/*@media (min-width: 992px) {
.col-lg-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}*/
/*.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}*/
@media (max-width: 992px) {
.Why .bg-white .col-lg-6 img {
margin-left: auto;
margin-right: auto;
display: table;
}
}
.col-lg-6 {
margin-left: auto;
margin-right: auto;
}
span.marker2 {
background: #91895c;
padding: 0 3px;
color: #fff !important;
}
/*--aga-tko.com ---Why---end---*/
/*----yayaku flex-----*/
@media (min-width: 500px) {
.row1 {
display: flex;
justify-content: space-between;
}
.col-lg-61 {
width: calc(100% - 311px)
margin-top: 10px;
margin-left: 10px;
}}
/*----yayaku flex--end---*/
/* Grid style-----コラム--- */
.display-posts-listing.grid {
display: grid;
grid-gap: 30px;
}
.display-posts-listing.grid .title {
display: block;
}
@media (max-width: 599px) {
.display-posts-listing.grid img {
display: block;
width: 75vw;
height: auto;
}
}
@media (min-width: 600px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 2, 1fr );
}
.display-posts-listing.grid img {
display: block;
width: 47vw;
height: auto;
}
}
@media (min-width: 1024px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 4, 1fr );
}
.display-posts-listing.grid img {
display: block;
width; 20vw;
height: auto;
}
}
/* Grid style ---end*/
/*------------------------------------------------------------
index highBridge
------------------------------------------------------------*/
/* - - mainVisual - -*/
.mainVisual {
/* margin-bottom: 2.4rem; */
/* margin-top: calc(11.5rem - var(--wp-admin--admin-bar--height)); */
/* margin-top: 11.5rem; */
padding: 3rem 2rem 0.8rem;
position: relative;
color: #353535;
overflow: hidden;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_img.jpg) no-repeat center top / auto 100% ,#dde9f4;
}
.mainVisual .praise {
width: 20rem;
aspect-ratio: 1;
padding: 3.5rem 0;
position: absolute;
right: calc(50% - 1.6rem);
top: 1.6rem;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_bg01.png) no-repeat center top / 100%;
}
.mainVisual .praise .text {
color: #FFF;
font-size: 1.8rem;
line-height: 1.3;
}
.mainVisual .praise .star {
color: #eae860;
font-size: 2.092rem;
letter-spacing: 0.15rem;
margin-top: 0.35rem;
}
.mainVisual .praise .num {
/* margin: -1.3rem 0 -0.9rem; */
margin: 0rem 0 -0.9rem;
color: #eae860;
font-size: 3.693rem;
font-style: italic;
font-weight: bold;
}
.mainVisual .textBox01 {
margin-left: 50%;
}
.mainVisual p {
margin-bottom: 0;
}
.mainVisual .textBox01 .inner {
margin-left: 3.2rem;
max-width: 46.5rem;
}
.mainVisual .imgBox {
display: flex;
justify-content: space-between;
}
.mainVisual .text01 .color {
margin: 0 -0.2rem 0;
padding: 0 0.4rem;
width: fit-content;
display: block;
color: #1b8bff;
font-size: 3rem;
font-weight: bold;
border-bottom: 0.1rem solid currentColor;
line-height: 1.25;
}
.mainVisual .text01 .shippori {
display: block;
font-size: 3.6rem;
font-weight: bold;
letter-spacing: -0.3rem;
line-height: 1.4;
}
.mainVisual .photo {
margin: -1rem -1rem 0 0;
width: 16.8rem;
}
.mainVisual .head01 {
margin-bottom: 1.1rem;
color: #c49133;
font-size: 5.6rem;
line-height: 1.25;
letter-spacing: -0.5rem;
font-weight: 600;
}
.mainVisual .head01 small {
font-size: 4.8rem;
color: #353535;
}
.mainVisual .head02 {
/* margin: 0 0 -2.5rem -0.2rem; */
margin: 0 0 3.0rem -0.2rem;
padding: 0rem 1rem 0.8rem;
color: #FFF;
font-weight: 600;
font-size: 3.9rem;
background-color: #353535;
letter-spacing: -0.55rem;
line-height: 0.9;
}
.mainVisual .head03 {
/* margin: 0 -1rem -0.4rem 0; */
/* margin: 0 2rem -0.4rem 0; */
margin-top: 4rem;
margin-bottom: 5rem;
width:fit-content;
font-size: 11rem;
/* letter-spacing: 0.7rem; */
/* color: #353535; */
color: #62a2f8;
-webkit-background-clip:text;
/* -webkit-text-fill-color:transparent;
background-image: linear-gradient(171deg, #353535 0%, #353535 64%, #62a2f8 65%,#62a2f8 100%); */
}
.mainVisual .features {
margin-bottom: 0.8rem;
display: flex;
gap: 0.5rem;
}
.mainVisual .features li {
width: 15rem;
aspect-ratio: 1;
padding: 2.8rem 0 1rem;
color: #FFF;
text-align: center;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.1;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_bg02.png) no-repeat center top / 100%;
}
.mainVisual .features .bigText {
display: block;
color: #e5cd7b;
font-size: 2.521rem;
font-family: "Shippori Mincho B1", serif;
}
.mainVisual .features .fs01 {
font-size: 4rem;
}
.mainVisual .features .fs02 {
font-size: 2.8rem;
}
.mainVisual .features .fs03 {
display: block;
margin-top: 0.5rem;
font-size: 2.8rem;
transform: scaleY(1.1);
}
.mainVisual .features .fs04 {
font-size: 1.8rem;
}
.mainVisual .features sup {
font-size: 1rem;
vertical-align: 1.5rem;
}
.mainVisual .note {
margin: 0 1.5rem 0;
color: #353535;
font-size: 1.1rem;
text-align: right;
}
.mainVisual .textBox02 {
position: absolute;
right: calc(50% + 4rem);
bottom: 4.7rem;
width: 50.1rem;
}
.mainVisual .text02 {
margin: 0 3rem 0 0;
font-size: 2.8rem;
color: #fff;
letter-spacing: -0.2rem;
line-height: 1.3;
text-align: center;
background: -webkit-linear-gradient( 0deg, rgb(203,155,52) 0%, rgb(221,182,99) 40%, rgb(209,164,75) 63%, rgb(196,145,51) 89%);
}
.mainVisual .text03 {
margin: 0.6rem 0 0 3rem;
padding: 1.2rem 0.1rem 0.7rem;
font-weight: bold;
font-size: 2.6rem;
line-height: 4rem;
text-align: center;
letter-spacing: -0.2rem;
background-color: #FFF;
}
.mainVisual .text03 .subSpan {
vertical-align: 0.18rem;
}
.mainVisual .text03 .dotTxt {
vertical-align: 0.1rem;
color: #c49133;
display: inline-block;
position: relative;
height: 4rem;
vertical-align: 0.3rem;
}
.mainVisual .text03 .dotTxt.big {
font-size: 3.2rem;
}
.mainVisual .text03 .dotTxt::before {
position: absolute;
left: 0;
top: -1.3rem;
content: '・';
font-size: 2.6rem;
line-height: 10px;
width: 100%;
text-align: center;
}
.mainVisual .text03 .dotTxt.big::before {
top: -1rem;
}
.mainVisual .text03 .fs {
font-size: 3.6rem;
}
.mainVisual .text03 .red {
vertical-align: -2px;
margin-left: 0.2rem;
color: #f31a43;
font-size: 4rem;
letter-spacing: -0.1rem;
}
.mainVisual .text03 .red .num {
font-size: 6rem;
}
@media all and (max-width: 896px) {
.mainVisual {
margin-bottom: 1.4rem;
padding: 0;
margin-top: calc(5.05rem - var(--wp-admin--admin-bar--height));
margin-top: 5.05rem;
background: none;
}
.mainVisual .imgBox {
margin-bottom: 1.8rem;
position: relative;
}
.mainVisual .photo {
}
.mainVisual .textBox01 {
padding: 3.2rem 2rem 0.7rem;
margin: 0 0 2.6rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_img_sp.jpg) no-repeat center bottom / cover;
}
.mainVisual .textBox01 .inner {
max-width: inherit;
margin-left: 0;
}
.mainVisual .text01 .color {
position: relative;
font-size: 1.86rem;
}
.mainVisual .text01 .color .photo {
position: absolute;
top: -2.3rem;
width: 5rem;
height: 5rem;
border-radius: 100%;
left: calc(100%);
margin: 0;
}
.mainVisual .text01 .color .photo img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
}
.mainVisual .text01 .shippori {
font-size: 2.238rem;
letter-spacing: -0.2rem;
}
.mainVisual .praise {
padding: 2.1rem 1rem;
right: 1rem;
width: 12.5rem;
top: 1.3rem;
}
.mainVisual .praise .text {
font-size: 1.136rem;
}
.mainVisual .praise .star {
/* margin-bottom: 0.5rem; */
font-size: 1.32rem;
letter-spacing: 0;
}
.mainVisual .praise .num {
margin-bottom: -0.4rem;
font-size: 2.33rem;
}
.mainVisual .head01 {
margin-bottom: 0.6rem;
font-size: 3rem;
letter-spacing: -0.25rem;
}
.mainVisual .head01 small {
color: #353535;
font-size: 2.5rem;
}
.mainVisual .head02 {
margin-bottom: -1.5rem;
padding: 0 1rem 0.5rem 0.5rem;
width: fit-content;
font-size: 2.42rem;
letter-spacing: -0.35rem;
}
.mainVisual .head03 {
margin-bottom: 71vw;
font-size: 6.83rem;
/* letter-spacing: 0.5rem; */
}
.mainVisual .features {
margin-bottom: 0.5rem;
justify-content: center;
gap: 0.3rem;
}
.mainVisual .features li {
padding: 1.7rem 0 1rem;
width: 10rem;
font-size: 1.3rem;
}
.mainVisual .textBox02 {
position: static;
}
.mainVisual .features .bigText {
font-size: 1.67rem;
}
.mainVisual .features .fs01 {
font-size: 2.79rem;
}
.mainVisual .features .spFs01 {
font-size: 2.65rem;
}
.mainVisual .features .fs02 {
font-size: 1.86rem;
}
.mainVisual .features .fs03 {
font-size: 1.86rem;
}
.mainVisual .features .fs04 {
font-size: 1.195rem;
}
.mainVisual .features sup {
font-size: 0.6rem;
vertical-align: 1.1rem;
}
.mainVisual .note {
font-size: 0.65rem;
margin: 0;
}
.mainVisual .textBox02 {
margin: 0 1.7rem;
width: auto;
}
.mainVisual .text02 {
margin: 0;
font-size: 1.9rem;
}
.mainVisual .text03 {
padding: 0.6rem 0.1rem 0.5rem;
margin: 0;
font-size: 1.85rem;
}
.mainVisual .text03 .dotTxt.big {
font-size: 2.278rem;
}
.mainVisual .text03 .fs {
font-size: 2.56rem;
}
.mainVisual .text03 .red .num {
font-size: 4.271rem;
}
.mainVisual .text03 .red {
font-size: 2.847rem;
}
.mainVisual .text03 .dotTxt::before {
font-size: 1.85rem;
top: -0.5rem;
}
.mainVisual .text03 .dotTxt.big::before {
top: -0.4rem;
}
}
.shippori {
font-family: "Shippori Mincho B1", serif !important;
}
@media all and (max-width: 896px) {
.pc {
display: none !important;
}
}
.contenth {
max-width: 112rem;
margin: 0px auto;
padding: 0px 2rem;
}
media (max-width: 896px) {
.contenth {
padding: 0px 1.75rem;
}
}
/* - - headLine15 - -*/
.headLine15 {
color: #323131;
margin-bottom: 2.5rem;
font-size: 6.6rem;
line-height: 1;
letter-spacing: 0.04em;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9);
}
@media all and (max-width: 896px) {
.headLine15 {
margin-bottom: 1.3rem;
font-size: 2.9rem;
letter-spacing: 0.02em;
}
}
/* - - disease - -*/
.disease {
text-align: center;
margin-bottom: -0.2rem;
padding: 9.4rem 0 10.5rem;
position: relative;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/disease_bg.jpg) no-repeat no-repeat center bottom;
background-size: cover;
}
.disease .content {
position: relative;
}
.disease .bigPhoto {
width: 30.8rem;
position: absolute;
bottom: -8.6rem;
right: 6.2rem;
}
.diseaseImg {
margin-bottom: 3.5rem;
}
.diseaseImg img {
width: 4.4rem;
}
.disease .ttl {
font-size: 4.22rem;
color: #f7e972;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1;
width: fit-content;
margin: 0 auto 3rem;
padding: 0.5rem 2rem 1rem;
background-color: #323131;
}
.disease .txt {
margin-bottom: 0;
font-size: 3.4rem;
font-weight: 700;
color: #323131;
line-height: 1.4;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(255,255,255,0.9),0.3rem -0.3rem 0.7rem rgba(255,255,255,0.9),-0.3rem 0.3rem 0.7rem rgba(255,255,255,0.9),-0.3rem -0.3rem 0.7rem rgba(255,255,255,0.9);
}
.disease .txt .blue {
color: #4f96f5;
font-size: 4.4rem;
}
.disease .txtSpan {
font-size: 4.6rem;
color: #f31a43;
width: fit-content;
position: relative;
margin: 0.5rem auto 0;
line-height: 1.25;
padding-inline: 1.5rem;
letter-spacing: -0.1em;
display: inline-block;
border-bottom: 1px solid currentColor;
}
.disease .txtSpan:after {
width: 100%;
height: 1px;
background-color: #f31a43;
position: absolute;
bottom: -0.5rem;
left: 0;
content: "";
}
@media all and (max-width: 896px) {
.disease {
margin-bottom: 3.8rem;
padding: 5.5rem 0 5rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/disease_bg_sp.jpg);
background-position: center;
}
.diseaseImg {
margin-bottom: 1rem;
}
.diseaseImg img {
width: 3.3rem;
}
.disease .ttl {
font-size: 2.1rem;
width: auto;
margin: 0 0 4rem;
letter-spacing: -0.02em;
padding: 0.4rem 1.5rem 0.4rem;
}
.disease .txt {
font-size: 1.7rem;
text-align: left;
line-height: 1.3;
width: fit-content;
}
.disease .txt .blue {
font-size: 2.2rem;
}
.disease .txtSpan {
font-size: 2.3rem;
border: none;
}
.disease .txtSpan::after {
display: none;
border: none;
}
.disease .subTxt {
display: inline-block;
text-align: center;
}
.disease .bigPhoto {
bottom: -7.1rem;
width: 18.8rem;
right: 0rem;
}
}
@media (min-width: 897px) {
.sp {
display: none !important;
}
}
/* - - snsLinkUl - -*/
.snsLinkUl {
margin-bottom: 11.3rem;
gap: 2rem 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.snsLinkUl li {
width: 33rem;
text-align: center;
}
.snsLinkUl li .ttl {
padding: 0 1rem 0.3rem;
font-size: 2rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
width: fit-content;
margin: 0 auto 0.5rem;
position: relative;
}
.snsLinkUl li .ttl::before {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
left: 0;
bottom: 0.5rem;
transform: rotate(-30deg);
content: "";
}
.snsLinkUl li .ttl::after {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
right: 0;
bottom: 0.5rem;
transform: rotate(30deg);
content: "";
}
.snsLinkUl .tel a,
.snsLinkUl .link a {
display: flex;
justify-content: center;
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(131,180,247) 0%, rgb(136,183,246) 6%, rgb(140,185,245) 18%, rgb(119,174,247) 40%, rgb(98,162,248) 61%, rgb(143,188,249) 77%, rgb(188,214,249) 90%, rgb(129,179,246) 100%);
border-radius: 6rem;
border: 3px solid #fff;
min-height: 8rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
align-items: center;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8);
}
.snsLinkUl .link span {
display: inline-block;
padding-left: 5.2rem;
background: url(img/common/img04.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl .link02 a {
position: relative;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8);
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(77,202,75) 0%, rgb(96,215,77) 6%, rgb(114,227,79) 18%, rgb(72,206,48) 40%, rgb(30,185,17) 61%, rgb(92,210,74) 77%, rgb(153,235,131) 89%, rgb(12,195,0) 100%);
}
.snsLinkUl .link02 span {
background-image: url(img/common/img05.png);
}
.snsLinkUl .tel a {
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background: #F39E19;
font-size: 1.35rem;
color: #262626;
letter-spacing: 0;
font-weight: 700;
text-shadow: none;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
}
.snsLinkUl .tel .num {
display: block;
line-height: 1;
font-size: 3.6rem;
text-align: left;
font-weight: 400;
letter-spacing: 0.03em;
color: #fff;
}
.snsLinkUl .tel .telSpan {
padding-left: 5.5rem;
background: url(img/common/img06.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.snsLinkUl {
margin-bottom: 5.4rem;
display: block;
}
.snsLinkUl li {
width: auto;
margin: 0 auto 1rem;
max-width: 30.2rem;
}
.snsLinkUl li:last-child {
margin-bottom: 0;
}
.snsLinkUl li .ttl {
font-size: 1.5rem;
margin-bottom: 0.2rem;
}
.snsLinkUl .tel a, .snsLinkUl .link a {
min-height: 6rem;
border-width: 2px;
font-size: 2.2rem;
box-shadow: 0rem 0.1rem 0.4rem 0.063rem rgba(0, 0, 0, 0.17);
}
.snsLinkUl .link span {
padding-left: 4.5rem;
background-size: 3.8rem auto;
}
.snsLinkUl .tel a {
font-size: 1.15rem;
}
.snsLinkUl .tel .num {
font-size: 3.1rem;
}
.snsLinkUl .tel .telSpan {
padding-left: 4.5rem;
background-size: 4rem auto;
}
}
/* - - campaign - -*/
.bannerarea {
display: flex;
justify-content: space-between;
align-items: center;
}
.campaign {
margin-bottom: 10rem;
}
.campaign .headLine06 {
letter-spacing: -0.3rem;
}
.campaign .comEn {
margin-bottom: 4.3rem;
}
.campaign .slideBox {
padding-left: 1.3rem;
position: relative;
}
.campaign .slideBox .list .slick-slide {
padding: 0 2.05rem;
}
.campaign .slideBox .list a {
width: 52rem;
display: block;
color: #353535;
position: relative !important;
}
.campaign .slideBox .list a > img {
width: 100%;
}
.campaign .slideBox .list a:hover {
opacity: 0.5;
}
.campaign .slick-slide img {
display: inline-block;
}
.campaign .slideBox .list a::before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: '';
border: 0.5rem solid #b2ad9d;
}
.campaign .slick-dots {
position: absolute;
left: 0;
bottom: -3.5rem;
width: 100%;
display: flex;
justify-content: center;
gap: 1.6rem;
}
.campaign .slick-dots li {
width: 1.3rem;
height: 1.3rem;
overflow: hidden;
cursor: pointer;
background-color: #bcbcbc;
border-radius: 2rem;
}
.campaign .slick-dots .slick-active {
background-color: #353535;
}
.campaign .slick-dots button {
cursor: pointer;
opacity: 0;
}
.campaign .banner01 .ttl {
padding: 0 1rem 1.5rem;
width: 33.8rem;
position: absolute;
left: 9rem;
top: 3.5rem;
color: #FFF;
text-align: center;
font-size: 2rem;
font-weight: bold;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campain_bg01.png) no-repeat center top;
letter-spacing: -0.05rem;
}
.campaign .banner01 .text {
width: 100%;
position: absolute;
left: 0;
top: 7.2rem;
color: #353535;
font-size: 2.6rem;
font-weight: bold;
letter-spacing: -0.3rem;
text-align: center;
text-shadow: 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),
0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),
0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9);
}
.campaign .banner01 .text .big {
display: block;
margin-top: -1.5rem;
color: #86753b;
font-size: 4.6rem;
line-height: 1;
letter-spacing: 0.1rem;
}
.campaign .banner01 .text .red {
color: #f31a43;
}
.campaign .banner01 .text .num {
font-size: 6rem;
}
.campaign .banner02 .text {
position: absolute;
left: 11.5rem;
top: 3.5rem;
font-size: 2.6rem;
font-weight: bold;
line-height: 1;
text-shadow: 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9), 0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9), 0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9);
}
.campaign .banner02 .text .fs {
margin: 0.2rem 0 0.6rem;
display: block;
color: #86753b;
font-size: 3.6rem;
letter-spacing: -0.6rem;
}
.campaign .banner02 .text .num {
color: #f31a43;
font-size: 5rem;
}
.campaign .banner02 .text .num small {
font-size: 4rem;
}
.campaign .banner02 .imgText {
padding: 2.5rem 0 0;
width: 14.8rem;
aspect-ratio: 148/112;
position: absolute;
right: 7.6rem;
top: 6.1rem;
color: #FFF;
font-weight: bold;
font-size: 1.6rem;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campaign_bg02.png) no-repeat center top / 100%;
}
.campaign .banner02 .imgText > span {
margin: -0.2rem 0 0.7rem;
display: block;
color: #e5cd7b;
font-size: 1.764rem;
line-height: 1;
}
.campaign .banner02 .imgText span .num {
font-size: 3rem;
letter-spacing: -0.2rem;
}
.campaign .banner03 .text01 {
padding: 0.2rem 0 0 0.3rem;
width: 14.2rem;
aspect-ratio: 1;
position: absolute;
left: 2.3rem;
top: 2.6rem;
color: #763c04;
font-size: 2.141rem;
font-weight: bold;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campaign_bg03.png) no-repeat center top / 100%;
}
.campaign .banner03 .text01 .big {
margin-bottom: -0.6rem;
display: block;
color: #b1843a;
font-size: 3.426rem;
}
.campaign .banner03 .textBox {
position: absolute;
left: 19rem;
right: 7.5rem;
top: 2.6rem;
text-align: center;
font-size: 1.6rem;
}
.campaign .banner03 .text02 {
margin-bottom: 1rem;
padding: 0rem 0 0.5rem;
color: #FFF;
font-size: 2.2rem;
font-weight: bold;
line-height: 1;
font-size: 2.2rem;
background: linear-gradient(90deg,rgba(31, 53, 150,0) 0%,#1f3596 20%,#1f3596 50%,#1f3596 80%,rgba(31, 53, 150,0) 100%);
}
.campaign .banner03 .text03 {
margin-bottom: -1.2rem;
color: #86753b;
font-size: 3.6rem;
font-weight: bold;
line-height: 1;
letter-spacing: -0.1rem;
margin-top: 0;
}
.campaign .banner03 .text03 .sml {
margin-top: 0.8rem;
display: block;
color: #353535;
font-size: 1.6rem;
font-weight: normal;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
letter-spacing: 0;
}
.campaign .banner03 .text04 {
font-size: 2.241rem;
font-weight: bold;
letter-spacing: -0.1rem;
margin-bottom: 0;
margin-top: 0;
}
.campaign .banner03 .text04 .line {
font-size: 2.586rem;
border-bottom: 0.1rem solid #0f268e;
}
.campaign .banner03 .text04 .num {
font-size: 4.31rem;
}
.campaign .banner03 .text04 .red {
color: #f31a43;
}
.campaign .slideBox .list li > img {
width: 100%;
}
.campaign .slideBox .camdiv,
.campaign .slideBox .camp {
display: block;
}
@media all and (max-width: 896px) {
.campaign {
margin-bottom: 4.5rem;
}
.campaign .headLine06 {
letter-spacing: -0.1rem;
}
.campaign .comEn {
margin-bottom: 1.3rem;
}
.campaign .slideBox {
padding: 0 1.7rem;
}
.campaign .slideBox .list li {
margin-bottom: 0.9rem;
}
.campaign .slideBox .list a {
width: 100%;
}
.campaign .slideBox .list a::before {
border-width: 0.3rem;
}
.campaign .banner01 .ttl {
padding: 0 0 3vw;
left: 17%;
width: 65%;
top: 19%;
font-size: 3.4vw;
letter-spacing: 0;
background-size: 100%;
}
.campaign .banner01 .text {
top: 13vw;
font-size: 4.5vw;
}
.campaign .banner01 .text .big {
margin-top: -2.8vw;
font-size: 8vw;
}
.campaign .banner01 .text .num {
font-size: 10.4vw;
}
.campaign .banner02 .text {
left: 20vw;
top: 6vw;
font-size: 4.52vw;
z-index: 2;
}
.campaign .banner02 .text .fs {
margin: 0.5vw 0 1vw;
font-size: 6.26vw;
letter-spacing: -0.4rem;
}
.campaign .banner02 .text .num {
font-size: 8.7vw;
}
.campaign .banner02 .text .num small {
font-size: 6.96vw;
}
.campaign .banner02 .imgText {
padding: 4.5vw 0 0;
font-size: 2.78vw;
width: 25.4vw;
right: 13.5vw;
top: 11vw;
}
.campaign .banner02 .imgText > span {
margin: -0.5vw 0 0;
font-size: 3vw;
}
.campaign .banner02 .imgText span .num {
font-size: 5.2vw;
}
.campaign .banner02 .imgText img {
margin: 0.2vw auto 0;
display: block;
width: 84%;
}
.campaign .banner03 .text01 {
padding-top: 1.5vw;
width: 25vw;
left: 4vw;
top: 4.5vw;
font-size: 3.73vw;
}
.campaign .banner03 .text01 .big {
margin-bottom: 0;
font-size: 5.96vw;
line-height: 1.2;
}
.campaign .banner03 .textBox {
left: 32vw;
right: 10vw;
top: 4.5vw;
}
.campaign .banner03 .text02 {
padding: 0.2rem 0 0.3rem;
margin: 0 3vw 1.5vw;
font-size: 3.82vw;
}
.campaign .banner03 .text03 {
margin-bottom: -2vw;
font-size: 6.26vw;
margin-top: 0;
}
.campaign .banner03 .text03 .sml {
margin-top: 1vw;
font-size: 3.132vw;
}
.campaign .banner03 .text04 {
font-size: 3.9vw;
margin-bottom: 0;
margin-top: 0;
}
.campaign .banner03 .text04 .line {
font-size: 4.5vw;
}
.campaign .banner03 .text04 .num {
font-size: 7.5vw;
}
}
.headLine06 {
text-align: center;
font-size: 4rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
@media (max-width: 896px) {
.headLine06 {
font-size: 2.2rem;
letter-spacing: 0;
}
}
@media (max-width: 896px) {
.comEn {
margin-bottom: 3.1rem;
font-size: 1.7rem;
}
}
.comEn {
margin-bottom: 7.4rem;
display: block;
font-size: 3rem;
color: #99bff1;
font-weight: 400;
text-align: center;
}
.garamond {
font-family: "EB Garamond", serif;
}
.slideBox .list {
margin: 0 auto 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* text-align: center; */
gap: 0.9rem;
}
.banner03 {
margin: auto;
}
.banner01 {
margin-bottom: 0.9rem;
margin: auto;
}
.banner02 {
margin-bottom: 0.9rem;
margin: auto;
}
/* - - anxiety - -*/
.anxiety {
padding: 9rem 2rem 9.5rem;
color: #FFF;
position: relative;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg.png) no-repeat center center / cover;
}
.anxiety::before {
width: 25.6rem;
height: 6.4rem;
z-index: 1;
background: rgb(18, 18, 18);
clip-path: polygon(3.8rem 0, calc(100% - 3.8rem) 0,calc(100% - 3.8rem) 3rem, 100% 3rem, 13.1rem 100%, 0 3rem , 3.8rem 3rem);
position: absolute;
top: 100%;
left: 50%;
content: "";
transform: translateX(-50%);
}
.anxiety::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25rem;
content: '';
background: linear-gradient(00deg,#121212 0%,#121212 50%,rgba(0,0,0,0) 100%);
z-index: 2;
}
.anxiety .headLine06 {
margin-bottom: 3.7rem;
color: #FFF;
font-size: 5rem;
letter-spacing: -0.3rem;
}
.anxiety .headLine06 .dot {
position: relative;
}
.anxiety .headLine06 .dot::before {
position: absolute;
left: 0;
top: -1.3rem;
content: '・';
line-height: 10px;
width: 100%;
text-align: center;
}
.anxiety .wrap {
margin: 0 auto;
width: 48.4rem;
position: relative;
}
.anxiety .photo {
position: relative;
z-index: 1;
}
.anxiety .photo .pos {
position: absolute;
right: 12rem;
top: 0;
}
.anxiety .textList li {
padding: 4.8rem 2rem 1rem;
width: 31rem;
min-height: 22.8rem;
position: absolute;
z-index: 3;
font-size: 2.6rem;
text-align: center;
line-height: 1.38;
letter-spacing: 0.2rem;
z-index: 1;
}
.anxiety .textList .color {
color: #f7e972;
}
.anxiety .textList .item01 {
right: calc(100% - 13rem);
top: -2.2rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg01.png) no-repeat center top / 100%;
}
.anxiety .textList .item02 {
padding-top: 6.5rem;
right: 100%;
top: 12.5rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg02.png) no-repeat center top / 100%;
}
.anxiety .textList .item03 {
padding: 4.2rem 2rem 1rem 3rem;
width: 32.4rem;
left: calc(100% - 10.3rem);
top: -2.3rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg03.png) no-repeat center top / 100%;
}
.anxiety .textList .item04 {
padding: 4rem 1rem 1rem 4rem;
width: 34rem;
left: calc(100% - 11rem);
top: 16.9rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg04.png) no-repeat center top / 100%;
}
.anxiety .text {
position: absolute;
left: -10rem;
right: -10rem;
bottom: 7.6rem;
text-align: center;
z-index: 3;
font-size: 4.4rem;
letter-spacing: -0.3rem;
font-weight: 600;
text-shadow: 0.1rem 0.1rem 0.8rem rgba(0, 0, 0, 0.8);
}
.anxiety .text span {
color: #f7e972;
font-size: 8rem;
}
.anxiety .pop li {
position: absolute;
z-index: 3;
color: #595757;
font-size: 2.6rem;
text-align: center;
line-height: 1.15;
}
.anxiety .pop01 {
padding: 4rem 1rem 0;
width: 24.6rem;
aspect-ratio: 246/132;
right: calc(50% + 5rem);
bottom: -7rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg05.png) no-repeat center top / 100%;
}
.anxiety .pop02 {
padding: 4.5rem 1rem 0;
width: 29.6rem;
aspect-ratio: 296/130;
left: calc(50% - 3.4rem);
bottom: -4.7rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg06.png) no-repeat center top / 100%;
}
@media all and (max-width: 896px) {
.anxiety {
padding: 4.8rem 0 9.5rem;
}
.anxiety::before {
width: 13rem;
height: 3.2rem;
clip-path: polygon(1.8rem 0, calc(100% - 2.2rem) 0,calc(100% - 2.2rem) 1.5rem, 100% 1.5rem, 50% 100%, 0 1.5rem , 1.8rem 1.5rem);
}
.anxiety::after {
height: 18rem;
background: linear-gradient(00deg,#121212 0%,#121212 70%,rgba(0,0,0,0) 100%);
}
.anxiety .headLine06 {
margin-bottom: 4.5rem;
font-size: 2.98rem;
line-height: 1.36;
letter-spacing: 0;
}
.anxiety .headLine06 .dot::before {
top: -0.9rem;
}
.anxiety .wrap {
margin: 0 auto;
padding-left: 3rem;
width: 34rem;
box-sizing: border-box;
}
.anxiety .photo {
margin: 0 auto;
width: 23.8rem;
}
.anxiety .photo .pos {
width: 4.8rem;
top: -2.8rem;
right: 8.6rem;
}
.anxiety .textList li {
min-height: 15rem;
padding: 2.7rem 1rem;
width: 18.4rem;
font-size: 1.53rem;
letter-spacing: 0;
}
.anxiety .textList .item01 {
top: -4.1rem;
right: calc(100% - 15rem);
}
.anxiety .textList .item02 {
top: 8.9rem;
right: calc(100% - 14rem);
padding-top: 3.8rem;
}
.anxiety .textList .item03 {
width: 16.5rem;
left: calc(100% - 13.5rem);
top: -1.8rem;
padding: 2.2rem 2rem 1rem 2rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg03_sp.png);
}
.anxiety .textList .item04 {
padding: 2rem 2rem 1rem 2rem;
left: calc(100% - 11.8rem);
top: 9.1rem;
width: 15.4rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg04_sp.png);
z-index: 4;
}
.anxiety .text {
font-size: 2.2rem;
bottom: 1.1rem;
}
.anxiety .text span {
font-size: 4rem;
}
.anxiety .pop li {
font-size: 1.43rem;
}
.anxiety .pop .pop01 {
width: 13.5rem;
padding: 2rem 1rem 0;
right: calc(50% + 1.8rem);
bottom: -7.9rem;
}
.anxiety .pop .pop02 {
width: 16.2rem;
padding: 2.3rem 1rem 0;
left: calc(50% - 0.9rem);
bottom: -6.7rem;
}
}
/* - - message - -*/
.message {
padding-bottom: 4.5rem;
background-color: #E5EFFF;
}
.message .photoBox {
width: 50.2%;
margin: -4.4rem -0.1rem 0 3rem;
}
.message .photoBox2 {
width: 50.2%;
margin: -4.4rem -0.1rem 0 3rem;
order: -1;
}
.message .photoBox img {
width: 100%;
}
.message .textBox {
padding-left: 7.5rem;
flex: 1;
}
.message .headLine03 {
margin-bottom: 1.6rem;
}
.message .comLink03 {
text-align: left;
}
.message p {
margin-bottom: 3rem;
line-height: 1.76;
}
@media all and (max-width: 896px) {
.message .imgBox {
display: block;
}
.message .textBox {
padding: 0 0 2.6rem;
}
.message .photoBox {
width: auto;
margin: 0 0.8rem 0 0;
}
.message .textBox2 {
padding: 0 0 2.6rem;
}
.message .photoBox2 {
width: auto;
margin: 0 0.8rem 0 0;
}
.message {
padding: 0 3rem 4.3rem;
}
.message .headLine03 {
font-size: 1.7rem;
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
.message p {
margin-bottom: 2rem;
line-height: 1.43;
}
.message .comLink03 {
margin-bottom: 0;
text-align: center;
}
}
/* - - comEn02 - -*/
.comEn02 {
margin: -1rem 0 -0.7rem -1.2rem;
font-size: 4rem;
line-height: 1;
color: #a49972;
transform: rotate(-10deg);
display: block;
transform-origin: left top;
}
@media all and (max-width: 896px) {
.comEn02 {
margin: 0 0 -1.1rem;
font-size: 6rem;
position: relative;
top: -0.8rem;
}
}
.corinthia {
font-family: "Corinthia", cursive;
font-weight: 100!important;
margin-bottom: 0.9rem;
}
.flexB {
justify-content: space-between;
}
.flex, .flexA, .flexB, .flexC {
display: flex;
flex-wrap: wrap;
}
.comLink03 a:hover {
color: #62a2f8;
}
.comLink03.big a {
min-height: 6.8rem;
font-size: 1.8rem;
background-position: right 3.5rem center;
}
.comLink03 a {
font-weight: 600;
color: #595757;
margin: 0 auto;
min-width: 32rem;
padding: 0 6.5rem 0 3.5rem;
display: inline-flex;
align-items: center;
min-height: 5.4rem;
font-size: 1.6rem;
border-radius: 6rem;
position: relative;
background: #fff;
border: 1px solid rgb(185, 212, 248);
}
/* - - comNum - -*/
.comNum {
position: absolute;
top: -0.8rem;
left: 2.5rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
z-index: 1;
font-family: "Shippori Mincho B1", serif;
}
.comNum .subSpan {
width: 4.4rem;
height: 5.8rem;
padding: 0 0 0.8rem 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #a49972;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.comNum::after {
content: "";
position: absolute;
top: 0;
z-index: -1;
right: -0.6rem;
border-bottom: 0.7rem solid #7e724e;
border-right: 0.7rem solid transparent;
}
@media all and (max-width: 896px) {
.comNum {
font-size: 1.34rem;
padding-bottom: 0.5rem;
top: -0.5rem;
left: 1.6rem;
}
.comNum .subSpan {
width: 2.9rem;
height: 3.8rem;
}
.comNum::after {
right: -0.4rem;
border-width: 0.5rem;
}
}
/* - - featureTop - -*/
.featureTop {
padding-bottom: 8rem;
margin-top: 0;
background-color: #F2F7FF;
}
.featureTop .comLink03 {
margin-top: 4.5rem;
}
@media all and (max-width: 896px) {
.featureTop .comLink03 {
margin-top: -0.5rem;
}
.featureTop {
padding-bottom: 4.4rem;
}
}
/* - - featureTop - end-*/
/* - - featureList - -*/
.feature {
padding: 10rem 0;
/* margin-top: 12rem; */
background-color: #fbf9f1;
}
.featureList {
margin-bottom: 3rem;
display: flex;
flex-wrap: wrap;
gap: 3.4rem 2.6rem;
}
.featureList li {
background-color: #fff;
border: 1px solid #D8D0B4;
border-radius: 1rem;
padding: 4.9rem 0.5rem 3rem;
text-align: center;
position: relative;
width: calc((100% - (2.6rem * 3 + 0.1rem)) / 4);
}
.featureList .photo {
width: 16.1rem;
height: 16.1rem;
border-radius: 100%;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient( 180deg, rgb(185,212,248) 0%, rgb(166,200,245) 62%, rgb(146,187,242) 100%);
background-position: right bottom;
}
.featureList h3 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
line-height: 1.31;
font-family: "Shippori Mincho B1", serif !important;
}
@media all and (max-width: 896px) {
.feature {
padding: 3.6rem 0;
/* margin-top: 4.2rem; */
margin-top: 0.6rem;
}
.featureList {
margin-bottom: 2.4rem;
gap: 1.6rem 1.3rem;
}
.featureList li {
padding: 1.5rem 1rem 1.2rem;
border-radius: 0.8rem;
width: calc((100% - 1.3rem) / 2);
}
.featureList li:last-child {
margin-bottom: 0;
}
.featureList .photo img {
width: 9.5rem;
}
.featureList h3 {
font-size: 1.5rem;
line-height: 1.33;
}
.featureList .photo {
margin: 0 auto 0.7rem;
width: 9.5rem;
height: 9.5rem;
padding: 1.8rem;
}
}
/* - - featureUl - -*/
.featureUl li {
margin-bottom: 2.5rem;
padding: 1.5rem 5.5rem 3.4rem;
border-radius: 1rem;
position: relative;
border: 5px solid rgb(237, 233, 217);
background-color: #f2f0e7;
}
.featureUl li:last-child {
margin-bottom: 0;
}
.featureUl .comheading02 {
margin-inline: 3.5rem;
}
.featureUl .comNum {
font-size: 2.38rem;
top: -1.6rem;
left: 2rem;
}
.featureUl .comNum .subSpan {
width: 5.3rem;
height: 6.9rem;
}
.featureUl .comNum::after {
border-width: 1.1rem;
border-right-width: 0.8rem;
right: -0.8rem;
}
.featureUl li p {
letter-spacing: 0.02em;
color: #4b7ac6;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.featureUl li {
margin-bottom: 1.6rem;
padding: 1.4rem 2rem 2rem;
border-width: 4px;
border-radius: 0.8rem;
}
.featureUl .comheading02 {
margin-inline: 3rem 0;
}
.featureUl .comNum {
top: -1.0rem;
left: 1.4rem;
font-size: 1.5rem;
}
.featureUl .comNum .subSpan {
padding-top: 0.4rem;
width: 3.3rem;
height: 4.4rem;
}
.featureUl .comNum::after {
border-width: 0.7rem;
border-right-width: 0.6rem;
right: -0.5rem;
}
.featureUl li p {
line-height: 1.57;
}
}
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url(img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
z-index: -1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/* - - featureList -end -*/
/*-----comLink03-------*/
@media (max-width: 896px) {
.featureTop .comLink03 {
margin-top: -0.5rem;
}
}
.featureTop .comLink03 {
margin-top: 4.5rem;
}
.comLink03.big {
margin: 0;
}
.comLink03:last-child {
margin-bottom: 0;
}
@media (max-width: 896px) {
.comLink03 {
margin-bottom: 5.2rem;
}
}
.comLink03
{
/* width: 32rem; */
margin: 0 auto 5.2rem;
text-align: center;
}
.comLink03 {
/* width: 32rem; */
}
/*-----comLink03----end---*/
/* - - arrow-circle - -*/
.arrow-circle {
right: 3.5rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #62A2F8;
cursor: pointer;
transition: all 0.3s ease;
}
.arrow-circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
transform: translate(-70%, -50%) rotate(45deg);
}
@media all and (max-width: 896px) {
.arrow-circle {
width: 1.8rem;
height: 1.8rem;
right: 2.5rem;
}
}
/* - - arrow-circle -end -*/
/* - - treatmentSec - -*/
.treatmentSec {
padding: 9.3rem 0 8rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01.jpg) no-repeat center top;
background-size: cover;
}
.treatmentSec .comEn {
margin-bottom: 4.2rem;
}
.treatmentSec .topTxt {
max-width: 77rem;
margin: 0 auto 6.4rem;
line-height: 1.76;
letter-spacing: 0.02em;
}
.treatmentSec .comLink03.big a {
min-width: 35.7rem;
}
@media all and (max-width: 896px) {
.treatmentSec {
padding: 4.3rem 0 4.6rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01_sp.jpg);
}
.treatmentSec .comEn {
margin-bottom: 1.5rem;
}
.treatmentSec .topTxt {
max-width: inherit;
margin: 0 2rem 3rem;
line-height: 1.43;
}
.treatmentSec .comLink03.big a {
min-width: 28rem;
min-height: 4.5rem;
}
}
/* - - treatmentUl - -*/
.treatmentUl {
margin-bottom: 4.2rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.treatmentUl li {
padding: 3.5rem 2.4rem 5.7rem;
position: relative;
text-align: center;
width: calc((100% - (3rem * 2 + 0.1rem)) / 3);
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg02.png) no-repeat center;
background-size: 100% 100%;
}
.treatmentUl li .headLine13 {
margin-bottom: 1.1rem;
}
.treatmentUl li .photo {
margin-bottom: 3.2rem;
border-radius: 1rem;
overflow: hidden;
}
.treatmentUl li .photo img {
width: 100%;
}
.treatmentUl li .comLink03 {
margin: 0 1rem;
}
.treatmentUl li .comLink03 a {
padding-left: 2.5rem;
min-width: 100%;
font-size: 1.8rem;
min-height: 5rem;
}
.treatmentUl li .comLink03.link a {
padding-left: 2rem;
padding-right: 4rem;
}
.treatmentUl li .comLink03 .arrow-circle {
right: 2rem;
}
@media all and (max-width: 896px) {
.treatmentUl {
margin-bottom: 3.2rem;
display: block;
}
.treatmentUl li {
width: auto;
margin-bottom: 1.6rem;
padding: 2.5rem 2.5rem 3.5rem;
}
.treatmentUl li:last-child {
margin-bottom: 0;
}
.treatmentUl li .headLine13 {
font-size: 2.3rem;
}
.treatmentUl li .photo {
margin-bottom: 1.6rem;
aspect-ratio: 580 / 350;
border-radius: 0.8rem;
position: relative;
}
.treatmentUl li .photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.treatmentUl li .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
font-size: 1.5rem;
padding-left: 2.5rem;
}
.treatmentUl li .comLink03 .arrow-circle {
right: 2rem;
}
}
/* - - treatment sec , treatmentUl -end -*/
/* - - priceBoxTop - -*/
.priceBoxTop {
padding: 9.5rem 0 11.5rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg03.png) repeat left top;
background-size: 5.7rem auto;
}
.priceBoxTop .comEn {
margin-bottom: 3.7rem;
}
.priceBoxTop .pBox {
max-width: 77rem;
margin: 0 auto 4rem;
}
.priceBoxTop .pBox p {
line-height: 1.764;
letter-spacing: 0.02em;
}
.priceBoxTop .txt {
margin-bottom: 0;
padding: 3rem 0 7rem;
text-align: center;
font-size: 2.6rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 4.4rem;
}
.priceBoxTop .txt .txtSpan {
margin-top: 0.3rem;
font-size: 1.8rem;
display: block;
font-weight: 700;
letter-spacing: 0.04em;
}
.priceBoxTop .txt .subSpan {
font-size: 5rem;
color: #86753b;
font-weight: 700;
}
.priceBoxTop .txt .subSpan small {
font-size: 4rem;
}
@media all and (max-width: 896px) {
.priceBoxTop {
padding: 4.3rem 0 5.2rem;
}
.priceBoxTop .comEn {
margin-bottom: 1.5rem;
}
.priceBoxTop .pBox {
max-width: inherit;
margin: 0 2rem 2.3rem;
}
.priceBoxTop .pBox p {
line-height: 1.43;
}
.priceBoxTop .txt {
padding: 0.5rem 0 3.6rem;
font-size: 1.6rem;
letter-spacing: 0.04em;
}
.priceBoxTop .txt .txtSpan {
margin-top: 0.6rem;
font-size: 1.2rem;
letter-spacing: 0.02em;
}
.priceBoxTop .txt .subSpan {
font-size: 2.8rem;
}
.priceBoxTop .txt .subSpan small {
font-size: 2.3rem;
}
}
/* - - priceList - -*/
.priceList {
display: flex;
flex-wrap:wrap;
gap: 3rem;
}
.priceList li {
border-radius: 1rem;
background-color: #fff;
border: 1px solid #DBD2AE;
width: calc((100% - (3rem * 2 + 0.1rem)) / 3);
}
.priceList li .ttl {
padding-bottom: 1rem;
position: relative;
text-align: center;
font-size: 2.6rem;
letter-spacing: 0.04em;
line-height: 1;
border-radius: 1rem 1rem 0 0;
background-color: #4F96F5;
margin: -1px -1px 0;
color: #fff;
border-bottom: 4px solid #DBD2AE;
}
.priceList li .ttl .num {
font-size: 5rem;
}
.priceList li .ttl .star {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.5rem;
gap: 0 0.1rem;
display: flex;
align-items: center;
font-size: 2rem;
color: #ffe65e;
}
.priceList li .photo {
margin: 0 -2rem;
min-height: 19rem;
display: flex;
align-items: center;
justify-content: center;
}
.priceList li .textBox {
padding: 0 3.5rem 4rem;
}
.priceList li .textBox p {
margin-bottom: 2.4rem;
letter-spacing: 0.02em;
line-height: 1.65;
font-size: 1.8rem;
}
.priceList .comLink03 {
margin: 0 0.5rem;
}
.priceList .comLink03 a {
min-width: 100%;
min-height: 5rem;
font-size: 1.8rem;
padding-inline: 3rem 5rem;
}
.priceList .comLink03 .arrow-circle {
right: 2.5rem;
}
@media all and (max-width: 896px) {
.priceList {
gap: 1.6rem;
flex-direction: column;
}
.priceList li {
width: 100%;
border-radius: 0.8rem;
}
.priceList li .ttl {
padding-bottom: 0.5rem;
font-size: 2.3rem;
letter-spacing: 0.02em;
border-radius: 0.8rem 0.8rem 0 0;
}
.priceList li .ttl .num {
font-size: 4rem;
letter-spacing: 0.02em;
}
.priceList li .photo {
margin: -1rem 0 0.3rem;
min-height: 15rem;
}
.priceList li .photo img {
height: 13.0rem;
width: auto;
}
.priceList li .textBox p {
margin-bottom: 2rem;
line-height: 1.43;
font-size: 1.8rem;
}
.priceList .comLink03 {
margin: 0 -0.8rem;
}
.priceList .comLink03 a {
min-height: 4.5rem;
font-size: 1.5rem;
padding-inline: 3rem 5rem;
}
.priceList .comLink03 .arrow-circle {
right: 2.5rem;
}
.priceList li .textBox {
padding: 0 3.5rem 3.1rem;
}
.priceList li .photo02 img {
height: 11rem;
}
.priceList li .ttl .star {
font-size: 2rem;
right: 1.5rem;
}
}
/* - -proceBox, priceList -end -*/
/* - - priceBox - -*/
.priceBox {
padding: 1.2rem 0 7.2rem;
background-color: #FBF9F1;
}
.priceBox .comEn {
margin-bottom: 4rem;
}
.priceBox .smlContent {
margin-bottom: 3.7rem;
max-width: 75.5rem;
}
.popList .headLine14:hover {
opacity: 0.5;
}
@media all and (min-width: 897px) {
.priceBox #pagePath {
margin-bottom: 6.7rem;
}
}
@media all and (max-width: 896px) {
.priceBox #pagePath {
margin: 0 -1.75rem 4rem;
background-color: #fff;
padding: 0.3rem 1.5rem;
}
.priceBox {
padding: 0 0 4rem;
}
.priceBox .comEn {
margin-bottom: 2rem;
}
.priceBox .smlContent {
margin-bottom: 2.5rem;
}
}
/* - - treatmentList - -*/
.treatmentList {
margin-bottom: 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 2.8rem;
}
.treatmentList li {
background-color: #fff;
border-radius: 1rem;
padding: 1.3rem 2rem;
width: calc((100% - (2.8rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
text-align: center;
padding: 2.3rem min(1.1vw,2rem) 2.9rem;
display: flex;
flex-direction: column;
font-size: 4.6rem;
font-weight: 700;
align-items: center;
justify-content: center;
color: #a49972;
letter-spacing: 0.04em;
line-height: 1;
border: 2px solid #DBD2AE;
border-block-width: 6px;
}
.treatmentList li p span {
margin-bottom: 0.5rem;
display: block;
font-size: 3rem;
color: #62a2f8;
}
@media all and (max-width: 896px) {
.treatmentList {
margin-bottom: 1.7rem;
gap: 2rem 0.4rem;
}
.treatmentList li {
padding: 0.7rem 0.5rem;
border-radius: 0.5rem;
width: calc((100% - (0.4rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
border-width: 1px;
padding: 1.2rem 0 1.4rem;
font-size: 2.3rem;
border-block-width: 3px;
}
.treatmentList li p span {
font-size: 1.4rem;
margin: 0 -1rem 0.3rem;
letter-spacing: 0;
}
}
/* - - treatmentDl - -*/
.treatmentDl {
margin: 0 auto 3rem;
max-width: 48rem;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.treatmentDl:last-child {
margin-bottom: 0;
}
.treatmentDl dt {
display: flex;
align-items: flex-end;
width: calc(100% - 10.5rem);
font-size: 3rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
padding-bottom: 1.5rem;
border-bottom: 1px solid #AA9F7A;
}
.treatmentDl dd {
width: 10.5rem;
padding-bottom: 0.2rem;
font-size: 5rem;
letter-spacing: 0.04em;
color: #86753b;
font-weight: 700;
/* border-bottom: 1px solid #AA9F7A; */
}
.treatmentDl dd .num {
font-size: 6rem;
line-height: 1.45;
}
@media all and (max-width: 896px) {
.treatmentDl {
max-width: 27rem;
}
.treatmentDl dt {
padding: 0 0 1.2rem 0.7rem;
/* width: calc(100% - 5.5rem); */
font-size: 1.7rem;
letter-spacing: 0.02em;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
width: 5.5rem;
font-size: 2.5rem;
}
.treatmentDl dd .num {
font-size: 3.5rem;
}
.treatmentDl {
padding-top: 0.5rem;
max-width: 25.7rem;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
font-size: 2.7rem;
}
.treatmentDl dd .num {
font-size: 3.3rem;
line-height: 1.3;
}
}
/* - - planBox - -*/
.planBox {
padding: 9.6rem 0 11.2rem;
}
.planBox .headLine06 {
font-size: 3.6rem;
margin-bottom: 0;
}
.planBox .comEn {
margin-bottom: 3.7rem;
font-size: 2.6rem;
}
@media all and (max-width: 896px) {
.planBox {
padding: 3.2rem 0 4.2rem;
}
.planBox .headLine06 {
font-size: 2.2rem;
}
.planBox .comEn {
margin-top: -0.5rem;
margin-bottom: 2.2rem;
font-size: 1.7rem;
}
}
/* - - bigPlanPhoto - -*/
.bigPlanPhoto {
max-width: 81rem;
margin: 0 auto 8.2rem;
position: relative;
}
.bigPlanPhoto .txtSpan01 {
position: absolute;
top: calc(50% + 5.3rem);
left: 0.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .txtSpan02 {
position: absolute;
top: calc(50% + 5.3rem);
left: 12.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .note {
width: fit-content;
margin: -2.4rem -6.3rem 0 auto;
text-align: right;
display: block;
letter-spacing: 0.04em;
font-size: 1.5rem;
text-indent: -1em;
padding-left: 1em;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 5.5rem;
}
@media all and (max-width: 896px) {
.bigPlanPhoto {
margin: 0 0.2rem 2.2rem;
max-width: inherit;
}
.bigPlanPhoto img {
width: 100%;
}
.bigPlanPhoto .txtSpan01 {
font-size: 2.4vw;
top: 55%;
left: -1.3vw;
}
.bigPlanPhoto .txtSpan02 {
font-size: 2.4vw;
top: 55%;
left: 12.3vw;
}
.bigPlanPhoto .note {
font-size: 2.66vw;
margin: 0.8rem 0 0 auto;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 2.2rem;
}
}
/* - - bigPlanPhoto - -*/
/* - - headLine16 - -*/
.headLine16 {
margin-bottom: 1.4rem;
font-size: 2.6rem;
color: #62a2f8;
text-align: center;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.headLine16 {
margin-bottom: 1.6rem;
font-size: 2.3rem;
line-height: 1.22;
}
}
/* - - headLine16 - end-*/
/* - - flowSec - -*/
.flowSec {
padding: 8.8rem 0 8.2rem;
background-color: #F8F8F8;
}
.flowSec .comEn02 {
/* margin-bottom: -2rem; */
text-align: center;
transform: none;
color: #99bff2;
}
.flowSec .headLine03 {
margin-bottom: 5.7rem;
text-align: center;
}
.flowSec .comLink03 a {
min-width: 36rem;
}
@media all and (max-width: 896px) {
.flowSec {
padding: 4rem 0 4.7rem;
}
.flowSec .headLine03 {
margin-bottom: 2rem;
}
.flowSec .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
}
.flowSec .comLink03 {
margin-top: 6.7rem;
}
}
/* - - flowList - -*/
.flowList {
margin-bottom: 8.1rem;
display: flex;
flex-wrap: wrap;
gap: 2.8rem;
}
.flowList li {
padding: 2rem 2rem 1.6rem;
text-align: center;
border-radius: 1rem;
position: relative;
width: calc((100% - (2.8rem * 3)) / 4);
background-image: linear-gradient( 180deg, rgb(197,219,249) 12%, rgb(139,185,247) 57%, rgb(81,151,244) 100%);
}
.flowList li:after {
content: '';
position: absolute;
top: 50%;
right: -2.5rem;
width: 0;
height: 0;
border-top: 0.9rem solid transparent;
border-bottom: 0.9rem solid transparent;
border-left: 1.0rem solid #62A2F8;
transform: translate(-50%, -50%);
}
.flowList li:last-child::after {
display: none;
}
.flowList p {
font-size: 2rem;
font-weight: 700;
color: #fff;
}
.flowList .ttl {
padding-top: 1rem;
font-size: 2.6rem;
color: #3689f9;
letter-spacing: 0.04em;
line-height: 1;
width: fit-content;
font-weight: 400;
margin: 0 auto 0.4rem;
background: url(img/index/img01.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.flowList .ttl .num {
font-size: 5rem;
margin-left: -0.3rem;
vertical-align: -0rem;
}
.flowList .photo {
margin-bottom: 1rem;
min-height: 8rem;
display: flex;
align-items: center;
justify-content: center;
}
@media all and (max-width: 896px) {
.flowList {
margin-bottom: 4rem;
gap: 2.2rem;
flex-direction: column;
}
.flowList li {
min-height: 7.5rem;
padding: 1.2rem 2rem 1.2rem;
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
border-radius: 0.5rem;
background: linear-gradient( 90deg, rgb(197,219,249) 0%, rgb(139,185,247) 52%, rgb(81,151,244) 100%);
}
.flowList .spBpx {
display: flex;
align-items: center;
}
.flowList li::after {
right: auto;
left: 50%;
bottom: -2rem;
top: auto;
transform: translateX(-50%) rotate(90deg);
}
.flowList .ttl {
margin: 0 0.7rem 0 0;
font-size: 1.8rem;
display: flex;
white-space: nowrap;
align-items: flex-end;
background-position: left 0.2rem top;
background-size: 3.7rem auto;
}
.flowList .ttl .num {
margin-bottom: -0.3rem;
margin-left: 0;
font-size: 3.5rem;
}
.flowList .photo {
width: 4.5rem;
min-height: inherit;
margin: 0;
}
.flowList p {
flex: 1;
text-align: center;
font-size: 1.6rem;
letter-spacing: 0.02em;
}
}
/* - - flowInner - -*/
.flowInner {
margin-bottom: 4.5rem;
align-items: flex-start;
padding: 3rem 3.9rem 5.2rem 7.8rem;
background-color: #fff;
border: 5px solid rgb(237, 233, 217);
}
.flowInner .photoBox {
width: 35.6%;
margin: -5.2rem 0 0 7.4rem;
}
.flowInner .photoBox img {
width: 100%;
}
.flowInner .textBox {
padding-top: 0.1rem;
flex: 1;
}
.flowInner p {
line-height: 1.65;
}
@media all and (max-width: 896px) {
.flowInner {
margin-bottom: 5.4rem;
padding: 1rem 2rem;
display: block;
border-width: 2px;
}
.flowInner .photoBox {
width: auto;
margin: 1.8rem -0.2rem -4.5rem;
}
.flowInner p {
line-height: 1.43;
}
}
/* - - flowSec -end -*/
/* - - forPatient - -*/
.forPatient {
margin-bottom: 12rem;
}
@media all and (max-width: 896px) {
.forPatient {
margin-bottom: 4.2rem;
}
}
.corinthia {
font-family: "Corinthia", cursive;
}
/* - - headLine03 - -*/
.headLine03 {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 7.9rem;
color: #595757;
}
@media all and (max-width: 896px) {
.headLine03 {
margin-bottom: 2.5rem;
font-size: 1.5rem;
}
}
/* - - headLine03 -end -*/
/* - - comheading01 - -*/
.comheading01 {
text-align: center;
}
.comheading01 .en {
margin-bottom: -0.3rem;
display: block;
font-size: 10rem;
color: #99bff2;
line-height: 1;
}
.comheading01.mbSml .headLine03 {
margin-bottom: 4.9rem;
}
@media all and (max-width: 896px) {
.comheading01 .en {
margin-bottom: -1.2rem;
font-size: 6rem;
}
.comheading01 .en02 {
margin-bottom: 0;
}
.comheading01.mbSml .headLine03 {
margin-bottom: 2.8rem;
}
}
/* - - comheading02 - -*/
.comheading02 {
margin: 0 0 2.3rem;
text-align: left;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.comheading02 .photo {
margin-right: 0.6rem;
flex-shrink: 0;
}
@media all and (max-width: 896px) {
.comheading02 {
margin: 0 0 1.2rem 3rem;
}
.comheading02 .photo {
margin-right: 1.1rem;
width: 5rem;
}
}
/* - - pieChart - -*/
.pieChart {
width: 36.2rem;
order: 2;
margin-left: 9rem;
position: relative;
}
.pieChart .text {
position: absolute;
color: #FFF;
font-family: "Shippori Mincho B1", serif;
font-size: 2.416rem;
line-height: 1;
}
.pieChart .text .year {
font-size: 2.196rem;
}
.pieChart .text .init {
margin-right: 0.8rem;
font-size: 1.757rem;
}
.pieChart .text .num {
font-size: 3.294rem;
font-weight: 500;
}
.pieChart .text01 {
color: #595757;
left: calc(50% + 3.5rem);
top: -0.5rem;
}
.pieChart .text02 {
left: 33.5%;
top: 4.5rem;
}
.pieChart .text03 {
right: 65%;
top: 39%;
font-size: 3.294rem;
text-align: right;
}
.pieChart .text03 .year,
.pieChart .text04 .year {
font-size: 2.635rem;
letter-spacing: 0.2rem;
}
.pieChart .text03 .init,
.pieChart .text04 .init {
margin-right: -0.1rem;
font-size: 2.196rem;
}
.pieChart .text03 .num,
.pieChart .text04 .num {
display: inline-block;
margin-top: 0.5rem;
font-size: 4.173rem;
letter-spacing: 0.1rem;
}
.pieChart .text04 {
left: 57%;
top: 38%;
font-size: 3.953rem;
}
.pieChart .text04 .num {
font-size: 4.831rem;
}
@media all and (max-width: 896px) {
.pieChart{
width: 27rem;
margin: 0 auto;
}
.pieChart img {
width: 100%;
}
.pieChart .text {
font-size: 1.794rem;
}
.pieChart .text .year {
font-size: 1.631rem;
}
.pieChart .text .init {
font-size: 1.3rem;
}
.pieChart .text .num {
font-size: 2.447rem;
}
.pieChart .text01 {
left: calc(50% + 2.5rem);
top: -0.3rem;
}
.pieChart .text02 {
left: 33.5%;
top: 16%;
}
.pieChart .text03 {
font-size: 2.446rem;
}
.pieChart .text03 .year,
.pieChart .text04 .year {
font-size: 1.957rem;
}
.pieChart .text03 .init,
.pieChart .text04 .init {
font-size: 1.631rem;
}
.pieChart .text03 .num,
.pieChart .text04 .num {
margin-top: 0.4rem;
font-size: 3.099rem;
}
.pieChart .text04 {
left: 58%;
font-size: 2.935rem;
}
.pieChart .text04 .num {
margin-top: 0.2rem;
font-size: 3.588rem;
}
}
/* - - visitorImgBox - -*/
.visitorImgBox {
align-items: flex-start;
margin: 0 8rem 6.8rem 5.5rem;
}
.visitorImgBox .textBox {
padding-top: 2.7rem;
flex: 1;
}
@media all and (max-width: 896px) {
.visitorImgBox {
margin: 0 0 3rem;
display: block;
}
.visitorImgBox .textBox {
padding: 0 0 3.5rem;
}
}
/* - - barChart - -*/
.barChart {
margin: 0 auto 13.7rem;
max-width: 77rem;
padding: 0.4rem 8.6rem 1rem 0;
position: relative;
}
.barChart .textList {
position: relative;
z-index: 1;
}
.barChart .textList > li {
padding: 0.7rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.barChart .textList .ttl {
margin: -0.5rem 0 0;
width: 26rem;
color: #595757;
font-size: 1.86rem;
letter-spacing: 0.02em;
text-align: right;
}
.barChart .textList .sub {
flex: 1;
}
.barChart .textList .sub li:not(:last-child) {
margin-bottom: 0.5rem;
}
.barChart .textList .sub li {
padding-right: 1rem;
text-align: right;
color: #FFF;
font-size: 2.325rem;
font-family: "Shippori Mincho B1", serif;
line-height: 1.25;
background-color: #4f96f5;
}
.barChart .textList .sub li:nth-child(2) {
background-color: #a385ee;
}
.barChart .textList .sub .wid02 {
width: calc(100% - 6.5rem);
}
.barChart .textList .sub .wid03 {
width: calc(100% - 13.8rem);
}
.barChart .textList .sub .wid04 {
width: calc(100% - 9.8rem);
}
.barChart .textList .sub .wid05 {
width: calc(100% - 20.5rem);
}
.barChart .textList .sub .wid06 {
width: calc(100% - 16.7rem);
}
.barChart .num {
position: absolute;
top: 0;
bottom: 0;
right: 8.6rem;
width: calc(100% - 35.6rem);
display: flex;
justify-content: space-between;
gap: calc((100% - 4rem)/3);
}
.barChart .num li {
position: relative;
width: 0.1rem;
color: #595757;
font-size: 1.5rem;
white-space: nowrap;
/* background-color: #d9d9d9; */
}
.barChart .num li span {
position: absolute;
right: -1rem;
top: calc(100% + 1rem);
}
.barChart .num li:first-child span {
right: -0.4rem;
}
.barChart .name {
position: absolute;
left: calc(100% - 5.7rem);
bottom: -0.1rem;
width: 17.5rem;
display: flex;
gap: 2.8rem;
}
.barChart .name li {
display: flex;
align-items: center;
color: #595757;
font-size: 1.86rem;
}
.barChart .name li::before {
margin-right: 1rem;
width: 2.6rem;
aspect-ratio: 1;
display: inline-block;
content: '';
background-color: #4f96f5;
}
.barChart .name li:nth-child(2):before {
background-color: #a385ee;
}
@media all and (max-width: 896px) {
.barChart {
padding: 0;
margin-bottom: 8.2rem;
}
.barChart .name {
margin: 0 1rem 1.5rem;
width: auto;
position: static;
justify-content: flex-end;
gap: 2rem;
}
.barChart .name li {
font-size: 1.221rem;
}
.barChart .name li::before {
margin-right: 0.5rem;
width: 1.7rem;
}
.barChart .textBox {
position: relative;
}
.barChart .textList {
margin: 0 1.1rem 0 0;
}
.barChart .textList > li {
padding: 0.4rem 0 0.5rem;
gap: 0.5rem;
}
.barChart .textList .ttl {
margin: 0;
width: 9.5rem;
font-size: 1.3rem;
line-height: 1.23;
}
.barChart .textList .sub li {
padding: 0 0.5rem 0.4rem 0;
font-size: 1.526rem;
line-height: 1;
}
.barChart .textList .sub li:not(:last-child) {
margin-bottom: 0.3rem;
}
.barChart .textList .sub .wid02 {
width: 84.5%;
}
.barChart .textList .sub .wid03 {
width: 66.7%;
}
.barChart .textList .sub .wid04 {
width: 77%;
}
.barChart .textList .sub .wid05 {
width: 51.2%;
}
.barChart .textList .sub .wid06 {
width: 60%;
}
.barChart .num {
top: -0.3rem;
bottom: -0.7rem;
right: 1.1rem;
width: calc(100% - 11.1rem);
}
.barChart .num li {
font-size: 1rem;
line-height: 1;
}
.barChart .num li span {
right: -0.6rem;
}
.barChart .num li:first-child span {
right: -0.3rem;
}
}
/* - - forPatient - -*/
.forPatient {
margin-bottom: 12rem;
}
@media all and (max-width: 896px) {
.forPatient {
margin-bottom: 4.2rem;
}
}
/* - - headLine05 - -*/
.headLine05 {
margin-bottom: 3rem;
padding: 0 0.9rem 1.2rem;
font-size: 2.6rem;
color: #595757;
font-weight: 600;
display: flex;
border-bottom: 1px solid #A49972;
}
.headLine05 .num {
width: 4.3rem;
margin: -0.5rem 3rem 0 0;
font-size: 5rem;
line-height: 1;
color: #a49972;
font-weight: 400;
letter-spacing: 0.04em;
flex-shrink: 0;
position: relative;
}
.headLine05 .num:after {
bottom: 0;
width: 1px;
background-color: #A49972;
position: absolute;
top: 0.7rem;
right: 0;
transform: rotate(35deg);
content: "";
}
.headLine05 .blue {
color: #4f96f5;
}
@media all and (max-width: 896px) {
.headLine05 {
margin-bottom: 1.5rem;
font-size: 1.7rem;
padding: 0 0 0.6rem 0.2rem;
}
.headLine05 .num {
margin: -0.3rem 1.2rem 0 0;
font-size: 3rem;
width: 2.5rem;
}
.headLine05 .num::after {
height: 2.7rem;
top: 0.4rem;
}
}
/* - - headLine05 -end -*/
/* - - process - -*/
.process {
margin-bottom: 3.3rem;
padding: 3.1rem 4rem 4.3rem;
display: flex;
justify-content: space-between;
border: 5px solid rgb(237, 233, 217);
}
.process .photoBox {
width: 34rem;
order: 2;
margin-left: 7.3rem;
}
.process .textBox {
padding: 1.5rem 0 0 3.7rem;
flex: 1;
}
.process .textBox p {
line-height: 1.65;
letter-spacing: 0.02em;
}
.processSpec .photoBox {
order: -1;
margin-left: 0.7rem;
margin-right: 7.3rem;
}
.processSpec .textBox {
padding-left: 0;
padding-right: 3.3rem;
}
@media all and (max-width: 896px) {
.process {
margin-bottom: 1.5rem;
padding: 1.4rem 2rem 2.8rem;
display: block;
border-width: 3px;
}
.process .textBox {
padding: 0 0 1.7rem;
}
.process .photoBox{
width: auto;
margin: 0 !important;
}
.process .photoBox img {
width: 100%;
}
.process .textBox p {
line-height: 1.57;
}
}
/* - - comNum - -*/
.comNum {
position: absolute;
top: -0.8rem;
left: 2.5rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
z-index: 1;
font-family: "Shippori Mincho B1", serif;
}
.comNum .subSpan {
width: 4.4rem;
height: 5.8rem;
padding: 0 0 0.8rem 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #a49972;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.comNum::after {
content: "";
position: absolute;
top: 0;
z-index: -1;
right: -0.6rem;
border-bottom: 0.7rem solid #7e724e;
border-right: 0.7rem solid transparent;
}
@media all and (max-width: 896px) {
.comNum {
font-size: 1.34rem;
padding-bottom: 0.5rem;
top: -0.5rem;
left: 1.6rem;
}
.comNum .subSpan {
width: 2.9rem;
height: 3.8rem;
}
.comNum::after {
right: -0.4rem;
border-width: 0.5rem;
}
}
/* - - featureList - -*/
.feature {
padding: 10rem 0;
margin-top: 12rem;
background-color: #fbf9f1;
}
.featureList {
margin-bottom: 3rem;
display: flex;
flex-wrap: wrap;
gap: 3.4rem 2.6rem;
}
.featureList li {
background-color: #fff;
border: 1px solid #D8D0B4;
border-radius: 1rem;
padding: 4.9rem 0.5rem 3rem;
text-align: center;
position: relative;
width: calc((100% - (2.6rem * 3 + 0.1rem)) / 4);
}
.featureList .photo {
width: 16.1rem;
height: 16.1rem;
border-radius: 100%;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient( 180deg, rgb(185,212,248) 0%, rgb(166,200,245) 62%, rgb(146,187,242) 100%);
background-position: right bottom;
}
.featureList h3 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.feature {
padding: 3.6rem 0;
margin-top: 4.2rem;
}
.featureList {
margin-bottom: 2.4rem;
gap: 1.6rem 1.3rem;
}
.featureList li {
padding: 1.5rem 1rem 1.2rem;
border-radius: 0.8rem;
width: calc((100% - 1.3rem) / 2);
}
.featureList li:last-child {
margin-bottom: 0;
}
.featureList .photo img {
width: 9.5rem;
}
.featureList h3 {
font-size: 1.5rem;
line-height: 1.33;
}
.featureList .photo {
margin: 0 auto 0.7rem;
width: 9.5rem;
height: 9.5rem;
padding: 1.8rem;
}
}
/* - - featureUl - -*/
.featureUl li {
margin-bottom: 2.5rem;
padding: 1.5rem 5.5rem 3.4rem;
border-radius: 1rem;
position: relative;
border: 5px solid rgb(237, 233, 217);
background-color: #f2f0e7;
}
.featureUl li:last-child {
margin-bottom: 0;
}
.featureUl .comheading02 {
margin-inline: 3.5rem;
}
.featureUl .comNum {
font-size: 2.38rem;
top: -1.6rem;
left: 2rem;
}
.featureUl .comNum .subSpan {
width: 5.3rem;
height: 6.9rem;
}
.featureUl .comNum::after {
border-width: 1.1rem;
border-right-width: 0.8rem;
right: -0.8rem;
}
.featureUl li p {
letter-spacing: 0.02em;
color: #4b7ac6;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.featureUl li {
margin-bottom: 1.6rem;
padding: 1.4rem 2rem 2rem;
border-width: 4px;
border-radius: 0.8rem;
}
.featureUl .comheading02 {
margin-inline: 3rem 0;
}
.featureUl .comNum {
top: -1.0rem;
left: 1.4rem;
font-size: 1.5rem;
}
.featureUl .comNum .subSpan {
padding-top: 0.4rem;
width: 3.3rem;
height: 4.4rem;
}
.featureUl .comNum::after {
border-width: 0.7rem;
border-right-width: 0.6rem;
right: -0.5rem;
}
.featureUl li p {
line-height: 1.57;
}
}
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url(img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
z-index: -1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/*------リバイブナビ--end--*/
/*------リバイブナビ--end--*/
/*------------------------------------------------------------
index highBridge
------------------------------------------------------------*/
/* - - mainVisual - -*/
.mainVisual {
/* margin-bottom: 2.4rem; */
/* margin-top: calc(11.5rem - var(--wp-admin--admin-bar--height)); */
/* margin-top: 11.5rem; */
padding: 3rem 2rem 0.8rem;
position: relative;
color: #353535;
overflow: hidden;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_img.jpg) no-repeat center top / auto 100% ,#dde9f4;
}
.mainVisual .praise {
width: 20rem;
aspect-ratio: 1;
padding: 3.5rem 0;
position: absolute;
right: calc(50% - 1.6rem);
top: 1.6rem;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_bg01.png) no-repeat center top / 100%;
}
.mainVisual .praise .text {
color: #FFF;
font-size: 1.8rem;
line-height: 1.3;
}
.mainVisual .praise .star {
color: #eae860;
font-size: 2.092rem;
letter-spacing: 0.15rem;
margin-top: 0.35rem;
}
.mainVisual .praise .num {
/* margin: -1.3rem 0 -0.9rem; */
margin: 0rem 0 -0.9rem;
color: #eae860;
font-size: 3.693rem;
font-style: italic;
font-weight: bold;
}
.mainVisual .textBox01 {
margin-left: 50%;
}
.mainVisual p {
margin-bottom: 0;
}
.mainVisual .textBox01 .inner {
margin-left: 3.2rem;
max-width: 46.5rem;
}
.mainVisual .imgBox {
display: flex;
justify-content: space-between;
}
.mainVisual .text01 .color {
margin: 0 -0.2rem 0;
padding: 0 0.4rem;
width: fit-content;
display: block;
color: #1b8bff;
font-size: 3rem;
font-weight: bold;
border-bottom: 0.1rem solid currentColor;
line-height: 1.25;
}
.mainVisual .text01 .shippori {
display: block;
font-size: 3.6rem;
font-weight: bold;
letter-spacing: -0.3rem;
line-height: 1.4;
}
.mainVisual .photo {
margin: -1rem -1rem 0 0;
width: 16.8rem;
}
.mainVisual .head01 {
margin-bottom: 1.1rem;
color: #c49133;
font-size: 5.6rem;
line-height: 1.25;
letter-spacing: -0.5rem;
font-weight: 600;
}
.mainVisual .head01 small {
font-size: 4.8rem;
color: #353535;
}
.mainVisual .head02 {
/* margin: 0 0 -2.5rem -0.2rem; */
margin: 0 0 3.0rem -0.2rem;
padding: 0rem 1rem 0.8rem;
color: #FFF;
font-weight: 600;
font-size: 3.9rem;
background-color: #353535;
letter-spacing: -0.55rem;
line-height: 0.9;
}
.mainVisual .head03 {
/* margin: 0 -1rem -0.4rem 0; */
/* margin: 0 2rem -0.4rem 0; */
margin-top: 4rem;
margin-bottom: 5rem;
width:fit-content;
font-size: 11rem;
/* letter-spacing: 0.7rem; */
/* color: #353535; */
color: #62a2f8;
-webkit-background-clip:text;
/* -webkit-text-fill-color:transparent;
background-image: linear-gradient(171deg, #353535 0%, #353535 64%, #62a2f8 65%,#62a2f8 100%); */
}
.mainVisual .features {
margin-bottom: 0.8rem;
display: flex;
gap: 0.5rem;
}
.mainVisual .features li {
width: 15rem;
aspect-ratio: 1;
padding: 2.8rem 0 1rem;
color: #FFF;
text-align: center;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.1;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_bg02.png) no-repeat center top / 100%;
}
.mainVisual .features .bigText {
display: block;
color: #e5cd7b;
font-size: 2.521rem;
font-family: "Shippori Mincho B1", serif;
}
.mainVisual .features .fs01 {
font-size: 4rem;
}
.mainVisual .features .fs02 {
font-size: 2.8rem;
}
.mainVisual .features .fs03 {
display: block;
margin-top: 0.5rem;
font-size: 2.8rem;
transform: scaleY(1.1);
}
.mainVisual .features .fs04 {
font-size: 1.8rem;
}
.mainVisual .features sup {
font-size: 1rem;
vertical-align: 1.5rem;
}
.mainVisual .note {
margin: 0 1.5rem 0;
color: #353535;
font-size: 1.1rem;
text-align: right;
}
.mainVisual .textBox02 {
position: absolute;
right: calc(50% + 4rem);
bottom: 4.7rem;
width: 50.1rem;
}
.mainVisual .text02 {
margin: 0 3rem 0 0;
font-size: 2.8rem;
color: #fff;
letter-spacing: -0.2rem;
line-height: 1.3;
text-align: center;
background: -webkit-linear-gradient( 0deg, rgb(203,155,52) 0%, rgb(221,182,99) 40%, rgb(209,164,75) 63%, rgb(196,145,51) 89%);
}
.mainVisual .text03 {
margin: 0.6rem 0 0 3rem;
padding: 1.2rem 0.1rem 0.7rem;
font-weight: bold;
font-size: 2.6rem;
line-height: 4rem;
text-align: center;
letter-spacing: -0.2rem;
background-color: #FFF;
}
.mainVisual .text03 .subSpan {
vertical-align: 0.18rem;
}
.mainVisual .text03 .dotTxt {
vertical-align: 0.1rem;
color: #c49133;
display: inline-block;
position: relative;
height: 4rem;
vertical-align: 0.3rem;
}
.mainVisual .text03 .dotTxt.big {
font-size: 3.2rem;
}
.mainVisual .text03 .dotTxt::before {
position: absolute;
left: 0;
top: -1.3rem;
content: '・';
font-size: 2.6rem;
line-height: 10px;
width: 100%;
text-align: center;
}
.mainVisual .text03 .dotTxt.big::before {
top: -1rem;
}
.mainVisual .text03 .fs {
font-size: 3.6rem;
}
.mainVisual .text03 .red {
vertical-align: -2px;
margin-left: 0.2rem;
color: #f31a43;
font-size: 4rem;
letter-spacing: -0.1rem;
}
.mainVisual .text03 .red .num {
font-size: 6rem;
}
@media all and (max-width: 896px) {
.mainVisual {
margin-bottom: 1.4rem;
padding: 0;
margin-top: calc(5.05rem - var(--wp-admin--admin-bar--height));
margin-top: 5.05rem;
background: none;
}
.mainVisual .imgBox {
margin-bottom: 1.8rem;
position: relative;
}
.mainVisual .photo {
}
.mainVisual .textBox01 {
padding: 3.2rem 2rem 0.7rem;
margin: 0 0 2.6rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_img_sp.jpg) no-repeat center bottom / cover;
}
.mainVisual .textBox01 .inner {
max-width: inherit;
margin-left: 0;
}
.mainVisual .text01 .color {
position: relative;
font-size: 1.86rem;
}
.mainVisual .text01 .color .photo {
position: absolute;
top: -2.3rem;
width: 5rem;
height: 5rem;
border-radius: 100%;
left: calc(100%);
margin: 0;
}
.mainVisual .text01 .color .photo img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
}
.mainVisual .text01 .shippori {
font-size: 2.238rem;
letter-spacing: -0.2rem;
}
.mainVisual .praise {
padding: 2.1rem 1rem;
right: 1rem;
width: 12.5rem;
top: 1.3rem;
}
.mainVisual .praise .text {
font-size: 1.136rem;
}
.mainVisual .praise .star {
/* margin-bottom: 0.5rem; */
font-size: 1.32rem;
letter-spacing: 0;
}
.mainVisual .praise .num {
margin-bottom: -0.4rem;
font-size: 2.33rem;
}
.mainVisual .head01 {
margin-bottom: 0.6rem;
font-size: 3rem;
letter-spacing: -0.25rem;
}
.mainVisual .head01 small {
color: #353535;
font-size: 2.5rem;
}
.mainVisual .head02 {
margin-bottom: -1.5rem;
padding: 0 1rem 0.5rem 0.5rem;
width: fit-content;
font-size: 2.42rem;
letter-spacing: -0.35rem;
}
.mainVisual .head03 {
margin-bottom: 71vw;
font-size: 6.83rem;
/* letter-spacing: 0.5rem; */
}
.mainVisual .features {
margin-bottom: 0.5rem;
justify-content: center;
gap: 0.3rem;
}
.mainVisual .features li {
padding: 1.7rem 0 1rem;
width: 10rem;
font-size: 1.3rem;
}
.mainVisual .textBox02 {
position: static;
}
.mainVisual .features .bigText {
font-size: 1.67rem;
}
.mainVisual .features .fs01 {
font-size: 2.79rem;
}
.mainVisual .features .spFs01 {
font-size: 2.65rem;
}
.mainVisual .features .fs02 {
font-size: 1.86rem;
}
.mainVisual .features .fs03 {
font-size: 1.86rem;
}
.mainVisual .features .fs04 {
font-size: 1.195rem;
}
.mainVisual .features sup {
font-size: 0.6rem;
vertical-align: 1.1rem;
}
.mainVisual .note {
font-size: 0.65rem;
margin: 0;
}
.mainVisual .textBox02 {
margin: 0 1.7rem;
width: auto;
}
.mainVisual .text02 {
margin: 0;
font-size: 1.9rem;
}
.mainVisual .text03 {
padding: 0.6rem 0.1rem 0.5rem;
margin: 0;
font-size: 1.85rem;
}
.mainVisual .text03 .dotTxt.big {
font-size: 2.278rem;
}
.mainVisual .text03 .fs {
font-size: 2.56rem;
}
.mainVisual .text03 .red .num {
font-size: 4.271rem;
}
.mainVisual .text03 .red {
font-size: 2.847rem;
}
.mainVisual .text03 .dotTxt::before {
font-size: 1.85rem;
top: -0.5rem;
}
.mainVisual .text03 .dotTxt.big::before {
top: -0.4rem;
}
}
.shippori {
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
.pc {
display: none !important;
}
}
.contenth {
max-width: 112rem;
margin: 0px auto;
padding: 0px 2rem;
}
media (max-width: 896px) {
.contenth {
padding: 0px 1.75rem;
}
}
/* - - headLine15 - -*/
.headLine15 {
color: #323131;
margin-bottom: 2.5rem;
font-size: 6.6rem;
line-height: 1;
letter-spacing: 0.04em;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9);
}
@media all and (max-width: 896px) {
.headLine15 {
margin-bottom: 1.3rem;
font-size: 2.9rem;
letter-spacing: 0.02em;
}
}
/* - - disease - -*/
.disease {
text-align: center;
margin-bottom: -0.2rem;
padding: 9.4rem 0 10.5rem;
position: relative;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/disease_bg.jpg) no-repeat no-repeat center bottom;
background-size: cover;
}
.disease .content {
position: relative;
}
.disease .bigPhoto {
width: 30.8rem;
position: absolute;
bottom: -8.6rem;
right: 6.2rem;
}
.diseaseImg {
margin-bottom: 3.5rem;
}
.diseaseImg img {
width: 4.4rem;
}
.disease .ttl {
font-size: 4.22rem;
color: #f7e972;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1;
width: fit-content;
margin: 0 auto 3rem;
padding: 0.5rem 2rem 1rem;
background-color: #323131;
}
.disease .txt {
margin-bottom: 0;
font-size: 3.4rem;
font-weight: 700;
color: #323131;
line-height: 1.4;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(255,255,255,0.9),0.3rem -0.3rem 0.7rem rgba(255,255,255,0.9),-0.3rem 0.3rem 0.7rem rgba(255,255,255,0.9),-0.3rem -0.3rem 0.7rem rgba(255,255,255,0.9);
}
.disease .txt .blue {
color: #4f96f5;
font-size: 4.4rem;
}
.disease .txtSpan {
font-size: 4.6rem;
color: #f31a43;
width: fit-content;
position: relative;
margin: 0.5rem auto 0;
line-height: 1.25;
padding-inline: 1.5rem;
letter-spacing: -0.1em;
display: inline-block;
border-bottom: 1px solid currentColor;
}
.disease .txtSpan:after {
width: 100%;
height: 1px;
background-color: #f31a43;
position: absolute;
bottom: -0.5rem;
left: 0;
content: "";
}
@media all and (max-width: 896px) {
.disease {
margin-bottom: 3.8rem;
padding: 5.5rem 0 5rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/disease_bg_sp.jpg);
background-position: center;
}
.diseaseImg {
margin-bottom: 1rem;
}
.diseaseImg img {
width: 3.3rem;
}
.disease .ttl {
font-size: 2.1rem;
width: auto;
margin: 0 0 4rem;
letter-spacing: -0.02em;
padding: 0.4rem 1.5rem 0.4rem;
}
.disease .txt {
font-size: 1.7rem;
text-align: left;
line-height: 1.3;
width: fit-content;
}
.disease .txt .blue {
font-size: 2.2rem;
}
.disease .txtSpan {
font-size: 2.3rem;
border: none;
}
.disease .txtSpan::after {
display: none;
border: none;
}
.disease .subTxt {
display: inline-block;
text-align: center;
}
.disease .bigPhoto {
bottom: -7.1rem;
width: 18.8rem;
right: 0rem;
}
}
@media (min-width: 897px) {
.sp {
display: none !important;
}
}
/* - - snsLinkUl - -*/
.snsLinkUl {
margin-bottom: 11.3rem;
gap: 2rem 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.snsLinkUl li {
width: 33rem;
text-align: center;
}
.snsLinkUl li .ttl {
padding: 0 1rem 0.3rem;
font-size: 2rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
width: fit-content;
margin: 0 auto 0.5rem;
position: relative;
}
.snsLinkUl li .ttl::before {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
left: 0;
bottom: 0.5rem;
transform: rotate(-30deg);
content: "";
}
.snsLinkUl li .ttl::after {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
right: 0;
bottom: 0.5rem;
transform: rotate(30deg);
content: "";
}
.snsLinkUl .tel a,
.snsLinkUl .link a {
display: flex;
justify-content: center;
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(131,180,247) 0%, rgb(136,183,246) 6%, rgb(140,185,245) 18%, rgb(119,174,247) 40%, rgb(98,162,248) 61%, rgb(143,188,249) 77%, rgb(188,214,249) 90%, rgb(129,179,246) 100%);
border-radius: 6rem;
border: 3px solid #fff;
min-height: 8rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
align-items: center;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8);
}
.snsLinkUl .link span {
display: inline-block;
padding-left: 5.2rem;
background: url(img/common/img04.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl .link02 a {
position: relative;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8);
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(77,202,75) 0%, rgb(96,215,77) 6%, rgb(114,227,79) 18%, rgb(72,206,48) 40%, rgb(30,185,17) 61%, rgb(92,210,74) 77%, rgb(153,235,131) 89%, rgb(12,195,0) 100%);
}
.snsLinkUl .link02 span {
background-image: url(img/common/img05.png);
}
.snsLinkUl .tel a {
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background: #F39E19;
font-size: 1.35rem;
color: #262626;
letter-spacing: 0;
font-weight: 700;
text-shadow: none;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
}
.snsLinkUl .tel .num {
display: block;
line-height: 1;
font-size: 3.6rem;
text-align: left;
font-weight: 400;
letter-spacing: 0.03em;
color: #fff;
}
.snsLinkUl .tel .telSpan {
padding-left: 5.5rem;
background: url(img/common/img06.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.snsLinkUl {
margin-bottom: 5.4rem;
display: block;
}
.snsLinkUl li {
width: auto;
margin: 0 auto 1rem;
max-width: 30.2rem;
}
.snsLinkUl li:last-child {
margin-bottom: 0;
}
.snsLinkUl li .ttl {
font-size: 1.5rem;
margin-bottom: 0.2rem;
}
.snsLinkUl .tel a, .snsLinkUl .link a {
min-height: 6rem;
border-width: 2px;
font-size: 2.2rem;
box-shadow: 0rem 0.1rem 0.4rem 0.063rem rgba(0, 0, 0, 0.17);
}
.snsLinkUl .link span {
padding-left: 4.5rem;
background-size: 3.8rem auto;
}
.snsLinkUl .tel a {
font-size: 1.15rem;
}
.snsLinkUl .tel .num {
font-size: 3.1rem;
}
.snsLinkUl .tel .telSpan {
padding-left: 4.5rem;
background-size: 4rem auto;
}
}
/* - - campaign - -*/
.bannerarea {
display: flex;
justify-content: space-between;
align-items: center;
}
.campaign {
margin-bottom: 10rem;
}
.campaign .headLine06 {
letter-spacing: -0.3rem;
}
.campaign .comEn {
margin-bottom: 4.3rem;
}
.campaign .slideBox {
padding-left: 1.3rem;
position: relative;
}
.campaign .slideBox .list .slick-slide {
padding: 0 2.05rem;
}
.campaign .slideBox .list a {
width: 52rem;
display: block;
color: #353535;
position: relative !important;
}
.campaign .slideBox .list a > img {
width: 100%;
}
.campaign .slideBox .list a:hover {
opacity: 0.5;
}
.campaign .slick-slide img {
display: inline-block;
}
.campaign .slideBox .list a::before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: '';
border: 0.5rem solid #b2ad9d;
}
.campaign .slick-dots {
position: absolute;
left: 0;
bottom: -3.5rem;
width: 100%;
display: flex;
justify-content: center;
gap: 1.6rem;
}
.campaign .slick-dots li {
width: 1.3rem;
height: 1.3rem;
overflow: hidden;
cursor: pointer;
background-color: #bcbcbc;
border-radius: 2rem;
}
.campaign .slick-dots .slick-active {
background-color: #353535;
}
.campaign .slick-dots button {
cursor: pointer;
opacity: 0;
}
.campaign .banner01 .ttl {
padding: 0 1rem 1.5rem;
width: 33.8rem;
position: absolute;
left: 9rem;
top: 3.5rem;
color: #FFF;
text-align: center;
font-size: 2rem;
font-weight: bold;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campain_bg01.png) no-repeat center top;
letter-spacing: -0.05rem;
}
.campaign .banner01 .text {
width: 100%;
position: absolute;
left: 0;
top: 7.2rem;
color: #353535;
font-size: 2.6rem;
font-weight: bold;
letter-spacing: -0.3rem;
text-align: center;
text-shadow: 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),
0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),
0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9);
}
.campaign .banner01 .text .big {
display: block;
margin-top: -1.5rem;
color: #86753b;
font-size: 4.6rem;
line-height: 1;
letter-spacing: 0.1rem;
}
.campaign .banner01 .text .red {
color: #f31a43;
}
.campaign .banner01 .text .num {
font-size: 6rem;
}
.campaign .banner02 .text {
position: absolute;
left: 11.5rem;
top: 3.5rem;
font-size: 2.6rem;
font-weight: bold;
line-height: 1;
text-shadow: 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9), 0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9), 0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9);
}
.campaign .banner02 .text .fs {
margin: 0.2rem 0 0.6rem;
display: block;
color: #86753b;
font-size: 3.6rem;
letter-spacing: -0.6rem;
}
.campaign .banner02 .text .num {
color: #f31a43;
font-size: 5rem;
}
.campaign .banner02 .text .num small {
font-size: 4rem;
}
.campaign .banner02 .imgText {
padding: 2.5rem 0 0;
width: 14.8rem;
aspect-ratio: 148/112;
position: absolute;
right: 7.6rem;
top: 6.1rem;
color: #FFF;
font-weight: bold;
font-size: 1.6rem;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campaign_bg02.png) no-repeat center top / 100%;
}
.campaign .banner02 .imgText > span {
margin: -0.2rem 0 0.7rem;
display: block;
color: #e5cd7b;
font-size: 1.764rem;
line-height: 1;
}
.campaign .banner02 .imgText span .num {
font-size: 3rem;
letter-spacing: -0.2rem;
}
.campaign .banner03 .text01 {
padding: 0.2rem 0 0 0.3rem;
width: 14.2rem;
aspect-ratio: 1;
position: absolute;
left: 2.3rem;
top: 2.6rem;
color: #763c04;
font-size: 2.141rem;
font-weight: bold;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campaign_bg03.png) no-repeat center top / 100%;
}
.campaign .banner03 .text01 .big {
margin-bottom: -0.6rem;
display: block;
color: #b1843a;
font-size: 3.426rem;
}
.campaign .banner03 .textBox {
position: absolute;
left: 19rem;
right: 7.5rem;
top: 2.6rem;
text-align: center;
font-size: 1.6rem;
}
.campaign .banner03 .text02 {
margin-bottom: 1rem;
padding: 0rem 0 0.5rem;
color: #FFF;
font-size: 2.2rem;
font-weight: bold;
line-height: 1;
font-size: 2.2rem;
background: linear-gradient(90deg,rgba(31, 53, 150,0) 0%,#1f3596 20%,#1f3596 50%,#1f3596 80%,rgba(31, 53, 150,0) 100%);
}
.campaign .banner03 .text03 {
margin-bottom: -1.2rem;
color: #86753b;
font-size: 3.6rem;
font-weight: bold;
line-height: 1;
letter-spacing: -0.1rem;
margin-top: 0;
}
.campaign .banner03 .text03 .sml {
margin-top: 0.8rem;
display: block;
color: #353535;
font-size: 1.6rem;
font-weight: normal;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
letter-spacing: 0;
}
.campaign .banner03 .text04 {
font-size: 2.241rem;
font-weight: bold;
letter-spacing: -0.1rem;
margin-bottom: 0;
margin-top: 0;
}
.campaign .banner03 .text04 .line {
font-size: 2.586rem;
border-bottom: 0.1rem solid #0f268e;
}
.campaign .banner03 .text04 .num {
font-size: 4.31rem;
}
.campaign .banner03 .text04 .red {
color: #f31a43;
}
.campaign .slideBox .list li > img {
width: 100%;
}
.campaign .slideBox .camdiv,
.campaign .slideBox .camp {
display: block;
}
@media all and (max-width: 896px) {
.campaign {
margin-bottom: 4.5rem;
}
.campaign .headLine06 {
letter-spacing: -0.1rem;
}
.campaign .comEn {
margin-bottom: 1.3rem;
}
.campaign .slideBox {
padding: 0 1.7rem;
}
.campaign .slideBox .list li {
margin-bottom: 0.9rem;
}
.campaign .slideBox .list a {
width: 100%;
}
.campaign .slideBox .list a::before {
border-width: 0.3rem;
}
.campaign .banner01 .ttl {
padding: 0 0 3vw;
left: 17%;
width: 65%;
top: 19%;
font-size: 3.4vw;
letter-spacing: 0;
background-size: 100%;
}
.campaign .banner01 .text {
top: 13vw;
font-size: 4.5vw;
}
.campaign .banner01 .text .big {
margin-top: -2.8vw;
font-size: 8vw;
}
.campaign .banner01 .text .num {
font-size: 10.4vw;
}
.campaign .banner02 .text {
left: 20vw;
top: 6vw;
font-size: 4.52vw;
z-index: 2;
}
.campaign .banner02 .text .fs {
margin: 0.5vw 0 1vw;
font-size: 6.26vw;
letter-spacing: -0.4rem;
}
.campaign .banner02 .text .num {
font-size: 8.7vw;
}
.campaign .banner02 .text .num small {
font-size: 6.96vw;
}
.campaign .banner02 .imgText {
padding: 4.5vw 0 0;
font-size: 2.78vw;
width: 25.4vw;
right: 13.5vw;
top: 11vw;
}
.campaign .banner02 .imgText > span {
margin: -0.5vw 0 0;
font-size: 3vw;
}
.campaign .banner02 .imgText span .num {
font-size: 5.2vw;
}
.campaign .banner02 .imgText img {
margin: 0.2vw auto 0;
display: block;
width: 84%;
}
.campaign .banner03 .text01 {
padding-top: 1.5vw;
width: 25vw;
left: 4vw;
top: 4.5vw;
font-size: 3.73vw;
}
.campaign .banner03 .text01 .big {
margin-bottom: 0;
font-size: 5.96vw;
line-height: 1.2;
}
.campaign .banner03 .textBox {
left: 32vw;
right: 10vw;
top: 4.5vw;
}
.campaign .banner03 .text02 {
padding: 0.2rem 0 0.3rem;
margin: 0 3vw 1.5vw;
font-size: 3.82vw;
}
.campaign .banner03 .text03 {
margin-bottom: -2vw;
font-size: 6.26vw;
margin-top: 0;
}
.campaign .banner03 .text03 .sml {
margin-top: 1vw;
font-size: 3.132vw;
}
.campaign .banner03 .text04 {
font-size: 3.9vw;
margin-bottom: 0;
margin-top: 0;
}
.campaign .banner03 .text04 .line {
font-size: 4.5vw;
}
.campaign .banner03 .text04 .num {
font-size: 7.5vw;
}
}
@media (max-width: 896px) {
.headLine06 {
font-size: 2.2rem;
letter-spacing: 0;
}
}
.headLine06 {
text-align: center;
font-size: 4rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
@media (max-width: 896px) {
.comEn {
margin-bottom: 3.1rem;
font-size: 1.7rem;
}
}
.comEn {
margin-bottom: 7.4rem;
display: block;
font-size: 3rem;
color: #99bff1;
font-weight: 400;
text-align: center;
}
.garamond {
font-family: "EB Garamond", serif;
}
.slideBox .list {
margin: 0 auto 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* text-align: center; */
gap: 0.9rem;
}
.banner03 {
margin: auto;
}
.banner01 {
margin-bottom: 0.9rem;
margin: auto;
}
.banner02 {
margin-bottom: 0.9rem;
margin: auto;
}
/* - - anxiety - -*/
.anxiety {
padding: 9rem 2rem 9.5rem;
color: #FFF;
position: relative;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg.png) no-repeat center center / cover;
}
.anxiety::before {
width: 25.6rem;
height: 6.4rem;
z-index: 1;
background: rgb(18, 18, 18);
clip-path: polygon(3.8rem 0, calc(100% - 3.8rem) 0,calc(100% - 3.8rem) 3rem, 100% 3rem, 13.1rem 100%, 0 3rem , 3.8rem 3rem);
position: absolute;
top: 100%;
left: 50%;
content: "";
transform: translateX(-50%);
}
.anxiety::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25rem;
content: '';
background: linear-gradient(00deg,#121212 0%,#121212 50%,rgba(0,0,0,0) 100%);
z-index: 2;
}
.anxiety .headLine06 {
margin-bottom: 3.7rem;
color: #FFF;
font-size: 5rem;
letter-spacing: -0.3rem;
}
.anxiety .headLine06 .dot {
position: relative;
}
.anxiety .headLine06 .dot::before {
position: absolute;
left: 0;
top: -1.3rem;
content: '・';
line-height: 10px;
width: 100%;
text-align: center;
}
.anxiety .wrap {
margin: 0 auto;
width: 48.4rem;
position: relative;
}
.anxiety .photo {
position: relative;
z-index: 1;
}
.anxiety .photo .pos {
position: absolute;
right: 12rem;
top: 0;
}
.anxiety .textList li {
padding: 4.8rem 2rem 1rem;
width: 31rem;
min-height: 22.8rem;
position: absolute;
z-index: 3;
font-size: 2.6rem;
text-align: center;
line-height: 1.38;
letter-spacing: 0.2rem;
z-index: 1;
}
.anxiety .textList .color {
color: #f7e972;
}
.anxiety .textList .item01 {
right: calc(100% - 13rem);
top: -2.2rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg01.png) no-repeat center top / 100%;
}
.anxiety .textList .item02 {
padding-top: 6.5rem;
right: 100%;
top: 12.5rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg02.png) no-repeat center top / 100%;
}
.anxiety .textList .item03 {
padding: 4.2rem 2rem 1rem 3rem;
width: 32.4rem;
left: calc(100% - 10.3rem);
top: -2.3rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg03.png) no-repeat center top / 100%;
}
.anxiety .textList .item04 {
padding: 4rem 1rem 1rem 4rem;
width: 34rem;
left: calc(100% - 11rem);
top: 16.9rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg04.png) no-repeat center top / 100%;
}
.anxiety .text {
position: absolute;
left: -10rem;
right: -10rem;
bottom: 7.6rem;
text-align: center;
z-index: 3;
font-size: 4.4rem;
letter-spacing: -0.3rem;
font-weight: 600;
text-shadow: 0.1rem 0.1rem 0.8rem rgba(0, 0, 0, 0.8);
}
.anxiety .text span {
color: #f7e972;
font-size: 8rem;
}
.anxiety .pop li {
position: absolute;
z-index: 3;
color: #595757;
font-size: 2.6rem;
text-align: center;
line-height: 1.15;
}
.anxiety .pop01 {
padding: 4rem 1rem 0;
width: 24.6rem;
aspect-ratio: 246/132;
right: calc(50% + 5rem);
bottom: -7rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg05.png) no-repeat center top / 100%;
}
.anxiety .pop02 {
padding: 4.5rem 1rem 0;
width: 29.6rem;
aspect-ratio: 296/130;
left: calc(50% - 3.4rem);
bottom: -4.7rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg06.png) no-repeat center top / 100%;
}
@media all and (max-width: 896px) {
.anxiety {
padding: 4.8rem 0 9.5rem;
}
.anxiety::before {
width: 13rem;
height: 3.2rem;
clip-path: polygon(1.8rem 0, calc(100% - 2.2rem) 0,calc(100% - 2.2rem) 1.5rem, 100% 1.5rem, 50% 100%, 0 1.5rem , 1.8rem 1.5rem);
}
.anxiety::after {
height: 18rem;
background: linear-gradient(00deg,#121212 0%,#121212 70%,rgba(0,0,0,0) 100%);
}
.anxiety .headLine06 {
margin-bottom: 4.5rem;
font-size: 2.98rem;
line-height: 1.36;
letter-spacing: 0;
}
.anxiety .headLine06 .dot::before {
top: -0.9rem;
}
.anxiety .wrap {
margin: 0 auto;
padding-left: 3rem;
width: 34rem;
box-sizing: border-box;
}
.anxiety .photo {
margin: 0 auto;
width: 23.8rem;
}
.anxiety .photo .pos {
width: 4.8rem;
top: -2.8rem;
right: 8.6rem;
}
.anxiety .textList li {
min-height: 15rem;
padding: 2.7rem 1rem;
width: 18.4rem;
font-size: 1.53rem;
letter-spacing: 0;
}
.anxiety .textList .item01 {
top: -4.1rem;
right: calc(100% - 15rem);
}
.anxiety .textList .item02 {
top: 8.9rem;
right: calc(100% - 14rem);
padding-top: 3.8rem;
}
.anxiety .textList .item03 {
width: 16.5rem;
left: calc(100% - 13.5rem);
top: -1.8rem;
padding: 2.2rem 2rem 1rem 2rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg03_sp.png);
}
.anxiety .textList .item04 {
padding: 2rem 2rem 1rem 2rem;
left: calc(100% - 11.8rem);
top: 9.1rem;
width: 15.4rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg04_sp.png);
z-index: 4;
}
.anxiety .text {
font-size: 2.2rem;
bottom: 1.1rem;
}
.anxiety .text span {
font-size: 4rem;
}
.anxiety .pop li {
font-size: 1.43rem;
}
.anxiety .pop .pop01 {
width: 13.5rem;
padding: 2rem 1rem 0;
right: calc(50% + 1.8rem);
bottom: -7.9rem;
}
.anxiety .pop .pop02 {
width: 16.2rem;
padding: 2.3rem 1rem 0;
left: calc(50% - 0.9rem);
bottom: -6.7rem;
}
}
/* - - message - -*/
.message {
padding-bottom: 4.5rem;
background-color: #E5EFFF;
}
.message .photoBox {
width: 50.2%;
margin: -4.4rem -0.1rem 0 3rem;
}
.message .photoBox2 {
width: 50.2%;
margin: -4.4rem -0.1rem 0 3rem;
order: -1;
}
.message .photoBox img {
width: 100%;
}
.message .textBox {
padding-left: 7.5rem;
flex: 1;
}
.message .headLine03 {
margin-bottom: 1.6rem;
}
.message .comLink03 {
text-align: left;
}
.message p {
margin-bottom: 3rem;
line-height: 1.76;
}
@media all and (max-width: 896px) {
.message .imgBox {
display: block;
}
.message .textBox {
padding: 0 0 2.6rem;
}
.message .photoBox {
width: auto;
margin: 0 0.8rem 0 0;
}
.message .textBox2 {
padding: 0 0 2.6rem;
}
.message .photoBox2 {
width: auto;
margin: 0 0.8rem 0 0;
}
.message {
padding: 0 3rem 4.3rem;
}
.message .headLine03 {
font-size: 1.7rem;
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
.message p {
margin-bottom: 2rem;
line-height: 1.43;
}
.message .comLink03 {
margin-bottom: 0;
text-align: center;
}
}
/* - - comEn02 - -*/
.comEn02 {
margin: -1rem 0 -0.7rem -1.2rem;
font-size: 4rem;
line-height: 1;
color: #a49972;
transform: rotate(-10deg);
display: block;
transform-origin: left top;
}
@media all and (max-width: 896px) {
.comEn02 {
margin: 0 0 -1.1rem;
font-size: 6rem;
position: relative;
top: -0.8rem;
}
}
.corinthia {
font-family: "Corinthia", cursive;
font-weight: 100!important;
margin-bottom: 0.9rem;
}
.flexB {
justify-content: space-between;
}
.flex, .flexA, .flexB, .flexC {
display: flex;
flex-wrap: wrap;
}
.comLink03 a:hover {
color: #62a2f8;
}
.comLink03.big a {
min-height: 6.8rem;
font-size: 1.8rem;
background-position: right 3.5rem center;
}
.comLink03 a {
font-weight: 600;
color: #595757;
margin: 0 auto;
min-width: 32rem;
padding: 0 6.5rem 0 3.5rem;
display: inline-flex;
align-items: center;
min-height: 5.4rem;
font-size: 1.6rem;
border-radius: 6rem;
position: relative;
background: #fff;
border: 1px solid rgb(185, 212, 248);
}
/* - - comNum - -*/
.comNum {
position: absolute;
top: -0.8rem;
left: 2.5rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
z-index: 1;
font-family: "Shippori Mincho B1", serif;
}
.comNum .subSpan {
width: 4.4rem;
height: 5.8rem;
padding: 0 0 0.8rem 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #a49972;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.comNum::after {
content: "";
position: absolute;
top: 0;
z-index: -1;
right: -0.6rem;
border-bottom: 0.7rem solid #7e724e;
border-right: 0.7rem solid transparent;
}
@media all and (max-width: 896px) {
.comNum {
font-size: 1.34rem;
padding-bottom: 0.5rem;
top: -0.5rem;
left: 1.6rem;
}
.comNum .subSpan {
width: 2.9rem;
height: 3.8rem;
}
.comNum::after {
right: -0.4rem;
border-width: 0.5rem;
}
}
/* - - featureTop - -*/
.featureTop {
padding-bottom: 8rem;
margin-top: 0;
background-color: #F2F7FF;
}
.featureTop .comLink03 {
margin-top: 4.5rem;
}
@media all and (max-width: 896px) {
.featureTop .comLink03 {
margin-top: -0.5rem;
}
.featureTop {
padding-bottom: 4.4rem;
}
}
/* - - featureTop - end-*/
/* - - featureList - -*/
.feature {
padding: 10rem 0;
/* margin-top: 12rem; */
background-color: #fbf9f1;
}
.featureList {
margin-bottom: 3rem;
display: flex;
flex-wrap: wrap;
gap: 3.4rem 2.6rem;
}
.featureList li {
background-color: #fff;
border: 1px solid #D8D0B4;
border-radius: 1rem;
padding: 4.9rem 0.5rem 3rem;
text-align: center;
position: relative;
width: calc((100% - (2.6rem * 3 + 0.1rem)) / 4);
}
.featureList .photo {
width: 16.1rem;
height: 16.1rem;
border-radius: 100%;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient( 180deg, rgb(185,212,248) 0%, rgb(166,200,245) 62%, rgb(146,187,242) 100%);
background-position: right bottom;
}
.featureList h3 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
line-height: 1.31;
font-family: "Shippori Mincho B1", serif !important;
}
@media all and (max-width: 896px) {
.feature {
padding: 3.6rem 0;
/* margin-top: 4.2rem; */
margin-top: 0.6rem;
}
.featureList {
margin-bottom: 2.4rem;
gap: 1.6rem 1.3rem;
}
.featureList li {
padding: 1.5rem 1rem 1.2rem;
border-radius: 0.8rem;
width: calc((100% - 1.3rem) / 2);
}
.featureList li:last-child {
margin-bottom: 0;
}
.featureList .photo img {
width: 9.5rem;
}
.featureList h3 {
font-size: 1.5rem;
line-height: 1.33;
}
.featureList .photo {
margin: 0 auto 0.7rem;
width: 9.5rem;
height: 9.5rem;
padding: 1.8rem;
}
}
/* - - featureUl - -*/
.featureUl li {
margin-bottom: 2.5rem;
padding: 1.5rem 5.5rem 3.4rem;
border-radius: 1rem;
position: relative;
border: 5px solid rgb(237, 233, 217);
background-color: #f2f0e7;
}
.featureUl li:last-child {
margin-bottom: 0;
}
.featureUl .comheading02 {
margin-inline: 3.5rem;
}
.featureUl .comNum {
font-size: 2.38rem;
top: -1.6rem;
left: 2rem;
}
.featureUl .comNum .subSpan {
width: 5.3rem;
height: 6.9rem;
}
.featureUl .comNum::after {
border-width: 1.1rem;
border-right-width: 0.8rem;
right: -0.8rem;
}
.featureUl li p {
letter-spacing: 0.02em;
color: #4b7ac6;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.featureUl li {
margin-bottom: 1.6rem;
padding: 1.4rem 2rem 2rem;
border-width: 4px;
border-radius: 0.8rem;
}
.featureUl .comheading02 {
margin-inline: 3rem 0;
}
.featureUl .comNum {
top: -1.0rem;
left: 1.4rem;
font-size: 1.5rem;
}
.featureUl .comNum .subSpan {
padding-top: 0.4rem;
width: 3.3rem;
height: 4.4rem;
}
.featureUl .comNum::after {
border-width: 0.7rem;
border-right-width: 0.6rem;
right: -0.5rem;
}
.featureUl li p {
line-height: 1.57;
}
}
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url(img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
z-index: -1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/* - - featureList -end -*/
/*-----comLink03-------*/
@media (max-width: 896px) {
.featureTop .comLink03 {
margin-top: -0.5rem;
}
}
.featureTop .comLink03 {
margin-top: 4.5rem;
}
.comLink03.big {
margin: 0;
}
.comLink03:last-child {
margin-bottom: 0;
}
@media (max-width: 896px) {
.comLink03 {
margin-bottom: 5.2rem;
}
}
.comLink03
{
/* width: 32rem; */
margin: 0 auto 5.2rem;
text-align: center;
}
.comLink03 {
/* width: 32rem; */
}
/*-----comLink03----end---*/
/* - - arrow-circle - -*/
.arrow-circle {
right: 3.5rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #62A2F8;
cursor: pointer;
transition: all 0.3s ease;
}
.arrow-circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
transform: translate(-70%, -50%) rotate(45deg);
}
@media all and (max-width: 896px) {
.arrow-circle {
width: 1.8rem;
height: 1.8rem;
right: 2.5rem;
}
}
/* - - arrow-circle -end -*/
/* - - flowSec - -*/
.flowSec {
padding: 8.8rem 0 8.2rem;
background-color: #F8F8F8;
}
.flowSec .comEn02 {
margin-bottom: -2rem;
text-align: center;
transform: none;
color: #99bff2;
}
.flowSec .headLine03 {
margin-bottom: 5.7rem;
text-align: center;
}
.flowSec .comLink03 a {
min-width: 36rem;
}
@media all and (max-width: 896px) {
.flowSec {
padding: 4rem 0 4.7rem;
}
.flowSec .headLine03 {
margin-bottom: 2rem;
}
.flowSec .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
}
.flowSec .comLink03 {
margin-top: 6.7rem;
}
}
/* - - flowList - -*/
.flowList {
margin-bottom: 8.1rem;
display: flex;
flex-wrap: wrap;
gap: 2.8rem;
}
.flowList li {
padding: 2rem 2rem 1.6rem;
text-align: center;
border-radius: 1rem;
position: relative;
width: calc((100% - (2.8rem * 3)) / 4);
background-image: linear-gradient( 180deg, rgb(197,219,249) 12%, rgb(139,185,247) 57%, rgb(81,151,244) 100%);
}
.flowList li:after {
content: '';
position: absolute;
top: 50%;
right: -2.5rem;
width: 0;
height: 0;
border-top: 0.9rem solid transparent;
border-bottom: 0.9rem solid transparent;
border-left: 1.0rem solid #62A2F8;
transform: translate(-50%, -50%);
}
.flowList li:last-child::after {
display: none;
}
.flowList p {
font-size: 2rem;
font-weight: 700;
color: #fff;
}
.flowList .ttl {
padding-top: 1rem;
font-size: 2.6rem;
color: #3689f9;
letter-spacing: 0.04em;
line-height: 1;
width: fit-content;
font-weight: 400;
margin: 0 auto 0.4rem;
background: url(img/index/img01.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.flowList .ttl .num {
font-size: 5rem;
margin-left: -0.3rem;
vertical-align: -0rem;
}
.flowList .photo {
margin-bottom: 1rem;
min-height: 8rem;
display: flex;
align-items: center;
justify-content: center;
}
@media all and (max-width: 896px) {
.flowList {
margin-bottom: 4rem;
gap: 2.2rem;
flex-direction: column;
}
.flowList li {
min-height: 7.5rem;
padding: 1.2rem 2rem 1.2rem;
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
border-radius: 0.5rem;
background: linear-gradient( 90deg, rgb(197,219,249) 0%, rgb(139,185,247) 52%, rgb(81,151,244) 100%);
}
.flowList .spBpx {
display: flex;
align-items: center;
}
.flowList li::after {
right: auto;
left: 50%;
bottom: -2rem;
top: auto;
transform: translateX(-50%) rotate(90deg);
}
.flowList .ttl {
margin: 0 0.7rem 0 0;
font-size: 1.8rem;
display: flex;
white-space: nowrap;
align-items: flex-end;
background-position: left 0.2rem top;
background-size: 3.7rem auto;
}
.flowList .ttl .num {
margin-bottom: -0.3rem;
margin-left: 0;
font-size: 3.5rem;
}
.flowList .photo {
width: 4.5rem;
min-height: inherit;
margin: 0;
}
.flowList p {
flex: 1;
text-align: center;
font-size: 1.6rem;
letter-spacing: 0.02em;
}
}
/* - - flowInner - -*/
.flowInner {
margin-bottom: 4.5rem;
align-items: flex-start;
padding: 3rem 3.9rem 5.2rem 7.8rem;
background-color: #fff;
border: 5px solid rgb(237, 233, 217);
}
.flowInner .photoBox {
width: 35.6%;
margin: -5.2rem 0 0 7.4rem;
}
.flowInner .photoBox img {
width: 100%;
}
.flowInner .textBox {
padding-top: 0.1rem;
flex: 1;
}
.flowInner p {
line-height: 1.65;
}
@media all and (max-width: 896px) {
.flowInner {
margin-bottom: 5.4rem;
padding: 1rem 2rem;
display: block;
border-width: 2px;
}
.flowInner .photoBox {
width: auto;
margin: 1.8rem -0.2rem -4.5rem;
}
.flowInner p {
line-height: 1.43;
}
}
/* - - headLine17 - -*/
.headLine17 {
margin-bottom: 3rem;
padding: 0 1.0rem 1.2rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
border-bottom: 1px solid #A49972;
}
.headLine17 .lSpan {
padding-top: 1rem;
font-size: 2.6rem;
font-weight: 400;
color: #62a2f8;
line-height: 1;
flex-shrink: 0;
width: 10rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/common/img07.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.headLine17 .lSpan .num {
font-size: 5rem;
}
.headLine17 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine17 {
margin-bottom: 1.7rem;
font-size: 1.8rem;
padding: 0 0 0.2rem;
}
.headLine17 .lSpan {
width: 6.4rem;
white-space: nowrap;
font-size: 1.7rem;
padding-top: 0.6rem;
background-position: left 0.2rem top;
background-size: 3.5rem auto;
}
.headLine17 .lSpan .num {
font-size: 3.3rem;
}
}
/* - - headLine16 - -*/
.headLine16 {
margin-bottom: 1.4rem;
font-size: 2.6rem;
color: #62a2f8;
text-align: center;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.headLine16 {
margin-bottom: 1.6rem;
font-size: 2.3rem;
line-height: 1.22;
}
}
/* - - treatmentList - -*/
.treatmentList {
margin-bottom: 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 2.8rem;
}
.treatmentList li {
background-color: #fff;
border-radius: 1rem;
padding: 1.3rem 2rem;
width: calc((100% - (2.8rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
text-align: center;
padding: 2.3rem min(1.1vw,2rem) 2.9rem;
display: flex;
flex-direction: column;
font-size: 4.6rem;
font-weight: 700;
align-items: center;
justify-content: center;
color: #a49972;
letter-spacing: 0.04em;
line-height: 1;
border: 2px solid #DBD2AE;
border-block-width: 6px;
}
.treatmentList li p span {
margin-bottom: 0.5rem;
display: block;
font-size: 3rem;
color: #62a2f8;
}
@media all and (max-width: 896px) {
.treatmentList {
margin-bottom: 1.7rem;
gap: 2rem 0.4rem;
}
.treatmentList li {
padding: 0.7rem 0.5rem;
border-radius: 0.5rem;
width: calc((100% - (0.4rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
border-width: 1px;
padding: 1.2rem 0 1.4rem;
font-size: 2.3rem;
border-block-width: 3px;
}
.treatmentList li p span {
font-size: 1.4rem;
margin: 0 -1rem 0.3rem;
letter-spacing: 0;
}
}
/* - - treatmentDl - -*/
.treatmentDl {
margin: 0 auto 3rem;
max-width: 48rem;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.treatmentDl:last-child {
margin-bottom: 0;
}
.treatmentDl dt {
display: flex;
align-items: flex-end;
width: calc(100% - 10.5rem);
font-size: 3rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
padding-bottom: 1.5rem;
border-bottom: 1px solid #AA9F7A;
}
.treatmentDl dd {
width: 10.5rem;
padding-bottom: 0.2rem;
font-size: 5rem;
letter-spacing: 0.04em;
color: #86753b;
font-weight: 700;
/* border-bottom: 1px solid #AA9F7A; */
}
.treatmentDl dd .num {
font-size: 6rem;
line-height: 1.45;
}
@media all and (max-width: 896px) {
.treatmentDl {
max-width: 27rem;
}
.treatmentDl dt {
padding: 0 0 1.2rem 0.7rem;
width: calc(100% - 5.5rem);
font-size: 1.7rem;
letter-spacing: 0.02em;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
width: 5.5rem;
font-size: 2.5rem;
}
.treatmentDl dd .num {
font-size: 3.5rem;
}
.treatmentDl {
padding-top: 0.5rem;
max-width: 25.7rem;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
font-size: 2.7rem;
}
.treatmentDl dd .num {
font-size: 3.3rem;
line-height: 1.3;
}
}
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
z-index: -1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/* - - planBox - -*/
.planBox {
padding: 9.6rem 0 11.2rem;
padding: 10.5rem 0 9rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg03.png ) no-repeat center;
background-size: 100% 100%;
}
.planBox .headLine06 {
font-size: 3.6rem;
margin-bottom: 0;
}
.planBox .comEn {
margin-bottom: 3.7rem;
font-size: 2.6rem;
}
@media all and (max-width: 896px) {
.planBox {
padding: 3.2rem 0 4.2rem;
}
.planBox .headLine06 {
font-size: 2.2rem;
}
.planBox .comEn {
margin-top: -0.5rem;
margin-bottom: 2.2rem;
font-size: 1.7rem;
}
}
/* - - bigPlanPhoto - -*/
.bigPlanPhoto {
max-width: 81rem;
margin: 0 auto 8.2rem;
position: relative;
}
.bigPlanPhoto .txtSpan01 {
position: absolute;
top: calc(50% + 5.3rem);
left: 0.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .txtSpan02 {
position: absolute;
top: calc(50% + 5.3rem);
left: 12.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .note {
width: fit-content;
margin: -2.4rem -6.3rem 0 auto;
text-align: right;
display: block;
letter-spacing: 0.04em;
font-size: 1.5rem;
text-indent: -1em;
padding-left: 1em;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 5.5rem;
}
@media all and (max-width: 896px) {
.bigPlanPhoto {
margin: 0 0.2rem 2.2rem;
max-width: inherit;
}
.bigPlanPhoto img {
width: 100%;
}
.bigPlanPhoto .txtSpan01 {
font-size: 2.4vw;
top: 55%;
left: -1.3vw;
}
.bigPlanPhoto .txtSpan02 {
font-size: 2.4vw;
top: 55%;
left: 12.3vw;
}
.bigPlanPhoto .note {
font-size: 2.66vw;
margin: 0.8rem 0 0 auto;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 2.2rem;
}
}
/* - - effectList - -*/
.effectList {
margin: 0 auto 5.2rem;
max-width: 79.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem 5.2rem;
position: relative;
}
.effectList:after {
width: 2.8rem;
height: 5rem;
background-color: rgb(89, 87, 87);
clip-path: polygon(0% 18%, 50% 18%, 50% 0%, 100% 50%, 50% 100%, 50% 86%, 0% 86%);
position: absolute;
top: calc(50% - 1.7rem);
transform: translate(-50%,-50%);
left: 50%;
content: "";
}
.effectList li {
padding: 1.7rem 1.7rem 1.4rem;
text-align: center;
width: calc((100% - 5.2rem) / 2);
background-color: #fff;
box-shadow: 0rem 0rem 0.658rem 0.042rem rgba(0, 0, 0, 0.13);
}
.effectList li .photo {
max-width: 32rem;
margin: 0 auto 1rem;
}
.effectList li .photo img {
width: 100%;
}
.effectList li .txtSpan {
display: block;
width: 13rem;
min-height: 3rem;
background-color: #EBEBEB;
border-radius: 6rem;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
margin: 0 auto;
}
.effectList li .txtSpan02 {
background-color: #FFDDE7;
color: #fa2662;
}
@media all and (max-width: 896px) {
.effectList {
margin: 0 auto 2.6rem;
max-width: inherit;
gap: 3rem 2.2rem;
}
.effectList::after {
width: 1.3rem;
height: 2.2rem;
top: calc(50% - 0.2rem);
}
.effectList li {
padding: 1rem 1rem 0.5rem;
width: calc((100% - 2.2rem) / 2);
box-shadow: 0rem 0rem 0.33rem 0.021rem rgba(0, 0, 0, 0.13);
}
.effectList li .txtSpan {
padding-bottom: 0.1rem;
width: 6.5rem;
font-size: 1.3rem;
min-height: 1.75rem;
}
.effectList li .txtSpan02 {
background-color: #FFDDE7;
}
.effectList li .photo {
max-width: inherit;
margin-bottom: 0.4rem;
}
}
/* - - preventionList - -*/
.preventionList {
margin-bottom: 5.4rem;
}
.preventionList li {
padding-bottom: 1.7rem;
margin-bottom: 2.2rem;
border-bottom: 2px solid #E9E9E9;
}
.preventionList li:last-child {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
.preventionList li > dl {
max-width: 62rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.preventionList li > dl > dt {
font-size: 2.6rem;
margin-top: -1rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
width: 15rem;
line-height: 1;
display: flex;
align-items: center;
font-family: "Shippori Mincho B1", serif;
}
.preventionList li > dl > dd {
flex: 1;
font-size: 2rem;
letter-spacing: 0.04em;
line-height: 1.7;
}
@media all and (max-width: 896px) {
.preventionList {
margin-bottom: 3.5rem;
}
.preventionList li {
padding-bottom: 0.85rem;
margin-bottom: 0.85rem;
}
.preventionList li > dl {
max-width: inherit;
}
.preventionList li > dl > dt {
margin-top: -0.3rem;
font-size: 1.4rem;
width: 7rem;
}
.preventionList li > dl > dd {
font-size: 1.4rem;
line-height: 1.36;
}
}
/* - - priceDl - -*/
.priceDl {
padding-bottom: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.priceDl dt {
padding-top: 1.5rem;
width: 11rem;
font-size: 2rem;
}
.priceDl dt.no {
display: none;
}
.priceDl dd {
margin-bottom: -0.7rem;
width: calc(100% - 11rem);
}
.priceDl dd .txtSpan {
font-size: 3.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.priceDl dd .priceSpan {
font-size: 3rem;
color: #86753b;
letter-spacing: 0.04em;
font-weight: 700;
}
.priceDl dd .num {
font-size: 4.6rem;
line-height: 1;
}
@media all and (max-width: 896px) {
.priceDl dt {
padding-top: 0.7rem;
width: 7.4rem;
font-size: 1.4rem;
}
.priceDl dd {
margin: -0.5rem 0 -1.0rem;
width: calc(100% - 7.4rem);
font-size: 1.4rem;
}
.priceDl dd .txtSpan {
font-size: 1.8rem;
}
.priceDl dd .priceSpan {
font-size: 1.7rem;
}
.priceDl dd .num {
font-size: 2.5rem;
line-height: 1;
}
.priceDl {
padding-bottom: 1rem;
}
}
/* - - medicationList - -*/
.medicationList {
margin-bottom: 10.8rem;
}
.medicationList li {
margin-bottom: 1.5rem;
}
.medicationList .txt {
font-size: 1.7rem;
display: none;
padding: 2.2rem 1.0rem 0.8rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.medication .headLine13 {
padding-bottom: 0.1rem;
font-size: 1.7rem;
}
.medicationList {
margin-bottom: 4.4rem;
}
.medicationList li {
margin-bottom: 0.8rem;
}
.medicationList .txt {
padding: 0.6rem 0.4rem 0.5rem;
font-size: 1.4rem;
line-height: 1.57;
}
}
/* - - treatmentArticle - -*/
.treatmentArticle {
padding: 2.2rem 0;
}
.treatmentArticle .headLine09 {
background-image: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg02.png);
}
.treatmentArticle .comTtlBox {
margin-bottom: 4.5rem;
border-color: #A385EE;
}
.treatmentArticle .headLine10 .lSpan {
color: #A385EE;
}
.treatmentArticle .headLine11 {
border-color: #A385EE;
}
.treatmentArticle .effectList {
margin-bottom: 6.4rem;
}
.treatmentArticle .headLine12 {
background-color: #C8BAED;
}
.treatmentArticle .medicationList {
margin-bottom: 7rem;
}
@media all and (max-width: 896px) {
.treatmentArticle .comTtlBox {
margin-bottom: 2rem;
}
.treatmentArticle .effectList {
margin-bottom: 2.6rem;
}
.treatmentArticle .medicationList {
margin-bottom: 3rem;
}
}
/* - - areataArticle - -*/
.areataArticle .headLine09 {
background-image: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg03.png);
}
.areataArticle .comTtlBox {
margin-bottom: 4.5rem;
border-color: #A49972;
}
.areataArticle .headLine10 .lSpan {
color: #a49972;
border-color: #EDE6CC;
}
.areataArticle .headLine11 {
border-color: #A49972;
}
.areataArticle .headLine12 {
background-color: #A49972;
font-size: 3rem;
padding-block: 0.6rem 0.8rem;
}
.areataArticle .effectList {
margin-bottom: 6.7rem;
}
.areataArticle {
margin-bottom: -3.5rem;
}
@media all and (max-width: 896px) {
.areataArticle .headLine09 .icon {
width: 1.8rem;
}
.areataArticle .comTtlBox {
margin-bottom: 3rem;
}
.areataArticle .effectList {
margin-bottom: 2.6rem;
}
.areataArticle .headLine12 {
margin-bottom: 2.5rem;
font-size: 1.7rem;
padding: 0.2rem;
}
.areataArticle {
margin-bottom: 0;
}
}
/* - - areataList - -*/
.areataList {
padding: 0 2rem 5.5rem;
margin-top: -0.7rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 2rem;
}
.areataList li {
text-align: center;
width: calc((100% - (2rem * 5)) / 6);
}
.areataList li.no {
position: relative;
}
.areataList li.no:after {
background-color: #fff;
opacity: 0.7;
inset: -1rem;
position: absolute;
content: "";
}
.areataList li .photo {
margin-bottom: 1.8rem;
}
.areataList li p {
font-size: 1.6rem;
color: #595757;
line-height: 1.25;
}
.areataList li .ttl {
min-width: 10rem;
width: fit-content;
line-height: 1.1;
padding-bottom: 0.2rem;
margin: 0 auto 1.3rem;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.1em;
border: 1px solid #4F96F5;
border-radius: 6rem;
text-align: center;
}
.areataList li .ttl02 {
border-color: #F31A43;
background-color: #FFE1E7;
}
.areataList li p:not([class]) {
margin-inline: -1rem;
}
@media all and (max-width: 896px) {
.areataList {
padding: 0 1rem 2.2rem;
gap: 0.8rem 1.5rem;
}
.areataList li{
width: calc((100% - (1.5rem * 2)) / 3);
}
.areataList li .photo {
max-width: 5rem;
margin: 0 auto 0.8rem;
}
.areataList li p {
font-size: 1rem;
line-height: 1.3;
}
.areataList li .ttl {
padding: 0.1rem 0 0;
margin-bottom: 0.3rem;
min-width:5rem;
font-size: 1.1rem;
}
}
/* - - payment - -*/
.payment {
padding: 9.5rem 0 6.4rem;
background-color: #F8F8F8;
}
.payment .comEn {
margin-bottom: 9.5rem;
}
.payment .ttl {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
margin-bottom: 4.9rem;
}
@media all and (max-width: 896px) {
.payment {
padding: 4rem 0 6rem;
}
.payment .comEn {
margin-bottom: 2.6rem;
}
.payment .ttl {
margin-bottom: 2.3rem;
font-size: 1.6rem;
line-height: 1.5625;
}
}
/* - - paymentDl - -*/
.paymentDl {
margin-bottom: 6.2rem;
align-items: stretch;
border-top: 2px solid #E9E9E9;
}
.paymentDl dt {
padding: 3.3rem 1rem 4rem 2rem;
width: 33rem;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
font-family: "Shippori Mincho B1", serif;
border-bottom: 2px solid #E9E9E9;
}
.paymentDl dd {
padding: 3.5rem 4rem 4.4rem 0;
font-size: 1.6rem;
letter-spacing: 0.04em;
line-height: 1.625;
width: calc(100% - 33rem);
border-bottom: 2px solid #E9E9E9;
}
.paymentDl dt:last-of-type,
.paymentDl dd:last-of-type {
border: none;
padding-bottom: 0;
}
@media all and (max-width: 896px) {
.paymentDl {
margin-bottom: 1.3rem;
display: block;
}
.paymentDl dt {
width: auto;
border: none;
font-size: 1.6rem;
padding: 1rem 0 0.5rem !important;
}
.paymentDl dd {
width: auto;
padding: 0 0 2rem !important;
font-size: 1.4rem;
line-height: 1.36;
}
.paymentDl .paymentImg {
display: block;
width: 83.5%;
padding: 1rem 0 0;
}
.paymentDl .paymentImg img {
width: 100%;
}
}
/* - - priceBoxTop - -*/
.priceBoxTop {
padding: 9.5rem 0 11.5rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg03.png) repeat left top;
background-size: 5.7rem auto;
}
.priceBoxTop .comEn {
margin-bottom: 3.7rem;
}
.priceBoxTop .pBox {
max-width: 77rem;
margin: 0 auto 4rem;
}
.priceBoxTop .pBox p {
line-height: 1.764;
letter-spacing: 0.02em;
}
.priceBoxTop .txt {
margin-bottom: 0;
padding: 3rem 0 7rem;
text-align: center;
font-size: 2.6rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.08em;
}
.priceBoxTop .txt .txtSpan {
margin-top: 0.3rem;
font-size: 1.8rem;
display: block;
font-weight: 700;
letter-spacing: 0.04em;
}
.priceBoxTop .txt .subSpan {
font-size: 5rem;
color: #86753b;
font-weight: 700;
}
.priceBoxTop .txt .subSpan small {
font-size: 4rem;
}
@media all and (max-width: 896px) {
.priceBoxTop {
padding: 4.3rem 0 5.2rem;
}
.priceBoxTop .comEn {
margin-bottom: 1.5rem;
}
.priceBoxTop .pBox {
max-width: inherit;
margin: 0 2rem 2.3rem;
}
.priceBoxTop .pBox p {
line-height: 1.43;
}
.priceBoxTop .txt {
padding: 0.5rem 0 3.6rem;
font-size: 1.6rem;
letter-spacing: 0.04em;
}
.priceBoxTop .txt .txtSpan {
margin-top: 0.6rem;
font-size: 1.2rem;
letter-spacing: 0.02em;
}
.priceBoxTop .txt .subSpan {
font-size: 2.8rem;
}
.priceBoxTop .txt .subSpan small {
font-size: 2.3rem;
}
}
/* - - priceList - -*/
.priceList {
display: flex;
flex-wrap:wrap;
gap: 3rem;
justify-content: center;
}
.priceList li {
border-radius: 1rem;
background-color: #fff;
border: 1px solid #DBD2AE;
width: calc((100% - (3rem * 2 + 0.1rem)) / 3);
}
.priceList li .ttl {
padding-bottom: 1rem;
position: relative;
text-align: center;
font-size: 2.6rem;
letter-spacing: 0.04em;
line-height: 1;
border-radius: 1rem 1rem 0 0;
background-color: #4F96F5;
margin: -1px -1px 0;
color: #fff;
border-bottom: 4px solid #DBD2AE;
}
.priceList li .ttl .num {
font-size: 5rem;
}
.priceList li .ttl .star {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.5rem;
gap: 0 0.1rem;
display: flex;
align-items: center;
font-size: 2rem;
color: #ffe65e;
}
.priceList li .photo {
margin: 0 -2rem;
min-height: 19rem;
display: flex;
align-items: center;
justify-content: center;
}
.priceList li .textBox {
padding: 0 3.5rem 4rem;
}
.priceList li .textBox p {
margin-bottom: 2.4rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
.priceList .comLink03 {
margin: 0 0.5rem;
}
.priceList .comLink03 a {
min-width: 100%;
min-height: 5rem;
font-size: 1.8rem;
padding-inline: 3rem 5rem;
}
.priceList .comLink03 .arrow-circle {
right: 2.5rem;
}
@media all and (max-width: 896px) {
.priceList {
gap: 1.6rem;
flex-direction: column;
}
.priceList li {
width: 100%;
border-radius: 0.8rem;
}
.priceList li .ttl {
padding-bottom: 0.5rem;
font-size: 2.3rem;
letter-spacing: 0.02em;
border-radius: 0.8rem 0.8rem 0 0;
}
.priceList li .ttl .num {
font-size: 4rem;
letter-spacing: 0.02em;
}
.priceList li .photo {
margin: -1rem 0 0.3rem;
min-height: 15rem;
}
.priceList li .photo img {
height: 13.0rem;
width: auto;
}
.priceList li .textBox p {
margin-bottom: 2rem;
line-height: 1.43;
}
.priceList .comLink03 {
margin: 0 -0.8rem;
}
.priceList .comLink03 a {
min-height: 4.5rem;
font-size: 1.5rem;
padding-inline: 3rem 5rem;
}
.priceList .comLink03 .arrow-circle {
right: 2.5rem;
}
.priceList li .textBox {
padding: 0 3.5rem 3.1rem;
}
.priceList li .photo02 img {
height: 11rem;
}
.priceList li .ttl .star {
font-size: 2rem;
right: 1.5rem;
}
}
/* - - treatmentSec - -*/
.treatmentSec {
padding: 9.3rem 0 8rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01.jpg) no-repeat center top;
background-size: cover;
}
.treatmentSec .comEn {
margin-bottom: 4.2rem;
}
.treatmentSec .topTxt {
max-width: 77rem;
margin: 0 auto 6.4rem;
line-height: 1.76;
letter-spacing: 0.02em;
}
.treatmentSec .comLink03.big a {
min-width: 35.7rem;
}
@media all and (max-width: 896px) {
.treatmentSec {
padding: 4.3rem 0 4.6rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01_sp.jpg);
}
.treatmentSec .comEn {
margin-bottom: 1.5rem;
}
.treatmentSec .topTxt {
max-width: inherit;
margin: 0 2rem 3rem;
line-height: 1.43;
}
.treatmentSec .comLink03.big a {
min-width: 28rem;
min-height: 4.5rem;
}
}
/* - - treatmentUl - -*/
.treatmentUl {
margin-bottom: 4.2rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
justify-content: center;
}
.treatmentUl li {
padding: 3.5rem 2.4rem 5.7rem;
position: relative;
text-align: center;
width: calc((100% - (3rem * 2 + 0.1rem)) / 3);
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg02.png) no-repeat center;
background-size: 100% 100%;
}
.treatmentUl li .headLine13 {
margin-bottom: 1.1rem;
}
.treatmentUl li .photo {
margin-bottom: 3.2rem;
border-radius: 1rem;
overflow: hidden;
}
.treatmentUl li .photo img {
width: 100%;
}
.treatmentUl li .comLink03 {
margin: 0 1rem;
}
.treatmentUl li .comLink03 a {
padding-left: 2.5rem;
min-width: 100%;
font-size: 1.8rem;
min-height: 5rem;
}
.treatmentUl li .comLink03.link a {
padding-left: 2rem;
padding-right: 4rem;
}
.treatmentUl li .comLink03 .arrow-circle {
right: 2rem;
}
@media all and (max-width: 896px) {
.treatmentUl {
margin-bottom: 3.2rem;
display: block;
}
.treatmentUl li {
width: auto;
margin-bottom: 1.6rem;
padding: 2.5rem 2.5rem 3.5rem;
}
.treatmentUl li:last-child {
margin-bottom: 0;
}
.treatmentUl li .headLine13 {
font-size: 2.3rem;
}
.treatmentUl li .photo {
margin-bottom: 1.6rem;
aspect-ratio: 580 / 350;
border-radius: 0.8rem;
position: relative;
}
.treatmentUl li .photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.treatmentUl li .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
font-size: 1.5rem;
padding-left: 2.5rem;
}
.treatmentUl li .comLink03 .arrow-circle {
right: 2rem;
}
}
/* - - headLine09 - -*/
.headLine09 {
padding-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6.4rem;
max-width: 62.8rem;
min-height: 11rem;
font-size: 3.2rem;
color: #595757;
letter-spacing: 0.04em;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg01.png) no-repeat center;
background-size: 100% auto;
}
.headLine09 .icon {
margin: 0 1.5rem -1rem 0;
}
@media all and (max-width: 896px) {
.headLine09 {
max-width: 31.6rem;
margin: 0 auto 3.1rem;
font-size: 1.7rem;
background-size: 100% 100%;
min-height: 5.5rem;
}
.headLine09 .icon {
margin: -0.4rem 1rem -1rem 0;
width: 1.4rem;
}
}
/* - - comTtlBox - -*/
.comTtlBox {
margin-bottom: 4rem;
padding: 1.7rem 2rem;
border-bottom: 2px solid #4F96F5;
border-top: 2px solid #4F96F5;
}
@media all and (max-width: 896px) {
.comTtlBox {
margin-bottom: 2rem;
padding: 0.7rem 0.5rem 0.8rem;
border-width: 1px;
}
}
/* - - headLine10 - -*/
.headLine10 {
display: flex;
align-items: stretch;
justify-content: space-between;
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
}
.headLine10 .lSpan {
margin: -0.2rem 2.5rem 0 0;
padding-bottom: 0.4rem;
width: 12.4rem;
flex-shrink: 0;
font-size: 2.6rem;
font-weight: 400;
color: #4f96f5;
line-height: 1;
border-right: 4px solid #EDECE4;
}
.headLine10 .lSpan .num {
font-size: 5rem;
}
.headLine10 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine10 {
font-size: 1.7rem;
}
.headLine10 .lSpan {
margin: 0 1.5rem 0 0;
width: 7.0rem;
border-width: 2px;
font-size: 1.5rem;
}
.headLine10 .lSpan .num {
line-height: 0.8;
font-size: 3rem;
}
.headLine10 .rSpan {
line-height: 1.3;
padding: 0.2rem 0;
}
}
/* - - headLine11 - -*/
.headLine11 {
margin-bottom: 2.2rem;
font-size: 2.6rem;
font-weight: 700;
text-align: center;
color: #595757;
padding: 0.6rem 1rem 1.2rem;
border: 1px solid #4F96F5;
border-radius: 1rem;
}
@media all and (max-width: 896px) {
.headLine11 {
margin-bottom: 1.8rem;
padding: 0.3rem 1rem 0.4rem;
border-radius: 0.5rem;
font-size: 1.7rem;
}
}
/* - - headLine12 - -*/
.headLine12 {
margin-bottom: 5rem;
padding: 1rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
background-color: #A1C6F6;
border-radius: 1rem;
text-align: center;
}
@media all and (max-width: 896px) {
.headLine12 {
margin-bottom: 2rem;
font-size: 1.7rem;
border-radius: 0.5rem;
padding: 0.2rem 0.5rem;
}
}
/* - - headLine13 - -*/
.headLine13 {
margin-bottom: 2.1rem;
font-size: 2.6rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.headLine13 {
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
}
/* - - headLine14 - -*/
.headLine14 {
padding: 0.8rem 4rem 1.1rem 2rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
background: #EDECE4;
position: relative;
}
.headLine14:before,
.headLine14:after {
position: absolute;
right: 2.5rem;
top: calc(50% - 0.3rem);
width: 1.2rem;
height: 2px;
background-color: rgb(89, 87, 87);
-webkit-transition: all .3s ease;
transition: all .3s ease;
content: "";
}
.headLine14:after {
transform: rotate(90deg);
}
.headLine14.on:after {
transform: rotate(180deg);
opacity: 0;
}
.headLine14-2 {
padding: 0 !important;
}
.headLine14 a {
display: block;
padding: 0.8rem 4rem 1.1rem 2rem;
}
.headLine14 a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.headLine14 {
padding: 0.4rem 2.5rem 0.5rem 1rem;
font-size: 1.4rem;
letter-spacing: 0.02em;
}
.headLine14::before, .headLine14::after {
right: 1.5rem;
width: 0.7rem;
height: 1px;
top: calc(50% + 0rem);
}
.headLine14 a {
padding: 0.4rem 2.5rem 0.5rem 1rem;
}
}
/* - - headLine15 - -*/
.headLine15 {
color: #323131;
margin-bottom: 2.5rem;
font-size: 6.6rem;
line-height: 1;
letter-spacing: 0.04em;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9);
}
@media all and (max-width: 896px) {
.headLine15 {
margin-bottom: 1.3rem;
font-size: 2.9rem;
letter-spacing: 0.02em;
}
}
/* - - headLine16 - -*/
.headLine16 {
margin-bottom: 1.4rem;
font-size: 2.6rem;
color: #62a2f8;
text-align: center;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.headLine16 {
margin-bottom: 1.6rem;
font-size: 2.3rem;
line-height: 1.22;
}
}
/* - - headLine17 - -*/
.headLine17 {
margin-bottom: 3rem;
padding: 0 1.0rem 1.2rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
border-bottom: 1px solid #A49972;
}
.headLine17 .lSpan {
padding-top: 1rem;
font-size: 2.6rem;
font-weight: 400;
color: #62a2f8;
line-height: 1;
flex-shrink: 0;
width: 10rem;
background: url(img/common/img07.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.headLine17 .lSpan .num {
font-size: 5rem;
}
.headLine17 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine17 {
margin-bottom: 1.7rem;
font-size: 1.8rem;
padding: 0 0 0.2rem;
}
.headLine17 .lSpan {
width: 6.4rem;
white-space: nowrap;
font-size: 1.7rem;
padding-top: 0.6rem;
background-position: left 0.2rem top;
background-size: 3.5rem auto;
}
.headLine17 .lSpan .num {
font-size: 3.3rem;
}
}
/* - - headLine18 - -*/
.headLine18 {
font-size: 2.6rem;
color: #62a2f8;
letter-spacing: 0.04em;
font-weight: 700;
margin: 0 1rem 2.7rem;
}
@media all and (max-width: 896px) {
.headLine18 {
margin: 0 0.5rem 1rem;
font-size: 1.7rem;
}
}
/* - - headLine19 - -*/
.headLine19 {
margin-bottom: 4.8rem;
font-size: 3.6rem;
color: #62a2f8;
letter-spacing: 0.04em;
text-align: center;
}
@media all and (max-width: 896px) {
.headLine19 {
margin-bottom: 2rem;
font-size: 2.3rem;
}
}
/* - - headLine20 - -*/
.headLine20 {
margin-bottom: 2rem;
font-size: 2.2rem;
color: #595757;
display: flex;
align-items: flex-start;
}
.headLine20 .columnsImg {
flex-shrink: 0;
width: 3rem;
margin: 0.5rem 0.5rem 0 0;
}
@media all and (max-width: 896px) {
.headLine20 {
margin-bottom: 1.7rem;
font-size: 1.7rem;
}
.headLine20 .columnsImg {
width: 2.6rem;
margin-top: 0.1rem;
}
}
/* - - headLine21 - -*/
.headLine21 {
padding: 0 0 1.5rem;
margin: 3rem 0 3rem;
font-size: 2.2rem;
color: #4f96f5;
letter-spacing: 0.04em;
border-bottom: 1px solid currentColor;
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
.headLine21 {
padding: 0 0 0.7rem;
margin: 3rem 0;
line-height: 1.2;
}
}
/* - - headLine22 - -*/
.headLine22 {
margin: 4rem 0;
padding: 0 0 0.5rem 1rem;
font-family: "Shippori Mincho B1", serif;
font-size: 2rem;
color: #595757;
border-left: 3px solid currentColor;
}
@media all and (max-width: 896px) {
.headLine22 {
margin: 3rem 0;
}
}
/* - - headLine23 - -*/
.headLine23 {
background-color: #F2F7FF;
border-radius: 1rem;
padding: 1rem 2rem;
font-size: 1.8rem;
margin: 4rem 0;
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
}
/* - - greeting - -*/
.greeting {
padding: 10.5rem 0 9rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01.jpg ) no-repeat center;
background-size: 100% 100%;
}
.greeting .content {
flex-wrap: nowrap;
align-items: flex-start;
}
.greeting .photoBox {
width: 53.3%;
margin-right: -7.4rem;
}
.greeting .photoBox img {
width: 100%;
}
.greeting .textBox {
margin-top: 10.7rem;
flex: 1;
order: 1;
position: relative;
z-index: 5;
padding: 7rem 7.5rem 4.4rem;
padding-inline-end: 5rem;
background-image: linear-gradient( -90deg, rgb(221,236,255,0.8) 1%, rgb(231,241,253,0.8) 40%, rgb(240,245,251,0.8) 100%);
}
.greeting .textBox .comEn02 {
position: absolute;
top: -6.2rem;
left: 8rem;
/* font-size: 12rem; */
}
.greeting .headLine03 {
margin-bottom: 1.5rem;
}
.greeting p {
margin-bottom: 2.4rem;
line-height: 1.76;
}
.greeting .ttl {
margin-bottom: 1.2rem;
}
.greeting .ttl img {
vertical-align: -0.2rem;
width: 4.1rem;
margin-left: 0.5rem;
}
.greeting .comLink03 a {
min-height: 5rem;
font-size: 1.8rem;
min-width: 28rem;
padding: 0 5rem 0 2.5rem;
}
.greeting .comLink03 .arrow-circle {
right: 2.5rem;
}
@media all and (max-width: 896px) {
.greeting {
padding: 7.4rem 0 5.3rem;
}
.greeting .content {
display: block;
}
.greeting .textBox {
padding: 4.1rem 2.0rem 3.1rem 2.7rem;
margin: 0 -1.75rem 0 -0.2rem;
}
.greeting .photoBox {
width: auto;
margin: -4.7rem 2.2rem 0 -1.75rem;
}
.greeting p {
margin-bottom: 2rem;
line-height: 1.43;
}
.greeting .headLine03 {
margin-bottom: 1.2rem;
font-size: 1.7rem;
}
.greeting .textBox .comEn02 {
font-size: 7rem;
top: -3.7rem;
left: 2.4rem;
}
.greeting .comLink03 {
margin-left: -0.5rem;
}
.greeting .comLink03 a {
min-height: 4.5rem;
min-width: 28rem;
font-size: 1.5rem;
}
}
/* - - contactWrap - -*/
.contactWrap {
margin-bottom: 9rem;
}
@media all and (max-width: 896px) {
.contactWrap {
margin-bottom: 4.3rem;
}
}
/* - - contactInner - -*/
.contactInner {
margin: -0.6rem auto 5.5rem;
padding: 3rem 2rem 1.5rem;
text-align: center;
max-width: 58rem;
border: 1px solid #DBD2AE;
border-radius: 1rem;
}
.contactInner .ttl {
font-size: 2.55rem;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.0;
margin-bottom: 0.6rem;
color: #595757;
}
.contactInner .tel {
width: fit-content;
margin: 0 auto 1rem;
font-size: 1.6rem;
font-weight: 500;
color: #262626;
padding-left: 8.5rem;
text-align: left;
background: url(img/common/tel02.png) no-repeat left center;
background-size: 6.8rem auto;
}
.contactInner .tel a {
font-size: 4.8rem;
line-height: 1.2;
font-weight: 400;
color: #86753b;
letter-spacing: 0.03em;
}
.contactInner .tel a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.contactInner {
margin: -0.6rem auto 4.6rem;
padding: 1.8rem 2rem 0.5rem;
border-radius: 0.5rem;
max-width: inherit;
}
.contactInner .ttl {
margin-bottom: 0.3rem;
font-size: 1.5rem;
}
.contactInner .tel {
font-size: 0.94rem;
padding-left: 5rem;
background-size: 4rem auto;
}
.contactInner .tel a{
font-size: 2.8rem;
}
}
/* - - contactHead - -*/
.contactHead {
margin-bottom: 1.8rem;
display: flex;
align-items: flex-end;
justify-content: center;
}
.contactHead .lBox {
text-align: center;
}
.contactHead .hTtl {
font-size: 4rem;
margin-bottom: 0.5rem;
color: #595757;
letter-spacing: 0.04em;
font-weight: 700;
}
.contactHead .lBox p {
font-size: 3rem;
color: #99bff2;
font-weight: 400;
}
.contactHead .txtBox {
margin: 0 0 0.8rem 3rem;
display: flex;
align-items: center;
justify-content: center;
width: 13.2rem;
height: 13rem;
background: url(img/contact/bg01.png) no-repeat center;
background-size: 100% auto;
}
.contactHead .txtBox p {
font-size: 2.6rem;
color: #fff;
line-height: 1.1;
text-align: center;
font-weight: 500;
letter-spacing: 0.04em;
}
.contactHead .txtBox p .num {
font-size: 3.6rem;
}
@media all and (max-width: 896px) {
.contactHead .hTtl {
margin-bottom: 0;
font-size: 2.2rem;
}
.contactHead .lBox p {
font-size: 1.7rem;
}
.contactHead .txtBox {
position: absolute;
top: -1.6rem;
left: calc(50% + 4.4rem);
margin-bottom: 0;
width: 7.6rem;
height: 7.5rem;
}
.contactHead .txtBox p {
font-size: 1.5rem;
}
.contactHead .txtBox p .num{
font-size: 2.1rem;
}
.contactHead {
width: fit-content;
margin: 0 auto 3.7rem;
position: relative;
}
}
/* - - contactDl - -*/
.contactDl {
box-sizing: content-box;
max-width: 78rem;
padding-right: 8.5rem;
margin: 0 auto 1rem;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.contactDl dt {
width: 20rem;
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
letter-spacing: 0.04em;
padding: 2.4rem 0.2rem 2.6rem 0;
border-bottom: 1px solid #E9E9E9;
}
.contactDl dt p {
display: flex;
align-items: center;
}
.contactDl .dtStyle p {
align-self: flex-start;
}
.contactDl dt .any,
.contactDl dt .must {
width: 4.5rem;
text-align: center;
color: #fff;
font-size: 1.5rem;
letter-spacing: 0.04em;
margin-right: 1rem;
font-weight: 400;
margin-top: 0.2rem;
padding-bottom: 0.2rem;
background-color: #F96883;
}
.contactDl dt .any {
background-color: #B0B0B0;
}
.contactDl dd {
padding: 2.6rem 0 2.6rem 0;
font-size: 1.8rem;
letter-spacing: 0.02em;
width: calc(100% - 20rem);
border-bottom: 1px solid #E9E9E9;
}
.contactDl dd .other {
margin-top: 2rem;
}
.contactDl dd .ttl,
.contactDl dd .dateBtn input {
margin-bottom: 2rem;
max-width: 23rem;
border: 1px solid rgb(164, 164, 164);
border-radius: 0.6rem;
text-align: center;
min-height: 6rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 2rem;
font-size: 1.8rem;
letter-spacing: 0;
cursor: pointer;
}
.contactDl dd .ttl:last-of-type {
margin-bottom: 0;
}
.contactDl dd .ttl:last-child {
margin-bottom: 0;
}
.contactDl .dateBox {
display: none;
}
.step2 .contactDl .dateBox.show {
display: block;
}
.contactDl .dtStyle2 {
padding-top: 3.5rem;
}
.contactDl dt:last-of-type,
.contactDl dd:last-of-type {
border: none;
}
@media all and (max-width: 896px) {
.contactDl {
margin-bottom: 2rem;
max-width: inherit;
padding: 0;
display: block;
}
.contactDl dt {
width: auto;
border: none;
padding: 0 0 0.8rem !important;
font-size: 1.4rem;
}
.contactDl dt .any, .contactDl dt .must {
font-size: 1.3rem;
margin-right: 0.8rem;
padding-block: 0.2rem 0.3rem;
}
.contactDl dd {
margin-bottom: 1.4rem;
width: auto;
padding: 0 0 2rem;
font-size: 1.4rem;
}
.contactDl dd .dateBtn input,
.contactDl dd .ttl {
margin-bottom: 1.1rem;
max-width: 16.75rem;
min-height: 5rem;
font-size: 1.4rem;
border-radius: 0.3rem;
}
.contactDl dd:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
/* - - input textarea - -*/
textarea,
input[type="email"],
input[type="tel"],
input[type="text"] {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
border-radius: 0.6rem;
height: 6rem;
color: #000;
border: 1px solid rgb(164, 164, 164);
box-sizing: border-box;
font-size: 1.6rem;
padding: 0 2.5rem;
width: 100%;
letter-spacing: 0.04em;
background-color: #fff;
}
textarea {
margin-top: 2rem;
height: 10rem;
resize: vertical;
padding-block: 1.3rem;
}
textarea:first-child {
margin-top: 0;
}
.wid01[type="text"] {
width: 10rem;
margin-right: 1.3rem;
}
@media all and (max-width: 896px) {
textarea, input[type="email"], input[type="tel"], input[type="text"] {
height: 5rem;
font-size: 1.4rem;
border-radius: 0.3rem;
padding: 0 1.7rem;
}
textarea {
margin-top: 1.6rem;
height: 8.1rem;
padding-block: 1rem;
}
textarea[name="fnote"] {
height: 13.3rem;
}
}
/* - - radio - -*/
input[type="radio"] {
display: none;
}
input[type="radio"] ~ span {
background: url(img/common/radio01.png) no-repeat left center;
background-size: 3rem auto;
border-radius: 0;
display: inline-block;
line-height: 2rem;
cursor: pointer;
padding: 0.8rem 0 0.8rem 4rem;
}
input[type="radio"]:checked ~ span {
background-image: url("img/common/radio02.png");
}
@media all and (max-width: 896px) {
input[type="radio"] ~ span{
font-size: 1.4rem;
padding-left: 3.2rem;
background-size: 2.4rem auto;
}
}
/* - - radioUl - -*/
.radioUl {
margin: -0.7rem 0 -0.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem 4.5rem;
}
.radioUl .wpcf7-form-control-wrap {
display: block;
}
.radioUl .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: 1rem 4.5rem;
}
.radioUl .wpcf7-list-item {
margin-left: 0;
}
@media all and (max-width: 896px) {
.radioUl {
margin: 0 0 -1rem;
}
.radioUl .wpcf7-radio {
gap: 1rem 3.6rem;
}
}
/* - - radioUl02 - -*/
.radioUl02 {
margin-bottom: 2.9rem;
gap: 1rem;
}
.radioUl02 .wpcf7-radio {
gap: 1rem;
}
.radioUl02 input[type="radio"] ~ span {
background: none;
padding: 0;
width: 10rem;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
border: 1px solid rgb(164, 164, 164);
border-radius: 0.6rem;
}
.radioUl02 input[type="radio"]:checked ~ span {
background: #BFEDE6;
}
@media all and (max-width: 896px) {
.radioUl02 {
margin-bottom: 1.9rem;
}
.radioUl02 li {
width: calc((100% - (0.8rem * 3)) / 4);
}
.radioUl02 .wpcf7-radio {
gap: 0.8rem;
}
.radioUl02 .wpcf7-list-item {
width: calc((100% - (0.8rem * 3)) / 4);
}
.radioUl02 input[type="radio"] ~ span {
width: 100%;
height: 5rem;
font-size: 1.4rem;
border-radius: 0.3rem;
}
}
/* - - privacyBox - -*/
.privacyBox {
max-width: 78.5rem;
padding-right: 9.5rem;
margin: 0 auto 2.3rem;
box-sizing: content-box;
}
.privacyBox .sub {
padding: 1.3rem 3.5rem;
height: 12.5rem;
overflow-y: scroll;
border-radius: 0.6rem;
border: 1px solid rgb(164, 164, 164);
}
.privacyBox p {
font-size: 1.5rem;
letter-spacing: 0.04em;
line-height: 1.733;
}
.privacyBox p .txtSpan {
font-size: 1.6rem;
margin-bottom: 0.8rem;
display: block;
}
@media all and (max-width: 896px) {
.privacyBox {
max-width: inherit;
padding: 0;
}
.privacyBox .sub{
padding: 1.3rem 1.5rem;
border-radius: 0.3rem;
height: 10.2rem;
}
.privacyBox p {
font-size: 1.2rem;
line-height: 1.5;
}
.privacyBox p .txtSpan{
font-size: 1.4rem;
margin-bottom: 0.3rem;
}
}
/* - - checkText - -*/
.checkText {
margin-bottom: 4.8rem;
text-align: center;
}
.checkText .wpcf7-list-item {
position: relative;
margin-left: 0;
}
.checkText a {
text-decoration: underline;
text-underline-offset: 6px;
}
.checkText a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.checkText {
margin-bottom: 3.5rem;
}
}
/* - - checkbox - -*/
input[type="checkbox"] {
opacity: 0;
position: absolute;
left: 0;
top: 0.4rem;
margin: 0;
width: 2.8rem;
height: 2.8rem;
}
input[type="checkbox"] ~ span {
background: url(img/common/check01.png) no-repeat left center;
background-size: 2.8rem auto;
border-radius: 0;
display: inline-block;
line-height: 2rem;
cursor: pointer;
font-size: 1.5rem;
letter-spacing: 0.02em;
padding: 0.8rem 0 0.8rem 3.5rem;
}
input[type="checkbox"]:checked ~ span {
background-image: url("img/common/check02.png");
}
@media all and (max-width: 896px) {
input[type="checkbox"] ~ span {
font-size: 1.3rem;
padding-left: 3.5rem;
padding-top: 0.6rem;
background-size: 2.3rem auto;
}
}
/* - - submit - -*/
.submit {
position: relative;
text-align: center;
}
.submit li {
margin: 0 1rem;
display: inline-block;
}
.submit li input {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
width: 26rem;
height: 6rem;
border-radius: 6rem;
text-align: center;
cursor: pointer;
font-size: 2.2rem;
font-weight: 700;
color: #fff;
border: none;
letter-spacing: 0.04em;
background: #62A2F8;
}
.submit li .wpcf7c-btn-back {
color: #fff;
background-color: #CACACA;
}
.submit li.disabled input {
filter: grayscale(100%);
pointer-events: none;
}
.submit .wpcf7-spinner {
position: absolute;
bottom: -4rem;
margin: 0;
left: calc(50% - 2rem);
transform: translateX(50%);
}
.submit li input:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.submit li {
margin: 0 0.4rem;
}
.submit li input{
width: 19.4rem;
height: 4.5rem;
font-size: 1.5rem;
}
.submit {
position: relative;
}
}
/* - - thanksWrap - -*/
.thanksWrap {
padding: 2.4rem 0 14rem;
text-align: center;
}
.thanksWrap p {
letter-spacing: 0.04em;
line-height: 2.12;
}
@media all and (max-width: 896px) {
.thanksWrap {
padding: 0.2rem 0 12.8rem;
}
.thanksWrap p {
line-height: 1.64;
}
}
/* - - confirmed - -*/
.confirmed dd span:not(.fage) {
display: block;
}
.confirmed .inner {
display: none;
}
.confirmed .confirmTxt {
text-align: center;
letter-spacing: 0.04em;
margin-bottom: 6rem;
padding-top: 5rem;
}
.confirmed .contactDl {
padding-right: 0;
}
.confirmed .contactDl dd p {
margin-bottom: 1rem;
}
@media all and (min-width: 897px) {
.confirmed .contactDl dt {
padding-top: 2.6rem;
}
.confirmed .contactDl .dtStyle2 {
padding-top: 2.6rem;
}
}
@media all and (max-width: 896px) {
.confirmed .confirmTxt {
margin: -1.5rem 0 3.5rem;
padding-top: 0;
}
.confirmed .submit li input {
width: 15rem;
}
.confirmed .contactDl dd p {
margin-bottom: 0.2rem;
}
.formError {
left: 0 !important;
}
}
/* - - comheading01 - -*/
.comheading01 {
text-align: center;
}
.comheading01 .en {
margin-bottom: -0.3rem;
display: block;
font-size: 10rem;
color: #99bff2;
line-height: 1;
}
.comheading01.mbSml .headLine03 {
margin-bottom: 4.9rem;
}
@media all and (max-width: 896px) {
.comheading01 .en {
margin-bottom: -1.2rem;
font-size: 6rem;
}
.comheading01 .en02 {
margin-bottom: 0;
}
.comheading01.mbSml .headLine03 {
margin-bottom: 2.8rem;
}
}
/* - - comheading02 - -*/
.comheading02 {
margin: 0 0 2.3rem;
text-align: left;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.comheading02 .photo {
margin-right: 0.6rem;
flex-shrink: 0;
}
@media all and (max-width: 896px) {
.comheading02 {
margin: 0 0 1.2rem 3rem;
}
.comheading02 .photo {
margin-right: 1.1rem;
width: 5rem;
}
}
/*------リバイブナビ--end--*/
/*------リバイブナビ--end--*/
/*------リバイブナビ--end--*/
/*------------------------------------------------------------
index highBridge
------------------------------------------------------------*/
/* - - mainVisual - -*/
.mainVisual {
/* margin-bottom: 2.4rem; */
/* margin-top: calc(11.5rem - var(--wp-admin--admin-bar--height)); */
/* margin-top: 11.5rem; */
padding: 3rem 2rem 0.8rem;
position: relative;
color: #353535;
overflow: hidden;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_img.jpg) no-repeat center top / auto 100% ,#dde9f4;
}
.mainVisual .praise {
width: 20rem;
aspect-ratio: 1;
padding: 3.5rem 0;
position: absolute;
right: calc(50% - 1.6rem);
top: 1.6rem;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_bg01.png) no-repeat center top / 100%;
}
.mainVisual .praise .text {
color: #FFF;
font-size: 1.8rem;
line-height: 1.3;
}
.mainVisual .praise .star {
color: #eae860;
font-size: 2.092rem;
letter-spacing: 0.15rem;
margin-top: 0.35rem;
}
.mainVisual .praise .num {
/* margin: -1.3rem 0 -0.9rem; */
margin: 0rem 0 -0.9rem;
color: #eae860;
font-size: 3.693rem;
font-style: italic;
font-weight: bold;
}
.mainVisual .textBox01 {
margin-left: 50%;
}
.mainVisual p {
margin-bottom: 0;
}
.mainVisual .textBox01 .inner {
margin-left: 3.2rem;
/* max-width: 46.5rem; */
max-width: 60.5rem;
}
.mainVisual .imgBox {
display: flex;
justify-content: space-between;
}
.mainVisual .text01 .color {
margin: 0 -0.2rem 0;
padding: 0 0.4rem;
width: fit-content;
display: block;
color: #1b8bff;
font-size: 3rem;
font-weight: bold;
border-bottom: 0.1rem solid currentColor;
line-height: 1.25;
}
.mainVisual .text01 .shippori {
display: block;
font-size: 3.6rem;
font-weight: bold;
letter-spacing: -0.3rem;
line-height: 1.4;
}
.mainVisual .photo {
margin: -1rem -1rem 0 0;
width: 16.8rem;
}
.mainVisual .head01 {
margin-bottom: 1.1rem;
color: #c49133;
font-size: 5.6rem;
line-height: 1.25;
letter-spacing: -0.5rem;
font-weight: 600;
}
.mainVisual .head01 small {
font-size: 4.8rem;
color: #353535;
}
.mainVisual .head02 {
/* margin: 0 0 -2.5rem -0.2rem; */
margin: 0 0 3.0rem -0.2rem;
padding: 0rem 1rem 0.8rem;
color: #FFF;
font-weight: 600;
font-size: 3.9rem;
background-color: #353535;
letter-spacing: -0.55rem;
line-height: 0.9;
}
.mainVisual .head03 {
/* margin: 0 -1rem -0.4rem 0; */
/* margin: 0 2rem -0.4rem 0; */
margin-top: 4rem;
margin-bottom: 5rem;
width:fit-content;
/* font-size: 11rem; */
font-size: 9rem;
/* letter-spacing: 0.7rem; */
/* color: #353535; */
color: #62a2f8;
-webkit-background-clip:text;
/* -webkit-text-fill-color:transparent;
background-image: linear-gradient(171deg, #353535 0%, #353535 64%, #62a2f8 65%,#62a2f8 100%); */
}
.mainVisual .features {
margin-bottom: 0.8rem;
display: flex;
gap: 0.5rem;
}
.mainVisual .features li {
width: 15rem;
aspect-ratio: 1;
padding: 2.8rem 0 1rem;
color: #FFF;
text-align: center;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.1;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_bg02.png) no-repeat center top / 100%;
}
.mainVisual .features .bigText {
display: block;
color: #e5cd7b;
font-size: 2.521rem;
font-family: "Shippori Mincho B1", serif;
}
.mainVisual .features .fs01 {
font-size: 4rem;
}
.mainVisual .features .fs02 {
font-size: 2.8rem;
}
.mainVisual .features .fs03 {
display: block;
margin-top: 0.5rem;
font-size: 2.8rem;
transform: scaleY(1.1);
}
.mainVisual .features .fs04 {
font-size: 1.8rem;
}
.mainVisual .features sup {
font-size: 1rem;
vertical-align: 1.5rem;
}
.mainVisual .note {
margin: 0 1.5rem 0;
color: #353535;
font-size: 1.1rem;
text-align: right;
}
.mainVisual .textBox02 {
position: absolute;
right: calc(50% + 4rem);
bottom: 4.7rem;
width: 50.1rem;
}
.mainVisual .text02 {
margin: 0 3rem 0 0;
font-size: 2.8rem;
color: #fff;
letter-spacing: -0.2rem;
line-height: 1.3;
text-align: center;
background: -webkit-linear-gradient( 0deg, rgb(203,155,52) 0%, rgb(221,182,99) 40%, rgb(209,164,75) 63%, rgb(196,145,51) 89%);
}
.mainVisual .text03 {
margin: 0.6rem 0 0 3rem;
padding: 1.2rem 0.1rem 0.7rem;
font-weight: bold;
font-size: 2.6rem;
line-height: 4rem;
text-align: center;
letter-spacing: -0.2rem;
background-color: #FFF;
}
.mainVisual .text03 .subSpan {
vertical-align: 0.18rem;
}
.mainVisual .text03 .dotTxt {
vertical-align: 0.1rem;
color: #c49133;
display: inline-block;
position: relative;
height: 4rem;
vertical-align: 0.3rem;
}
.mainVisual .text03 .dotTxt.big {
font-size: 3.2rem;
}
.mainVisual .text03 .dotTxt::before {
position: absolute;
left: 0;
top: -1.3rem;
content: '・';
font-size: 2.6rem;
line-height: 10px;
width: 100%;
text-align: center;
}
.mainVisual .text03 .dotTxt.big::before {
top: -1rem;
}
.mainVisual .text03 .fs {
font-size: 3.6rem;
}
.mainVisual .text03 .red {
vertical-align: -2px;
margin-left: 0.2rem;
color: #f31a43;
font-size: 4rem;
letter-spacing: -0.1rem;
}
.mainVisual .text03 .red .num {
font-size: 6rem;
}
@media all and (max-width: 896px) {
.mainVisual {
margin-bottom: 1.4rem;
padding: 0;
margin-top: calc(5.05rem - var(--wp-admin--admin-bar--height));
margin-top: 5.05rem;
background: none;
}
.mainVisual .imgBox {
margin-bottom: 1.8rem;
position: relative;
}
.mainVisual .photo {
}
.mainVisual .textBox01 {
padding: 3.2rem 2rem 0.7rem;
margin: 0 0 2.6rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/mv_img_sp.jpg) no-repeat center bottom / cover;
}
.mainVisual .textBox01 .inner {
max-width: inherit;
margin-left: 0;
}
.mainVisual .text01 .color {
position: relative;
font-size: 1.86rem;
}
.mainVisual .text01 .color .photo {
position: absolute;
top: -2.3rem;
width: 5rem;
height: 5rem;
border-radius: 100%;
left: calc(100%);
margin: 0;
}
.mainVisual .text01 .color .photo img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
}
.mainVisual .text01 .shippori {
font-size: 2.238rem;
letter-spacing: -0.2rem;
}
.mainVisual .praise {
padding: 2.1rem 1rem;
right: 1rem;
width: 12.5rem;
top: 1.3rem;
}
.mainVisual .praise .text {
font-size: 1.136rem;
}
.mainVisual .praise .star {
/* margin-bottom: 0.5rem; */
font-size: 1.32rem;
letter-spacing: 0;
}
.mainVisual .praise .num {
margin-bottom: -0.4rem;
font-size: 2.33rem;
}
.mainVisual .head01 {
margin-bottom: 0.6rem;
font-size: 3rem;
letter-spacing: -0.25rem;
}
.mainVisual .head01 small {
color: #353535;
font-size: 2.5rem;
}
.mainVisual .head02 {
margin-bottom: -1.5rem;
padding: 0 1rem 0.5rem 0.5rem;
width: fit-content;
font-size: 2.42rem;
letter-spacing: -0.35rem;
}
.mainVisual .head03 {
margin-bottom: 71vw;
font-size: 6.83rem;
/* letter-spacing: 0.5rem; */
}
.mainVisual .features {
margin-bottom: 0.5rem;
justify-content: center;
gap: 0.3rem;
}
.mainVisual .features li {
padding: 1.7rem 0 1rem;
width: 10rem;
font-size: 1.3rem;
}
.mainVisual .textBox02 {
position: static;
}
.mainVisual .features .bigText {
font-size: 1.67rem;
}
.mainVisual .features .fs01 {
font-size: 2.79rem;
}
.mainVisual .features .spFs01 {
font-size: 2.65rem;
}
.mainVisual .features .fs02 {
font-size: 1.86rem;
}
.mainVisual .features .fs03 {
font-size: 1.86rem;
}
.mainVisual .features .fs04 {
font-size: 1.195rem;
}
.mainVisual .features sup {
font-size: 0.6rem;
vertical-align: 1.1rem;
}
.mainVisual .note {
font-size: 0.65rem;
margin: 0;
}
.mainVisual .textBox02 {
margin: 0 1.7rem;
width: auto;
}
.mainVisual .text02 {
margin: 0;
font-size: 1.9rem;
}
.mainVisual .text03 {
padding: 0.6rem 0.1rem 0.5rem;
margin: 0;
font-size: 1.85rem;
}
.mainVisual .text03 .dotTxt.big {
font-size: 2.278rem;
}
.mainVisual .text03 .fs {
font-size: 2.56rem;
}
.mainVisual .text03 .red .num {
font-size: 4.271rem;
}
.mainVisual .text03 .red {
font-size: 2.847rem;
}
.mainVisual .text03 .dotTxt::before {
font-size: 1.85rem;
top: -0.5rem;
}
.mainVisual .text03 .dotTxt.big::before {
top: -0.4rem;
}
}
.shippori {
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
.pc {
display: none !important;
}
}
.contenth {
max-width: 112rem;
margin: 0px auto;
padding: 0px 2rem;
}
media (max-width: 896px) {
.contenth {
padding: 0px 1.75rem;
}
}
/* - - headLine15 - -*/
.headLine15 {
color: #323131;
margin-bottom: 2.5rem;
font-size: 6.6rem;
line-height: 1;
letter-spacing: 0.04em;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9);
}
@media all and (max-width: 896px) {
.headLine15 {
margin-bottom: 1.3rem;
font-size: 2.9rem;
letter-spacing: 0.02em;
}
}
/* - - disease - -*/
.disease {
text-align: center;
margin-bottom: -0.2rem;
padding: 9.4rem 0 10.5rem;
position: relative;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/disease_bg.jpg) no-repeat no-repeat center bottom;
background-size: cover;
}
.disease .content {
position: relative;
}
.disease .bigPhoto {
width: 30.8rem;
position: absolute;
bottom: -8.6rem;
right: 6.2rem;
}
.diseaseImg {
margin-bottom: 3.5rem;
}
.diseaseImg img {
width: 4.4rem;
}
.disease .ttl {
font-size: 4.22rem;
color: #f7e972;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1;
width: fit-content;
margin: 0 auto 3rem;
padding: 0.5rem 2rem 1rem;
background-color: #323131;
}
.disease .txt {
margin-bottom: 0;
font-size: 3.4rem;
font-weight: 700;
color: #323131;
line-height: 1.4;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(255,255,255,0.9),0.3rem -0.3rem 0.7rem rgba(255,255,255,0.9),-0.3rem 0.3rem 0.7rem rgba(255,255,255,0.9),-0.3rem -0.3rem 0.7rem rgba(255,255,255,0.9);
}
.disease .txt .blue {
color: #4f96f5;
font-size: 4.4rem;
}
.disease .txtSpan {
font-size: 4.6rem;
color: #f31a43;
width: fit-content;
position: relative;
margin: 0.5rem auto 0;
line-height: 1.25;
padding-inline: 1.5rem;
letter-spacing: -0.1em;
display: inline-block;
border-bottom: 1px solid currentColor;
}
.disease .txtSpan:after {
width: 100%;
height: 1px;
background-color: #f31a43;
position: absolute;
bottom: -0.5rem;
left: 0;
content: "";
}
@media all and (max-width: 896px) {
.disease {
margin-bottom: 3.8rem;
padding: 5.5rem 0 5rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/disease_bg_sp.jpg);
background-position: center;
}
.diseaseImg {
margin-bottom: 1rem;
}
.diseaseImg img {
width: 3.3rem;
}
.disease .ttl {
font-size: 2.1rem;
width: auto;
margin: 0 0 4rem;
letter-spacing: -0.02em;
padding: 0.4rem 1.5rem 0.4rem;
}
.disease .txt {
font-size: 1.7rem;
text-align: left;
line-height: 1.3;
width: fit-content;
}
.disease .txt .blue {
font-size: 2.2rem;
}
.disease .txtSpan {
font-size: 2.3rem;
border: none;
}
.disease .txtSpan::after {
display: none;
border: none;
}
.disease .subTxt {
display: inline-block;
text-align: center;
}
.disease .bigPhoto {
bottom: -7.1rem;
width: 18.8rem;
right: 0rem;
}
}
@media (min-width: 897px) {
.sp {
display: none !important;
}
}
/* - - snsLinkUl - -*/
.snsLinkUl {
margin-bottom: 11.3rem;
gap: 2rem 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.snsLinkUl li {
width: 33rem;
text-align: center;
}
.snsLinkUl li .ttl {
padding: 0 1rem 0.3rem;
font-size: 2rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
width: fit-content;
margin: 0 auto 0.5rem;
position: relative;
}
.snsLinkUl li .ttl::before {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
left: 0;
bottom: 0.5rem;
transform: rotate(-30deg);
content: "";
}
.snsLinkUl li .ttl::after {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
right: 0;
bottom: 0.5rem;
transform: rotate(30deg);
content: "";
}
.snsLinkUl .tel a,
.snsLinkUl .link a {
display: flex;
justify-content: center;
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(131,180,247) 0%, rgb(136,183,246) 6%, rgb(140,185,245) 18%, rgb(119,174,247) 40%, rgb(98,162,248) 61%, rgb(143,188,249) 77%, rgb(188,214,249) 90%, rgb(129,179,246) 100%);
border-radius: 6rem;
border: 3px solid #fff;
min-height: 8rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
align-items: center;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8);
}
.snsLinkUl .link span {
display: inline-block;
padding-left: 5.2rem;
background: url(img/common/img04.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl .link02 a {
position: relative;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8);
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(77,202,75) 0%, rgb(96,215,77) 6%, rgb(114,227,79) 18%, rgb(72,206,48) 40%, rgb(30,185,17) 61%, rgb(92,210,74) 77%, rgb(153,235,131) 89%, rgb(12,195,0) 100%);
}
.snsLinkUl .link02 span {
background-image: url(img/common/img05.png);
}
.snsLinkUl .tel a {
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background: #F39E19;
font-size: 1.35rem;
color: #262626;
letter-spacing: 0;
font-weight: 700;
text-shadow: none;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
}
.snsLinkUl .tel .num {
display: block;
line-height: 1;
font-size: 3.6rem;
text-align: left;
font-weight: 400;
letter-spacing: 0.03em;
color: #fff;
}
.snsLinkUl .tel .telSpan {
padding-left: 5.5rem;
background: url(img/common/img06.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.snsLinkUl {
margin-bottom: 5.4rem;
display: block;
}
.snsLinkUl li {
width: auto;
margin: 0 auto 1rem;
max-width: 30.2rem;
}
.snsLinkUl li:last-child {
margin-bottom: 0;
}
.snsLinkUl li .ttl {
font-size: 1.5rem;
margin-bottom: 0.2rem;
}
.snsLinkUl .tel a, .snsLinkUl .link a {
min-height: 6rem;
border-width: 2px;
font-size: 2.2rem;
box-shadow: 0rem 0.1rem 0.4rem 0.063rem rgba(0, 0, 0, 0.17);
}
.snsLinkUl .link span {
padding-left: 4.5rem;
background-size: 3.8rem auto;
}
.snsLinkUl .tel a {
font-size: 1.15rem;
}
.snsLinkUl .tel .num {
font-size: 3.1rem;
}
.snsLinkUl .tel .telSpan {
padding-left: 4.5rem;
background-size: 4rem auto;
}
}
/* - - campaign - -*/
.bannerarea {
display: flex;
justify-content: space-between;
align-items: center;
}
.campaign {
margin-bottom: 10rem;
}
.campaign .headLine06 {
letter-spacing: -0.3rem;
}
.campaign .comEn {
margin-bottom: 4.3rem;
}
.campaign .slideBox {
padding-left: 1.3rem;
position: relative;
}
.campaign .slideBox .list .slick-slide {
padding: 0 2.05rem;
}
.campaign .slideBox .list a {
width: 52rem;
display: block;
color: #353535;
position: relative !important;
}
.campaign .slideBox .list a > img {
width: 100%;
}
.campaign .slideBox .list a:hover {
opacity: 0.5;
}
.campaign .slick-slide img {
display: inline-block;
}
.campaign .slideBox .list a::before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: '';
border: 0.5rem solid #b2ad9d;
}
.campaign .slick-dots {
position: absolute;
left: 0;
bottom: -3.5rem;
width: 100%;
display: flex;
justify-content: center;
gap: 1.6rem;
}
.campaign .slick-dots li {
width: 1.3rem;
height: 1.3rem;
overflow: hidden;
cursor: pointer;
background-color: #bcbcbc;
border-radius: 2rem;
}
.campaign .slick-dots .slick-active {
background-color: #353535;
}
.campaign .slick-dots button {
cursor: pointer;
opacity: 0;
}
.campaign .banner01 .ttl {
padding: 0 1rem 1.5rem;
width: 33.8rem;
position: absolute;
left: 9rem;
top: 3.5rem;
color: #FFF;
text-align: center;
font-size: 2rem;
font-weight: bold;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campain_bg01.png) no-repeat center top;
letter-spacing: -0.05rem;
}
.campaign .banner01 .text {
width: 100%;
position: absolute;
left: 0;
top: 7.2rem;
color: #353535;
font-size: 2.6rem;
font-weight: bold;
letter-spacing: -0.3rem;
text-align: center;
text-shadow: 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),
0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),
0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9);
}
.campaign .banner01 .text .big {
display: block;
margin-top: -1.5rem;
color: #86753b;
font-size: 4.6rem;
line-height: 1;
letter-spacing: 0.1rem;
}
.campaign .banner01 .text .red {
color: #f31a43;
}
.campaign .banner01 .text .num {
font-size: 6rem;
}
.campaign .banner02 .text {
position: absolute;
left: 11.5rem;
top: 3.5rem;
font-size: 2.6rem;
font-weight: bold;
line-height: 1;
text-shadow: 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.9), 0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9),0.3rem -0.3rem 1.5rem rgba(255, 255, 255, 0.9), 0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9),0 0 1.5rem rgba(255, 255, 255, 0.9);
}
.campaign .banner02 .text .fs {
margin: 0.2rem 0 0.6rem;
display: block;
color: #86753b;
font-size: 3.6rem;
letter-spacing: -0.6rem;
}
.campaign .banner02 .text .num {
color: #f31a43;
font-size: 5rem;
}
.campaign .banner02 .text .num small {
font-size: 4rem;
}
.campaign .banner02 .imgText {
padding: 2.5rem 0 0;
width: 14.8rem;
aspect-ratio: 148/112;
position: absolute;
right: 7.6rem;
top: 6.1rem;
color: #FFF;
font-weight: bold;
font-size: 1.6rem;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campaign_bg02.png) no-repeat center top / 100%;
}
.campaign .banner02 .imgText > span {
margin: -0.2rem 0 0.7rem;
display: block;
color: #e5cd7b;
font-size: 1.764rem;
line-height: 1;
}
.campaign .banner02 .imgText span .num {
font-size: 3rem;
letter-spacing: -0.2rem;
}
.campaign .banner03 .text01 {
padding: 0.2rem 0 0 0.3rem;
width: 14.2rem;
aspect-ratio: 1;
position: absolute;
left: 2.3rem;
top: 2.6rem;
color: #763c04;
font-size: 2.141rem;
font-weight: bold;
text-align: center;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/campaign_bg03.png) no-repeat center top / 100%;
}
.campaign .banner03 .text01 .big {
margin-bottom: -0.6rem;
display: block;
color: #b1843a;
font-size: 3.426rem;
}
.campaign .banner03 .textBox {
position: absolute;
left: 19rem;
right: 7.5rem;
top: 2.6rem;
text-align: center;
font-size: 1.6rem;
}
.campaign .banner03 .text02 {
margin-bottom: 1rem;
padding: 0rem 0 0.5rem;
color: #FFF;
font-size: 2.2rem;
font-weight: bold;
line-height: 1;
font-size: 2.2rem;
background: linear-gradient(90deg,rgba(31, 53, 150,0) 0%,#1f3596 20%,#1f3596 50%,#1f3596 80%,rgba(31, 53, 150,0) 100%);
}
.campaign .banner03 .text03 {
margin-bottom: -1.2rem;
color: #86753b;
font-size: 3.6rem;
font-weight: bold;
line-height: 1;
letter-spacing: -0.1rem;
margin-top: 0;
}
.campaign .banner03 .text03 .sml {
margin-top: 0.8rem;
display: block;
color: #353535;
font-size: 1.6rem;
font-weight: normal;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
letter-spacing: 0;
}
.campaign .banner03 .text04 {
font-size: 2.241rem;
font-weight: bold;
letter-spacing: -0.1rem;
margin-bottom: 0;
margin-top: 0;
}
.campaign .banner03 .text04 .line {
font-size: 2.586rem;
border-bottom: 0.1rem solid #0f268e;
}
.campaign .banner03 .text04 .num {
font-size: 4.31rem;
}
.campaign .banner03 .text04 .red {
color: #f31a43;
}
.campaign .slideBox .list li > img {
width: 100%;
}
.campaign .slideBox .camdiv,
.campaign .slideBox .camp {
display: block;
}
@media all and (max-width: 896px) {
.campaign {
margin-bottom: 4.5rem;
}
.campaign .headLine06 {
letter-spacing: -0.1rem;
}
.campaign .comEn {
margin-bottom: 1.3rem;
}
.campaign .slideBox {
padding: 0 1.7rem;
}
.campaign .slideBox .list li {
margin-bottom: 0.9rem;
}
.campaign .slideBox .list a {
width: 100%;
}
.campaign .slideBox .list a::before {
border-width: 0.3rem;
}
.campaign .banner01 .ttl {
padding: 0 0 3vw;
left: 17%;
width: 65%;
top: 19%;
font-size: 3.4vw;
letter-spacing: 0;
background-size: 100%;
}
.campaign .banner01 .text {
top: 13vw;
font-size: 4.5vw;
}
.campaign .banner01 .text .big {
margin-top: -2.8vw;
font-size: 8vw;
}
.campaign .banner01 .text .num {
font-size: 10.4vw;
}
.campaign .banner02 .text {
left: 20vw;
top: 6vw;
font-size: 4.52vw;
z-index: 2;
}
.campaign .banner02 .text .fs {
margin: 0.5vw 0 1vw;
font-size: 6.26vw;
letter-spacing: -0.4rem;
}
.campaign .banner02 .text .num {
font-size: 8.7vw;
}
.campaign .banner02 .text .num small {
font-size: 6.96vw;
}
.campaign .banner02 .imgText {
padding: 4.5vw 0 0;
font-size: 2.78vw;
width: 25.4vw;
right: 13.5vw;
top: 11vw;
}
.campaign .banner02 .imgText > span {
margin: -0.5vw 0 0;
font-size: 3vw;
}
.campaign .banner02 .imgText span .num {
font-size: 5.2vw;
}
.campaign .banner02 .imgText img {
margin: 0.2vw auto 0;
display: block;
width: 84%;
}
.campaign .banner03 .text01 {
padding-top: 1.5vw;
width: 25vw;
left: 4vw;
top: 4.5vw;
font-size: 3.73vw;
}
.campaign .banner03 .text01 .big {
margin-bottom: 0;
font-size: 5.96vw;
line-height: 1.2;
}
.campaign .banner03 .textBox {
left: 32vw;
right: 10vw;
top: 4.5vw;
}
.campaign .banner03 .text02 {
padding: 0.2rem 0 0.3rem;
margin: 0 3vw 1.5vw;
font-size: 3.82vw;
}
.campaign .banner03 .text03 {
margin-bottom: -2vw;
font-size: 6.26vw;
margin-top: 0;
}
.campaign .banner03 .text03 .sml {
margin-top: 1vw;
font-size: 3.132vw;
}
.campaign .banner03 .text04 {
font-size: 3.9vw;
margin-bottom: 0;
margin-top: 0;
}
.campaign .banner03 .text04 .line {
font-size: 4.5vw;
}
.campaign .banner03 .text04 .num {
font-size: 7.5vw;
}
}
@media (max-width: 896px) {
.headLine06 {
font-size: 2.2rem;
letter-spacing: 0;
}
}
.headLine06 {
text-align: center;
font-size: 4rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
@media (max-width: 896px) {
.comEn {
margin-bottom: 3.1rem;
font-size: 1.7rem;
}
}
.comEn {
margin-bottom: 7.4rem;
display: block;
font-size: 3rem;
color: #99bff1;
font-weight: 400;
text-align: center;
}
.garamond {
font-family: "EB Garamond", serif;
}
.slideBox .list {
margin: 0 auto 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* text-align: center; */
gap: 0.9rem;
}
.banner03 {
margin: auto;
}
.banner01 {
margin-bottom: 0.9rem;
margin: auto;
}
.banner02 {
margin-bottom: 0.9rem;
margin: auto;
}
/* - - anxiety - -*/
.anxiety {
padding: 9rem 2rem 9.5rem;
color: #FFF;
position: relative;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg.png) no-repeat center center / cover;
}
.anxiety::before {
width: 25.6rem;
height: 6.4rem;
z-index: 1;
background: rgb(18, 18, 18);
clip-path: polygon(3.8rem 0, calc(100% - 3.8rem) 0,calc(100% - 3.8rem) 3rem, 100% 3rem, 13.1rem 100%, 0 3rem , 3.8rem 3rem);
position: absolute;
top: 100%;
left: 50%;
content: "";
transform: translateX(-50%);
}
.anxiety::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25rem;
content: '';
background: linear-gradient(00deg,#121212 0%,#121212 50%,rgba(0,0,0,0) 100%);
z-index: 2;
}
.anxiety .headLine06 {
margin-bottom: 3.7rem;
color: #FFF;
font-size: 5rem;
letter-spacing: -0.3rem;
}
.anxiety .headLine06 .dot {
position: relative;
}
.anxiety .headLine06 .dot::before {
position: absolute;
left: 0;
top: -1.3rem;
content: '・';
line-height: 10px;
width: 100%;
text-align: center;
}
.anxiety .wrap {
margin: 0 auto;
width: 48.4rem;
position: relative;
}
.anxiety .photo {
position: relative;
z-index: 1;
}
.anxiety .photo .pos {
position: absolute;
right: 12rem;
top: 0;
}
.anxiety .textList li {
padding: 4.8rem 2rem 1rem;
width: 31rem;
min-height: 22.8rem;
position: absolute;
z-index: 3;
font-size: 2.6rem;
text-align: center;
line-height: 1.38;
letter-spacing: 0.2rem;
z-index: 1;
}
.anxiety .textList .color {
color: #f7e972;
}
.anxiety .textList .item01 {
right: calc(100% - 13rem);
top: -2.2rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg01.png) no-repeat center top / 100%;
}
.anxiety .textList .item02 {
padding-top: 6.5rem;
right: 100%;
top: 12.5rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg02.png) no-repeat center top / 100%;
}
.anxiety .textList .item03 {
padding: 4.2rem 2rem 1rem 3rem;
width: 32.4rem;
left: calc(100% - 10.3rem);
top: -2.3rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg03.png) no-repeat center top / 100%;
}
.anxiety .textList .item04 {
padding: 4rem 1rem 1rem 4rem;
width: 34rem;
left: calc(100% - 11rem);
top: 16.9rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg04.png) no-repeat center top / 100%;
}
.anxiety .text {
position: absolute;
left: -10rem;
right: -10rem;
bottom: 7.6rem;
text-align: center;
z-index: 3;
font-size: 4.4rem;
letter-spacing: -0.3rem;
font-weight: 600;
text-shadow: 0.1rem 0.1rem 0.8rem rgba(0, 0, 0, 0.8);
}
.anxiety .text span {
color: #f7e972;
font-size: 8rem;
}
.anxiety .pop li {
position: absolute;
z-index: 3;
color: #595757;
font-size: 2.6rem;
text-align: center;
line-height: 1.15;
}
.anxiety .pop01 {
padding: 4rem 1rem 0;
width: 24.6rem;
aspect-ratio: 246/132;
right: calc(50% + 5rem);
bottom: -7rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg05.png) no-repeat center top / 100%;
}
.anxiety .pop02 {
padding: 4.5rem 1rem 0;
width: 29.6rem;
aspect-ratio: 296/130;
left: calc(50% - 3.4rem);
bottom: -4.7rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg06.png) no-repeat center top / 100%;
}
@media all and (max-width: 896px) {
.anxiety {
padding: 4.8rem 0 9.5rem;
}
.anxiety::before {
width: 13rem;
height: 3.2rem;
background: rgb(18, 18, 18);
z-index: 2;
clip-path: polygon(1.8rem 0, calc(100% - 2.2rem) 0,calc(100% - 2.2rem) 1.5rem, 100% 1.5rem, 50% 100%, 0 1.5rem , 1.8rem 1.5rem);
}
.anxiety::after {
height: 18rem;
background: linear-gradient(00deg,#121212 0%,#121212 70%,rgba(0,0,0,0) 100%);
}
.anxiety .headLine06 {
margin-bottom: 4.5rem;
font-size: 2.98rem;
line-height: 1.36;
letter-spacing: 0;
}
.anxiety .headLine06 .dot::before {
top: -0.9rem;
}
.anxiety .wrap {
margin: 0 auto;
padding-left: 3rem;
width: 34rem;
box-sizing: border-box;
}
.anxiety .photo {
margin: 0 auto;
width: 23.8rem;
}
.anxiety .photo .pos {
width: 4.8rem;
top: -2.8rem;
right: 8.6rem;
}
.anxiety .textList li {
min-height: 15rem;
padding: 2.7rem 1rem;
width: 18.4rem;
font-size: 1.53rem;
letter-spacing: 0;
}
.anxiety .textList .item01 {
top: -4.1rem;
right: calc(100% - 15rem);
}
.anxiety .textList .item02 {
top: 8.9rem;
right: calc(100% - 14rem);
padding-top: 3.8rem;
}
.anxiety .textList .item03 {
width: 16.5rem;
left: calc(100% - 13.5rem);
top: -1.8rem;
padding: 2.2rem 2rem 1rem 2rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg03_sp.png);
}
.anxiety .textList .item04 {
padding: 2rem 2rem 1rem 2rem;
left: calc(100% - 11.8rem);
top: 9.1rem;
width: 15.4rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/anxiety_bg04_sp.png);
z-index: 4;
}
.anxiety .text {
font-size: 2.2rem;
bottom: 1.1rem;
}
.anxiety .text span {
font-size: 4rem;
}
.anxiety .pop li {
font-size: 1.43rem;
}
.anxiety .pop .pop01 {
width: 13.5rem;
padding: 2rem 1rem 0;
right: calc(50% + 1.8rem);
bottom: -7.9rem;
}
.anxiety .pop .pop02 {
width: 16.2rem;
padding: 2.3rem 1rem 0;
left: calc(50% - 0.9rem);
bottom: -6.7rem;
}
}
/* - - message - -*/
.message {
padding-bottom: 4.5rem;
background-color: #E5EFFF;
}
.message .photoBox {
width: 50.2%;
margin: -4.4rem -0.1rem 0 3rem;
}
.message .photoBox2 {
width: 50.2%;
margin: -4.4rem -0.1rem 0 3rem;
order: -1;
}
.message .photoBox img {
width: 100%;
}
.message .textBox {
padding-left: 7.5rem;
flex: 1;
}
.message .headLine03 {
margin-bottom: 1.6rem;
}
.message .comLink03 {
text-align: left;
}
.message p {
margin-bottom: 3rem;
line-height: 1.76;
}
@media all and (max-width: 896px) {
.message .imgBox {
display: block;
}
.message .textBox {
padding: 0 0 2.6rem;
}
.message .photoBox {
width: auto;
margin: 0 0.8rem 0 0;
}
.message .textBox2 {
padding: 0 0 2.6rem;
}
.message .photoBox2 {
width: auto;
margin: 0 0.8rem 0 0;
}
.message {
padding: 0 3rem 4.3rem;
}
.message .headLine03 {
font-size: 1.7rem;
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
.message p {
margin-bottom: 2rem;
line-height: 1.43;
}
.message .comLink03 {
margin-bottom: 0;
text-align: center;
}
}
/* - - comEn02 - -*/
.comEn02 {
margin: -1rem 0 -0.7rem -1.2rem;
font-size: 4rem;
line-height: 1;
color: #a49972;
transform: rotate(-10deg);
display: block;
transform-origin: left top;
}
@media all and (max-width: 896px) {
.comEn02 {
margin: 0 0 -1.1rem;
font-size: 6rem;
position: relative;
top: -0.8rem;
}
}
.corinthia {
font-family: "Corinthia", cursive;
font-weight: 100!important;
margin-bottom: 0.9rem;
}
.flexB {
justify-content: space-between;
}
.flex, .flexA, .flexB, .flexC {
display: flex;
flex-wrap: wrap;
}
.comLink03 a:hover {
color: #62a2f8;
}
.comLink03.big a {
min-height: 6.8rem;
font-size: 1.8rem;
background-position: right 3.5rem center;
}
.comLink03 a {
font-weight: 600;
color: #595757;
margin: 0 auto;
min-width: 32rem;
padding: 0 6.5rem 0 3.5rem;
display: inline-flex;
align-items: center;
min-height: 5.4rem;
font-size: 1.6rem;
border-radius: 6rem;
position: relative;
background: #fff;
border: 1px solid rgb(185, 212, 248);
}
/* - - comNum - -*/
.comNum {
position: absolute;
top: -0.8rem;
left: 2.5rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
z-index: 1;
font-family: "Shippori Mincho B1", serif;
}
.comNum .subSpan {
width: 4.4rem;
height: 5.8rem;
padding: 0 0 0.8rem 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #a49972;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.comNum::after {
content: "";
position: absolute;
top: 0;
z-index: -1;
right: -0.6rem;
border-bottom: 0.7rem solid #7e724e;
border-right: 0.7rem solid transparent;
}
@media all and (max-width: 896px) {
.comNum {
font-size: 1.34rem;
padding-bottom: 0.5rem;
top: -0.5rem;
left: 1.6rem;
}
.comNum .subSpan {
width: 2.9rem;
height: 3.8rem;
}
.comNum::after {
right: -0.4rem;
border-width: 0.5rem;
}
}
/* - - featureTop - -*/
.featureTop {
padding-bottom: 8rem;
margin-top: 0;
background-color: #F2F7FF;
}
.featureTop .comLink03 {
margin-top: 4.5rem;
}
@media all and (max-width: 896px) {
.featureTop .comLink03 {
margin-top: -0.5rem;
}
.featureTop {
padding-bottom: 4.4rem;
}
}
/* - - featureTop - end-*/
/* - - featureList - -*/
.feature {
padding: 10rem 0;
/* margin-top: 12rem; */
background-color: #fbf9f1;
}
.featureList {
margin-bottom: 3rem;
display: flex;
flex-wrap: wrap;
gap: 3.4rem 2.6rem;
}
.featureList li {
background-color: #fff;
border: 1px solid #D8D0B4;
border-radius: 1rem;
padding: 4.9rem 0.5rem 3rem;
text-align: center;
position: relative;
width: calc((100% - (2.6rem * 3 + 0.1rem)) / 4);
}
.featureList .photo {
width: 16.1rem;
height: 16.1rem;
border-radius: 100%;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient( 180deg, rgb(185,212,248) 0%, rgb(166,200,245) 62%, rgb(146,187,242) 100%);
background-position: right bottom;
}
.featureList h3 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
line-height: 1.31;
font-family: "Shippori Mincho B1", serif !important;
}
@media all and (max-width: 896px) {
.feature {
padding: 3.6rem 0;
/* margin-top: 4.2rem; */
margin-top: 0.6rem;
}
.featureList {
margin-bottom: 2.4rem;
gap: 1.6rem 1.3rem;
}
.featureList li {
padding: 1.5rem 1rem 1.2rem;
border-radius: 0.8rem;
width: calc((100% - 1.3rem) / 2);
}
.featureList li:last-child {
margin-bottom: 0;
}
.featureList .photo img {
width: 9.5rem;
}
.featureList h3 {
font-size: 1.5rem;
line-height: 1.33;
}
.featureList .photo {
margin: 0 auto 0.7rem;
width: 9.5rem;
height: 9.5rem;
padding: 1.8rem;
}
}
/* - - featureUl - -*/
.featureUl li {
margin-bottom: 2.5rem;
padding: 1.5rem 5.5rem 3.4rem;
border-radius: 1rem;
position: relative;
border: 5px solid rgb(237, 233, 217);
background-color: #f2f0e7;
}
.featureUl li:last-child {
margin-bottom: 0;
}
.featureUl .comheading02 {
margin-inline: 3.5rem;
}
.featureUl .comNum {
font-size: 2.38rem;
top: -1.6rem;
left: 2rem;
}
.featureUl .comNum .subSpan {
width: 5.3rem;
height: 6.9rem;
}
.featureUl .comNum::after {
border-width: 1.1rem;
border-right-width: 0.8rem;
right: -0.8rem;
}
.featureUl li p {
letter-spacing: 0.02em;
color: #4b7ac6;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.featureUl li {
margin-bottom: 1.6rem;
padding: 1.4rem 2rem 2rem;
border-width: 4px;
border-radius: 0.8rem;
}
.featureUl .comheading02 {
margin-inline: 3rem 0;
}
.featureUl .comNum {
top: -1.0rem;
left: 1.4rem;
font-size: 1.5rem;
}
.featureUl .comNum .subSpan {
padding-top: 0.4rem;
width: 3.3rem;
height: 4.4rem;
}
.featureUl .comNum::after {
border-width: 0.7rem;
border-right-width: 0.6rem;
right: -0.5rem;
}
.featureUl li p {
line-height: 1.57;
}
}
/* - - headLine07 - -*/
.headLine07 {
flex: 1;
margin-right: -8rem;
margin-top: -0.1rem;
padding: 0 1rem 1.5rem;
font-size: 2.6rem;
color: #4f96f5;
display: flex;
letter-spacing: 0.04em;
width: 700px;
align-items: flex-start;
border-bottom: 1px solid currentColor;
}
.headLine07 .num {
flex-shrink: 0;
font-size: 5rem;
line-height: 1;
color: #a49972;
letter-spacing: 0.04em;
margin-right: 1rem;
}
.headLine07 .txtSpan {
flex: 1;
padding-top: 1rem;
}
@media all and (max-width: 896px) {
.headLine07 {
padding: 0 0 0.7rem;
margin: 0;
line-height: 1.2;
font-size: 1.6rem;
align-items: center;
border-color: #A49972;
}
.headLine07 .num {
font-size: 3rem;
margin: -0.5rem 0.2rem 0 0;
}
.headLine07 .txtSpan {
padding-top: 0;
}
}
/* - - headLine07 --end-- -*/
/* - - featureUl - -end---*/
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url(img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
z-index: -1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/* - - featureList -end -*/
/*-----comLink03-------*/
@media (max-width: 896px) {
.featureTop .comLink03 {
margin-top: -0.5rem;
}
}
.featureTop .comLink03 {
margin-top: 4.5rem;
}
.comLink03.big {
margin: 0;
}
.comLink03:last-child {
margin-bottom: 0;
}
@media (max-width: 896px) {
.comLink03 {
margin-bottom: 5.2rem;
}
}
.comLink03
{
/* width: 32rem; */
margin: 0 auto 5.2rem;
text-align: center;
}
.comLink03 {
/* width: 32rem; */
}
/*-----comLink03----end---*/
/* - - arrow-circle - -*/
.arrow-circle {
right: 3.5rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #62A2F8;
cursor: pointer;
transition: all 0.3s ease;
}
.arrow-circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
transform: translate(-70%, -50%) rotate(45deg);
}
@media all and (max-width: 896px) {
.arrow-circle {
width: 1.8rem;
height: 1.8rem;
right: 2.5rem;
}
}
/* - - arrow-circle -end -*/
/* - - flowSec - -*/
.flowSec {
padding: 8.8rem 0 8.2rem;
background-color: #F8F8F8;
}
.flowSec .comEn02 {
margin-bottom: -2rem;
text-align: center;
transform: none;
color: #99bff2;
}
.flowSec .headLine03 {
margin-bottom: 5.7rem;
text-align: center;
}
.flowSec .comLink03 a {
min-width: 36rem;
}
@media all and (max-width: 896px) {
.flowSec {
padding: 4rem 0 4.7rem;
}
.flowSec .headLine03 {
margin-bottom: 2rem;
}
.flowSec .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
}
.flowSec .comLink03 {
margin-top: 6.7rem;
}
}
/* - - flowList - -*/
.flowList {
margin-bottom: 8.1rem;
display: flex;
flex-wrap: wrap;
gap: 2.8rem;
}
.flowList li {
padding: 2rem 2rem 1.6rem;
text-align: center;
border-radius: 1rem;
position: relative;
width: calc((100% - (2.8rem * 3)) / 4);
background-image: linear-gradient( 180deg, rgb(197,219,249) 12%, rgb(139,185,247) 57%, rgb(81,151,244) 100%);
}
.flowList li:after {
content: '';
position: absolute;
top: 50%;
right: -2.5rem;
width: 0;
height: 0;
border-top: 0.9rem solid transparent;
border-bottom: 0.9rem solid transparent;
border-left: 1.0rem solid #62A2F8;
transform: translate(-50%, -50%);
}
.flowList li:last-child::after {
display: none;
}
.flowList p {
font-size: 2rem;
font-weight: 700;
color: #fff;
}
.flowList .ttl {
padding-top: 1rem;
font-size: 2.6rem;
color: #3689f9;
letter-spacing: 0.04em;
line-height: 1;
width: fit-content;
font-weight: 400;
margin: 0 auto 0.4rem;
background: url(img/index/img01.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.flowList .ttl .num {
font-size: 5rem;
margin-left: -0.3rem;
vertical-align: -0rem;
}
.flowList .photo {
margin-bottom: 1rem;
min-height: 8rem;
display: flex;
align-items: center;
justify-content: center;
}
@media all and (max-width: 896px) {
.flowList {
margin-bottom: 4rem;
gap: 2.2rem;
flex-direction: column;
}
.flowList li {
min-height: 7.5rem;
padding: 1.2rem 2rem 1.2rem;
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
border-radius: 0.5rem;
background: linear-gradient( 90deg, rgb(197,219,249) 0%, rgb(139,185,247) 52%, rgb(81,151,244) 100%);
}
.flowList .spBpx {
display: flex;
align-items: center;
}
.flowList li::after {
right: auto;
left: 50%;
bottom: -2rem;
top: auto;
transform: translateX(-50%) rotate(90deg);
}
.flowList .ttl {
margin: 0 0.7rem 0 0;
font-size: 1.8rem;
display: flex;
white-space: nowrap;
align-items: flex-end;
background-position: left 0.2rem top;
background-size: 3.7rem auto;
}
.flowList .ttl .num {
margin-bottom: -0.3rem;
margin-left: 0;
font-size: 3.5rem;
}
.flowList .photo {
width: 4.5rem;
min-height: inherit;
margin: 0;
}
.flowList p {
flex: 1;
text-align: center;
font-size: 1.6rem;
letter-spacing: 0.02em;
}
}
/* - - flowInner - -*/
.flowInner {
margin-bottom: 4.5rem;
align-items: flex-start;
padding: 3rem 3.9rem 5.2rem 7.8rem;
background-color: #fff;
border: 5px solid rgb(237, 233, 217);
}
.flowInner .photoBox {
width: 35.6%;
margin: -5.2rem 0 0 7.4rem;
}
.flowInner .photoBox img {
width: 100%;
}
.flowInner .textBox {
padding-top: 0.1rem;
flex: 1;
}
.flowInner p {
line-height: 1.65;
}
@media all and (max-width: 896px) {
.flowInner {
margin-bottom: 5.4rem;
padding: 1rem 2rem;
display: block;
border-width: 2px;
}
.flowInner .photoBox {
width: auto;
margin: 1.8rem -0.2rem -4.5rem;
}
.flowInner p {
line-height: 1.43;
}
}
/* - - headLine17 - -*/
.headLine17 {
margin-bottom: 3rem;
padding: 0 1.0rem 1.2rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
border-bottom: 1px solid #A49972;
}
.headLine17 .lSpan {
padding-top: 1rem;
font-size: 2.6rem;
font-weight: 400;
color: #62a2f8;
line-height: 1;
flex-shrink: 0;
width: 10rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/common/img07.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.headLine17 .lSpan .num {
font-size: 5rem;
}
.headLine17 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine17 {
margin-bottom: 1.7rem;
font-size: 1.8rem;
padding: 0 0 0.2rem;
}
.headLine17 .lSpan {
width: 6.4rem;
white-space: nowrap;
font-size: 1.7rem;
padding-top: 0.6rem;
background-position: left 0.2rem top;
background-size: 3.5rem auto;
}
.headLine17 .lSpan .num {
font-size: 3.3rem;
}
}
/* - - headLine16 - -*/
.headLine16 {
margin-bottom: 1.4rem;
font-size: 2.6rem;
color: #62a2f8;
text-align: center;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.headLine16 {
margin-bottom: 1.6rem;
font-size: 2.3rem;
line-height: 1.22;
}
}
/* - - treatmentList - -*/
.treatmentList {
margin-bottom: 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 2.8rem;
}
.treatmentList li {
background-color: #fff;
border-radius: 1rem;
padding: 1.3rem 2rem;
width: calc((100% - (2.8rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
text-align: center;
padding: 2.3rem min(1.1vw,2rem) 2.9rem;
display: flex;
flex-direction: column;
font-size: 4.6rem;
font-weight: 700;
align-items: center;
justify-content: center;
color: #a49972;
letter-spacing: 0.04em;
line-height: 1;
border: 2px solid #DBD2AE;
border-block-width: 6px;
}
.treatmentList li p span {
margin-bottom: 0.5rem;
display: block;
font-size: 3rem;
color: #62a2f8;
}
@media all and (max-width: 896px) {
.treatmentList {
margin-bottom: 1.7rem;
gap: 2rem 0.4rem;
}
.treatmentList li {
padding: 0.7rem 0.5rem;
border-radius: 0.5rem;
width: calc((100% - (0.4rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
border-width: 1px;
padding: 1.2rem 0 1.4rem;
font-size: 2.3rem;
border-block-width: 3px;
}
.treatmentList li p span {
font-size: 1.4rem;
margin: 0 -1rem 0.3rem;
letter-spacing: 0;
}
}
/* - - treatmentDl - -*/
.treatmentDl {
margin: 0 auto 3rem;
max-width: 48rem;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.treatmentDl:last-child {
margin-bottom: 0;
}
.treatmentDl dt {
display: flex;
align-items: flex-end;
width: calc(100% - 10.5rem);
font-size: 3rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
padding-bottom: 1.5rem;
border-bottom: 1px solid #AA9F7A;
}
.treatmentDl dd {
width: 10.5rem;
padding-bottom: 0.2rem;
font-size: 5rem;
letter-spacing: 0.04em;
color: #86753b;
font-weight: 700;
/* border-bottom: 1px solid #AA9F7A; */
}
.treatmentDl dd .num {
font-size: 6rem;
line-height: 1.45;
}
@media all and (max-width: 896px) {
.treatmentDl {
max-width: 27rem;
}
.treatmentDl dt {
padding: 0 0 1.2rem 0.7rem;
width: calc(100% - 5.5rem);
font-size: 1.7rem;
letter-spacing: 0.02em;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
width: 5.5rem;
font-size: 2.5rem;
}
.treatmentDl dd .num {
font-size: 3.5rem;
}
.treatmentDl {
padding-top: 0.5rem;
max-width: 25.7rem;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
font-size: 2.7rem;
}
.treatmentDl dd .num {
font-size: 3.3rem;
line-height: 1.3;
}
}
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
z-index: -1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/* - - planBox - -*/
.planBox {
padding: 9.6rem 0 11.2rem;
padding: 10.5rem 0 9rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg03.png ) no-repeat center;
background-size: 100% 100%;
}
.planBox .headLine06 {
font-size: 3.6rem;
margin-bottom: 0;
}
.planBox .comEn {
margin-bottom: 3.7rem;
font-size: 2.6rem;
}
@media all and (max-width: 896px) {
.planBox {
padding: 3.2rem 0 4.2rem;
}
.planBox .headLine06 {
font-size: 2.2rem;
}
.planBox .comEn {
margin-top: -0.5rem;
margin-bottom: 2.2rem;
font-size: 1.7rem;
}
}
/* - - bigPlanPhoto - -*/
.bigPlanPhoto {
max-width: 81rem;
margin: 0 auto 8.2rem;
position: relative;
}
.bigPlanPhoto .txtSpan01 {
position: absolute;
top: calc(50% + 5.3rem);
left: 0.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .txtSpan02 {
position: absolute;
top: calc(50% + 5.3rem);
left: 12.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .note {
width: fit-content;
margin: -2.4rem -6.3rem 0 auto;
text-align: right;
display: block;
letter-spacing: 0.04em;
font-size: 1.5rem;
text-indent: -1em;
padding-left: 1em;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 5.5rem;
}
@media all and (max-width: 896px) {
.bigPlanPhoto {
margin: 0 0.2rem 2.2rem;
max-width: inherit;
}
.bigPlanPhoto img {
width: 100%;
}
.bigPlanPhoto .txtSpan01 {
font-size: 2.4vw;
top: 55%;
left: -1.3vw;
}
.bigPlanPhoto .txtSpan02 {
font-size: 2.4vw;
top: 55%;
left: 12.3vw;
}
.bigPlanPhoto .note {
font-size: 2.66vw;
margin: 0.8rem 0 0 auto;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 2.2rem;
}
}
/* - - effectList - -*/
.effectList {
margin: 0 auto 5.2rem;
max-width: 79.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem 5.2rem;
position: relative;
}
.effectList:after {
width: 2.8rem;
height: 5rem;
background-color: rgb(89, 87, 87);
clip-path: polygon(0% 18%, 50% 18%, 50% 0%, 100% 50%, 50% 100%, 50% 86%, 0% 86%);
position: absolute;
top: calc(50% - 1.7rem);
transform: translate(-50%,-50%);
left: 50%;
content: "";
}
.effectList li {
padding: 1.7rem 1.7rem 1.4rem;
text-align: center;
width: calc((100% - 5.2rem) / 2);
background-color: #fff;
box-shadow: 0rem 0rem 0.658rem 0.042rem rgba(0, 0, 0, 0.13);
}
.effectList li .photo {
max-width: 32rem;
margin: 0 auto 1rem;
}
.effectList li .photo img {
width: 100%;
}
.effectList li .txtSpan {
display: block;
width: 13rem;
min-height: 3rem;
background-color: #EBEBEB;
border-radius: 6rem;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
margin: 0 auto;
}
.effectList li .txtSpan02 {
background-color: #FFDDE7;
color: #fa2662;
}
@media all and (max-width: 896px) {
.effectList {
margin: 0 auto 2.6rem;
max-width: inherit;
gap: 3rem 2.2rem;
}
.effectList::after {
width: 1.3rem;
height: 2.2rem;
top: calc(50% - 0.2rem);
}
.effectList li {
padding: 1rem 1rem 0.5rem;
width: calc((100% - 2.2rem) / 2);
box-shadow: 0rem 0rem 0.33rem 0.021rem rgba(0, 0, 0, 0.13);
}
.effectList li .txtSpan {
padding-bottom: 0.1rem;
width: 6.5rem;
font-size: 1.3rem;
min-height: 1.75rem;
}
.effectList li .txtSpan02 {
background-color: #FFDDE7;
}
.effectList li .photo {
max-width: inherit;
margin-bottom: 0.4rem;
}
}
/* - - preventionList - -*/
.preventionList {
margin-bottom: 5.4rem;
}
.preventionList li {
padding-bottom: 1.7rem;
margin-bottom: 2.2rem;
border-bottom: 2px solid #E9E9E9;
}
.preventionList li:last-child {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
.preventionList li > dl {
max-width: 62rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.preventionList li > dl > dt {
font-size: 2.6rem;
margin-top: -1rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
width: 15rem;
line-height: 1;
display: flex;
align-items: center;
font-family: "Shippori Mincho B1", serif;
}
.preventionList li > dl > dd {
flex: 1;
font-size: 2rem;
letter-spacing: 0.04em;
line-height: 1.7;
}
@media all and (max-width: 896px) {
.preventionList {
margin-bottom: 3.5rem;
}
.preventionList li {
padding-bottom: 0.85rem;
margin-bottom: 0.85rem;
}
.preventionList li > dl {
max-width: inherit;
}
.preventionList li > dl > dt {
margin-top: -0.3rem;
font-size: 1.4rem;
width: 7rem;
}
.preventionList li > dl > dd {
font-size: 1.4rem;
line-height: 1.36;
}
}
/* - - priceDl - -*/
.priceDl {
padding-bottom: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.priceDl dt {
padding-top: 1.5rem;
width: 11rem;
font-size: 2rem;
}
.priceDl dt.no {
display: none;
}
.priceDl dd {
margin-bottom: -0.7rem;
width: calc(100% - 11rem);
}
.priceDl dd .txtSpan {
font-size: 3.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.priceDl dd .priceSpan {
font-size: 3rem;
color: #86753b;
letter-spacing: 0.04em;
font-weight: 700;
}
.priceDl dd .num {
font-size: 4.6rem;
line-height: 1;
}
@media all and (max-width: 896px) {
.priceDl dt {
padding-top: 0.7rem;
width: 7.4rem;
font-size: 1.4rem;
}
.priceDl dd {
margin: -0.5rem 0 -1.0rem;
width: calc(100% - 7.4rem);
font-size: 1.4rem;
}
.priceDl dd .txtSpan {
font-size: 1.8rem;
}
.priceDl dd .priceSpan {
font-size: 1.7rem;
}
.priceDl dd .num {
font-size: 2.5rem;
line-height: 1;
}
.priceDl {
padding-bottom: 1rem;
}
}
/* - - medicationList - -*/
.medicationList {
margin-bottom: 10.8rem;
}
.medicationList li {
margin-bottom: 1.5rem;
}
.medicationList .txt {
font-size: 1.7rem;
display: none;
padding: 2.2rem 1.0rem 0.8rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.medication .headLine13 {
padding-bottom: 0.1rem;
font-size: 1.7rem;
}
.medicationList {
margin-bottom: 4.4rem;
}
.medicationList li {
margin-bottom: 0.8rem;
}
.medicationList .txt {
padding: 0.6rem 0.4rem 0.5rem;
font-size: 1.4rem;
line-height: 1.57;
}
}
/* - - treatmentArticle - -*/
.treatmentArticle {
padding: 2.2rem 0;
}
.treatmentArticle .headLine09 {
background-image: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg02.png);
}
.treatmentArticle .comTtlBox {
margin-bottom: 4.5rem;
border-color: #A385EE;
}
.treatmentArticle .headLine10 .lSpan {
color: #A385EE;
}
.treatmentArticle .headLine11 {
border-color: #A385EE;
}
.treatmentArticle .effectList {
margin-bottom: 6.4rem;
}
.treatmentArticle .headLine12 {
background-color: #C8BAED;
}
.treatmentArticle .medicationList {
margin-bottom: 7rem;
}
@media all and (max-width: 896px) {
.treatmentArticle .comTtlBox {
margin-bottom: 2rem;
}
.treatmentArticle .effectList {
margin-bottom: 2.6rem;
}
.treatmentArticle .medicationList {
margin-bottom: 3rem;
}
}
/* - - areataArticle - -*/
.areataArticle .headLine09 {
background-image: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg03.png);
}
.areataArticle .comTtlBox {
margin-bottom: 4.5rem;
border-color: #A49972;
}
.areataArticle .headLine10 .lSpan {
color: #a49972;
border-color: #EDE6CC;
}
.areataArticle .headLine11 {
border-color: #A49972;
}
.areataArticle .headLine12 {
background-color: #A49972;
font-size: 3rem;
padding-block: 0.6rem 0.8rem;
}
.areataArticle .effectList {
margin-bottom: 6.7rem;
}
.areataArticle {
margin-bottom: -3.5rem;
}
@media all and (max-width: 896px) {
.areataArticle .headLine09 .icon {
width: 1.8rem;
}
.areataArticle .comTtlBox {
margin-bottom: 3rem;
}
.areataArticle .effectList {
margin-bottom: 2.6rem;
}
.areataArticle .headLine12 {
margin-bottom: 2.5rem;
font-size: 1.7rem;
padding: 0.2rem;
}
.areataArticle {
margin-bottom: 0;
}
}
/* - - areataList - -*/
.areataList {
padding: 0 2rem 5.5rem;
margin-top: -0.7rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 2rem;
}
.areataList li {
text-align: center;
width: calc((100% - (2rem * 5)) / 6);
}
.areataList li.no {
position: relative;
}
.areataList li.no:after {
background-color: #fff;
opacity: 0.7;
inset: -1rem;
position: absolute;
content: "";
}
.areataList li .photo {
margin-bottom: 1.8rem;
}
.areataList li p {
font-size: 1.6rem;
color: #595757;
line-height: 1.25;
}
.areataList li .ttl {
min-width: 10rem;
width: fit-content;
line-height: 1.1;
padding-bottom: 0.2rem;
margin: 0 auto 1.3rem;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.1em;
border: 1px solid #4F96F5;
border-radius: 6rem;
text-align: center;
}
.areataList li .ttl02 {
border-color: #F31A43;
background-color: #FFE1E7;
}
.areataList li p:not([class]) {
margin-inline: -1rem;
}
@media all and (max-width: 896px) {
.areataList {
padding: 0 1rem 2.2rem;
gap: 0.8rem 1.5rem;
}
.areataList li{
width: calc((100% - (1.5rem * 2)) / 3);
}
.areataList li .photo {
max-width: 5rem;
margin: 0 auto 0.8rem;
}
.areataList li p {
font-size: 1rem;
line-height: 1.3;
}
.areataList li .ttl {
padding: 0.1rem 0 0;
margin-bottom: 0.3rem;
min-width:5rem;
font-size: 1.1rem;
}
}
/* - - payment - -*/
.payment {
padding: 9.5rem 0 6.4rem;
background-color: #F8F8F8;
}
.payment .comEn {
margin-bottom: 9.5rem;
}
.payment .ttl {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
margin-bottom: 4.9rem;
}
@media all and (max-width: 896px) {
.payment {
padding: 4rem 0 6rem;
}
.payment .comEn {
margin-bottom: 2.6rem;
}
.payment .ttl {
margin-bottom: 2.3rem;
font-size: 1.6rem;
line-height: 1.5625;
}
}
/* - - paymentDl - -*/
.paymentDl {
margin-bottom: 6.2rem;
align-items: stretch;
border-top: 2px solid #E9E9E9;
}
.paymentDl dt {
padding: 3.3rem 1rem 4rem 2rem;
width: 33rem;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
font-family: "Shippori Mincho B1", serif;
border-bottom: 2px solid #E9E9E9;
}
.paymentDl dd {
padding: 3.5rem 4rem 4.4rem 0;
font-size: 1.6rem;
letter-spacing: 0.04em;
line-height: 1.625;
width: calc(100% - 33rem);
border-bottom: 2px solid #E9E9E9;
}
.paymentDl dt:last-of-type,
.paymentDl dd:last-of-type {
border: none;
padding-bottom: 0;
}
@media all and (max-width: 896px) {
.paymentDl {
margin-bottom: 1.3rem;
display: block;
}
.paymentDl dt {
width: auto;
border: none;
font-size: 1.6rem;
padding: 1rem 0 0.5rem !important;
}
.paymentDl dd {
width: auto;
padding: 0 0 2rem !important;
font-size: 1.4rem;
line-height: 1.36;
}
.paymentDl .paymentImg {
display: block;
width: 83.5%;
padding: 1rem 0 0;
}
.paymentDl .paymentImg img {
width: 100%;
}
}
/* - - priceBoxTop - -*/
.priceBoxTop {
padding: 9.5rem 0 11.5rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg03.png) repeat left top;
background-size: 5.7rem auto;
}
.priceBoxTop .comEn {
margin-bottom: 3.7rem;
}
.priceBoxTop .pBox {
max-width: 77rem;
margin: 0 auto 4rem;
}
.priceBoxTop .pBox p {
line-height: 1.764;
letter-spacing: 0.02em;
}
.priceBoxTop .txt {
margin-bottom: 0;
padding: 3rem 0 7rem;
text-align: center;
font-size: 2.6rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.08em;
}
.priceBoxTop .txt .txtSpan {
margin-top: 0.3rem;
font-size: 1.8rem;
display: block;
font-weight: 700;
letter-spacing: 0.04em;
}
.priceBoxTop .txt .subSpan {
font-size: 5rem;
color: #86753b;
font-weight: 700;
}
.priceBoxTop .txt .subSpan small {
font-size: 4rem;
}
@media all and (max-width: 896px) {
.priceBoxTop {
padding: 4.3rem 0 5.2rem;
}
.priceBoxTop .comEn {
margin-bottom: 1.5rem;
}
.priceBoxTop .pBox {
max-width: inherit;
margin: 0 2rem 2.3rem;
}
.priceBoxTop .pBox p {
line-height: 1.43;
}
.priceBoxTop .txt {
padding: 0.5rem 0 3.6rem;
font-size: 1.6rem;
letter-spacing: 0.04em;
}
.priceBoxTop .txt .txtSpan {
margin-top: 0.6rem;
font-size: 1.2rem;
letter-spacing: 0.02em;
}
.priceBoxTop .txt .subSpan {
font-size: 2.8rem;
}
.priceBoxTop .txt .subSpan small {
font-size: 2.3rem;
}
}
/* - - priceList - -*/
.priceList {
display: flex;
flex-wrap:wrap;
gap: 3rem;
justify-content: center;
}
.priceList li {
border-radius: 1rem;
background-color: #fff;
border: 1px solid #DBD2AE;
width: calc((100% - (3rem * 2 + 0.1rem)) / 3);
}
.priceList li .ttl {
padding-bottom: 1rem;
position: relative;
text-align: center;
font-size: 2.6rem;
letter-spacing: 0.04em;
line-height: 1;
border-radius: 1rem 1rem 0 0;
background-color: #4F96F5;
margin: -1px -1px 0;
color: #fff;
border-bottom: 4px solid #DBD2AE;
}
.priceList li .ttl .num {
font-size: 5rem;
}
.priceList li .ttl .star {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.5rem;
gap: 0 0.1rem;
display: flex;
align-items: center;
font-size: 2rem;
color: #ffe65e;
}
.priceList li .photo {
margin: 0 -2rem;
min-height: 19rem;
display: flex;
align-items: center;
justify-content: center;
}
.priceList li .textBox {
padding: 0 3.5rem 4rem;
}
.priceList li .textBox p {
margin-bottom: 2.4rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
.priceList .comLink03 {
margin: 0 0.5rem;
}
.priceList .comLink03 a {
min-width: 100%;
min-height: 5rem;
font-size: 1.8rem;
padding-inline: 3rem 5rem;
}
.priceList .comLink03 .arrow-circle {
right: 2.5rem;
}
@media all and (max-width: 896px) {
.priceList {
gap: 1.6rem;
flex-direction: column;
}
.priceList li {
width: 100%;
border-radius: 0.8rem;
}
.priceList li .ttl {
padding-bottom: 0.5rem;
font-size: 2.3rem;
letter-spacing: 0.02em;
border-radius: 0.8rem 0.8rem 0 0;
}
.priceList li .ttl .num {
font-size: 4rem;
letter-spacing: 0.02em;
}
.priceList li .photo {
margin: -1rem 0 0.3rem;
min-height: 15rem;
}
.priceList li .photo img {
height: 13.0rem;
width: auto;
}
.priceList li .textBox p {
margin-bottom: 2rem;
line-height: 1.43;
}
.priceList .comLink03 {
margin: 0 -0.8rem;
}
.priceList .comLink03 a {
min-height: 4.5rem;
font-size: 1.5rem;
padding-inline: 3rem 5rem;
}
.priceList .comLink03 .arrow-circle {
right: 2.5rem;
}
.priceList li .textBox {
padding: 0 3.5rem 3.1rem;
}
.priceList li .photo02 img {
height: 11rem;
}
.priceList li .ttl .star {
font-size: 2rem;
right: 1.5rem;
}
}
/* - - treatmentSec - -*/
.treatmentSec {
padding: 9.3rem 0 8rem;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01.jpg) no-repeat center top;
background-size: cover;
}
.treatmentSec .comEn {
margin-bottom: 4.2rem;
}
.treatmentSec .topTxt {
max-width: 77rem;
margin: 0 auto 6.4rem;
line-height: 1.76;
letter-spacing: 0.02em;
}
.treatmentSec .comLink03.big a {
min-width: 35.7rem;
}
@media all and (max-width: 896px) {
.treatmentSec {
padding: 4.3rem 0 4.6rem;
background-image: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01_sp.jpg);
}
.treatmentSec .comEn {
margin-bottom: 1.5rem;
}
.treatmentSec .topTxt {
max-width: inherit;
margin: 0 2rem 3rem;
line-height: 1.43;
}
.treatmentSec .comLink03.big a {
min-width: 28rem;
min-height: 4.5rem;
}
}
/* - - treatmentUl - -*/
.treatmentUl {
margin-bottom: 4.2rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
justify-content: center;
}
.treatmentUl li {
padding: 3.5rem 2.4rem 5.7rem;
position: relative;
text-align: center;
width: calc((100% - (3rem * 2 + 0.1rem)) / 3);
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg02.png) no-repeat center;
background-size: 100% 100%;
}
.treatmentUl li .headLine13 {
margin-bottom: 1.1rem;
}
.treatmentUl li .photo {
margin-bottom: 3.2rem;
border-radius: 1rem;
overflow: hidden;
}
.treatmentUl li .photo img {
width: 100%;
}
.treatmentUl li .comLink03 {
margin: 0 1rem;
}
.treatmentUl li .comLink03 a {
padding-left: 2.5rem;
min-width: 100%;
font-size: 1.8rem;
min-height: 5rem;
}
.treatmentUl li .comLink03.link a {
padding-left: 2rem;
padding-right: 4rem;
}
.treatmentUl li .comLink03 .arrow-circle {
right: 2rem;
}
@media all and (max-width: 896px) {
.treatmentUl {
margin-bottom: 3.2rem;
display: block;
}
.treatmentUl li {
width: auto;
margin-bottom: 1.6rem;
padding: 2.5rem 2.5rem 3.5rem;
}
.treatmentUl li:last-child {
margin-bottom: 0;
}
.treatmentUl li .headLine13 {
font-size: 2.3rem;
}
.treatmentUl li .photo {
margin-bottom: 1.6rem;
aspect-ratio: 580 / 350;
border-radius: 0.8rem;
position: relative;
}
.treatmentUl li .photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.treatmentUl li .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
font-size: 1.5rem;
padding-left: 2.5rem;
}
.treatmentUl li .comLink03 .arrow-circle {
right: 2rem;
}
}
/* - - headLine09 - -*/
.headLine09 {
padding-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6.4rem;
max-width: 62.8rem;
min-height: 11rem;
font-size: 3.2rem;
color: #595757;
letter-spacing: 0.04em;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg01.png) no-repeat center;
background-size: 100% auto;
}
.headLine09 .icon {
margin: 0 1.5rem -1rem 0;
}
@media all and (max-width: 896px) {
.headLine09 {
max-width: 31.6rem;
margin: 0 auto 3.1rem;
font-size: 1.7rem;
background-size: 100% 100%;
min-height: 5.5rem;
}
.headLine09 .icon {
margin: -0.4rem 1rem -1rem 0;
width: 1.4rem;
}
}
/* - - comTtlBox - -*/
.comTtlBox {
margin-bottom: 4rem;
padding: 1.7rem 2rem;
border-bottom: 2px solid #4F96F5;
border-top: 2px solid #4F96F5;
}
@media all and (max-width: 896px) {
.comTtlBox {
margin-bottom: 2rem;
padding: 0.7rem 0.5rem 0.8rem;
border-width: 1px;
}
}
/* - - headLine10 - -*/
.headLine10 {
display: flex;
align-items: stretch;
justify-content: space-between;
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
}
.headLine10 .lSpan {
margin: -0.2rem 2.5rem 0 0;
padding-bottom: 0.4rem;
width: 12.4rem;
flex-shrink: 0;
font-size: 2.6rem;
font-weight: 400;
color: #4f96f5;
line-height: 1;
border-right: 4px solid #EDECE4;
}
.headLine10 .lSpan .num {
font-size: 5rem;
}
.headLine10 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine10 {
font-size: 1.7rem;
}
.headLine10 .lSpan {
margin: 0 1.5rem 0 0;
width: 7.0rem;
border-width: 2px;
font-size: 1.5rem;
}
.headLine10 .lSpan .num {
line-height: 0.8;
font-size: 3rem;
}
.headLine10 .rSpan {
line-height: 1.3;
padding: 0.2rem 0;
}
}
/* - - headLine11 - -*/
.headLine11 {
margin-bottom: 2.2rem;
font-size: 2.6rem;
font-weight: 700;
text-align: center;
color: #595757;
padding: 0.6rem 1rem 1.2rem;
border: 1px solid #4F96F5;
border-radius: 1rem;
}
@media all and (max-width: 896px) {
.headLine11 {
margin-bottom: 1.8rem;
padding: 0.3rem 1rem 0.4rem;
border-radius: 0.5rem;
font-size: 1.7rem;
}
}
/* - - headLine12 - -*/
.headLine12 {
margin-bottom: 5rem;
padding: 1rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
background-color: #A1C6F6;
border-radius: 1rem;
text-align: center;
}
@media all and (max-width: 896px) {
.headLine12 {
margin-bottom: 2rem;
font-size: 1.7rem;
border-radius: 0.5rem;
padding: 0.2rem 0.5rem;
}
}
/* - - headLine13 - -*/
.headLine13 {
margin-bottom: 2.1rem;
font-size: 2.6rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.headLine13 {
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
}
/* - - headLine14 - -*/
.headLine14 {
padding: 0.8rem 4rem 1.1rem 2rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
background: #EDECE4;
position: relative;
}
.headLine14:before,
.headLine14:after {
position: absolute;
right: 2.5rem;
top: calc(50% - 0.3rem);
width: 1.2rem;
height: 2px;
background-color: rgb(89, 87, 87);
-webkit-transition: all .3s ease;
transition: all .3s ease;
content: "";
}
.headLine14:after {
transform: rotate(90deg);
}
.headLine14.on:after {
transform: rotate(180deg);
opacity: 0;
}
.headLine14-2 {
padding: 0 !important;
}
.headLine14 a {
display: block;
padding: 0.8rem 4rem 1.1rem 2rem;
}
.headLine14 a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.headLine14 {
padding: 0.4rem 2.5rem 0.5rem 1rem;
font-size: 1.4rem;
letter-spacing: 0.02em;
}
.headLine14::before, .headLine14::after {
right: 1.5rem;
width: 0.7rem;
height: 1px;
top: calc(50% + 0rem);
}
.headLine14 a {
padding: 0.4rem 2.5rem 0.5rem 1rem;
}
}
/* - - headLine15 - -*/
.headLine15 {
color: #323131;
margin-bottom: 2.5rem;
font-size: 6.6rem;
line-height: 1;
letter-spacing: 0.04em;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9);
}
@media all and (max-width: 896px) {
.headLine15 {
margin-bottom: 1.3rem;
font-size: 2.9rem;
letter-spacing: 0.02em;
}
}
/* - - headLine16 - -*/
.headLine16 {
margin-bottom: 1.4rem;
font-size: 2.6rem;
color: #62a2f8;
text-align: center;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.headLine16 {
margin-bottom: 1.6rem;
font-size: 2.3rem;
line-height: 1.22;
}
}
/* - - headLine17 - -*/
.headLine17 {
margin-bottom: 3rem;
padding: 0 1.0rem 1.2rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
border-bottom: 1px solid #A49972;
}
.headLine17 .lSpan {
padding-top: 1rem;
font-size: 2.6rem;
font-weight: 400;
color: #62a2f8;
line-height: 1;
flex-shrink: 0;
width: 10rem;
background: url(img/common/img07.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.headLine17 .lSpan .num {
font-size: 5rem;
}
.headLine17 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine17 {
margin-bottom: 1.7rem;
font-size: 1.8rem;
padding: 0 0 0.2rem;
}
.headLine17 .lSpan {
width: 6.4rem;
white-space: nowrap;
font-size: 1.7rem;
padding-top: 0.6rem;
background-position: left 0.2rem top;
background-size: 3.5rem auto;
}
.headLine17 .lSpan .num {
font-size: 3.3rem;
}
}
/* - - headLine18 - -*/
.headLine18 {
font-size: 2.6rem;
color: #62a2f8;
letter-spacing: 0.04em;
font-weight: 700;
margin: 0 1rem 2.7rem;
}
@media all and (max-width: 896px) {
.headLine18 {
margin: 0 0.5rem 1rem;
font-size: 1.7rem;
}
}
/* - - headLine19 - -*/
.headLine19 {
margin-bottom: 4.8rem;
font-size: 3.6rem;
color: #62a2f8;
letter-spacing: 0.04em;
text-align: center;
}
@media all and (max-width: 896px) {
.headLine19 {
margin-bottom: 2rem;
font-size: 2.3rem;
}
}
/* - - headLine20 - -*/
.headLine20 {
margin-bottom: 2rem;
font-size: 2.2rem;
color: #595757;
display: flex;
align-items: flex-start;
}
.headLine20 .columnsImg {
flex-shrink: 0;
width: 3rem;
margin: 0.5rem 0.5rem 0 0;
}
@media all and (max-width: 896px) {
.headLine20 {
margin-bottom: 1.7rem;
font-size: 1.7rem;
}
.headLine20 .columnsImg {
width: 2.6rem;
margin-top: 0.1rem;
}
}
/* - - headLine21 - -*/
.headLine21 {
padding: 0 0 1.5rem;
margin: 3rem 0 3rem;
font-size: 2.2rem;
color: #4f96f5;
letter-spacing: 0.04em;
border-bottom: 1px solid currentColor;
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
.headLine21 {
padding: 0 0 0.7rem;
margin: 3rem 0;
line-height: 1.2;
}
}
/* - - headLine22 - -*/
.headLine22 {
margin: 4rem 0;
padding: 0 0 0.5rem 1rem;
font-family: "Shippori Mincho B1", serif;
font-size: 2rem;
color: #595757;
border-left: 3px solid currentColor;
}
@media all and (max-width: 896px) {
.headLine22 {
margin: 3rem 0;
}
}
/* - - headLine23 - -*/
.headLine23 {
background-color: #F2F7FF;
border-radius: 1rem;
padding: 1rem 2rem;
font-size: 1.8rem;
margin: 4rem 0;
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
}
/* - - greeting - -*/
.greeting {
padding: 10.5rem 0 9rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01.jpg ) no-repeat center;
background-size: 100% 100%;
}
.greeting .content {
flex-wrap: nowrap;
align-items: flex-start;
}
.greeting .photoBox {
width: 53.3%;
margin-right: -7.4rem;
}
.greeting .photoBox img {
width: 100%;
}
.greeting .textBox {
margin-top: 10.7rem;
flex: 1;
order: 1;
position: relative;
z-index: 5;
padding: 7rem 7.5rem 4.4rem;
padding-inline-end: 5rem;
background-image: linear-gradient( -90deg, rgb(221,236,255,0.8) 1%, rgb(231,241,253,0.8) 40%, rgb(240,245,251,0.8) 100%);
}
.greeting .textBox .comEn02 {
position: absolute;
top: -6.2rem;
left: 8rem;
/* font-size: 12rem; */
}
.greeting .headLine03 {
margin-bottom: 1.5rem;
}
.greeting p {
margin-bottom: 2.4rem;
line-height: 1.76;
}
.greeting .ttl {
margin-bottom: 1.2rem;
}
.greeting .ttl img {
vertical-align: -0.2rem;
width: 4.1rem;
margin-left: 0.5rem;
}
.greeting .comLink03 a {
min-height: 5rem;
font-size: 1.8rem;
min-width: 28rem;
padding: 0 5rem 0 2.5rem;
}
.greeting .comLink03 .arrow-circle {
right: 2.5rem;
}
@media all and (max-width: 896px) {
.greeting {
padding: 7.4rem 0 5.3rem;
}
.greeting .content {
display: block;
}
.greeting .textBox {
padding: 4.1rem 2.0rem 3.1rem 2.7rem;
margin: 0 -1.75rem 0 -0.2rem;
}
.greeting .photoBox {
width: auto;
margin: -4.7rem 2.2rem 0 -1.75rem;
}
.greeting p {
margin-bottom: 2rem;
line-height: 1.43;
}
.greeting .headLine03 {
margin-bottom: 1.2rem;
font-size: 1.7rem;
}
.greeting .textBox .comEn02 {
font-size: 7rem;
top: -3.7rem;
left: 2.4rem;
}
.greeting .comLink03 {
margin-left: -0.5rem;
}
.greeting .comLink03 a {
min-height: 4.5rem;
min-width: 28rem;
font-size: 1.5rem;
}
}
/* - - contactWrap - -*/
.contactWrap {
margin-bottom: 9rem;
}
@media all and (max-width: 896px) {
.contactWrap {
margin-bottom: 4.3rem;
}
}
/* - - contactInner - -*/
.contactInner {
margin: -0.6rem auto 5.5rem;
padding: 3rem 2rem 1.5rem;
text-align: center;
max-width: 58rem;
border: 1px solid #DBD2AE;
border-radius: 1rem;
}
.contactInner .ttl {
font-size: 2.55rem;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.0;
margin-bottom: 0.6rem;
color: #595757;
}
.contactInner .tel {
width: fit-content;
margin: 0 auto 1rem;
font-size: 1.6rem;
font-weight: 500;
color: #262626;
padding-left: 8.5rem;
text-align: left;
background: url(img/common/tel02.png) no-repeat left center;
background-size: 6.8rem auto;
}
.contactInner .tel a {
font-size: 4.8rem;
line-height: 1.2;
font-weight: 400;
color: #86753b;
letter-spacing: 0.03em;
}
.contactInner .tel a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.contactInner {
margin: -0.6rem auto 4.6rem;
padding: 1.8rem 2rem 0.5rem;
border-radius: 0.5rem;
max-width: inherit;
}
.contactInner .ttl {
margin-bottom: 0.3rem;
font-size: 1.5rem;
}
.contactInner .tel {
font-size: 0.94rem;
padding-left: 5rem;
background-size: 4rem auto;
}
.contactInner .tel a{
font-size: 2.8rem;
}
}
/* - - contactHead - -*/
.contactHead {
margin-bottom: 1.8rem;
display: flex;
align-items: flex-end;
justify-content: center;
}
.contactHead .lBox {
text-align: center;
}
.contactHead .hTtl {
font-size: 4rem;
margin-bottom: 0.5rem;
color: #595757;
letter-spacing: 0.04em;
font-weight: 700;
}
.contactHead .lBox p {
font-size: 3rem;
color: #99bff2;
font-weight: 400;
}
.contactHead .txtBox {
margin: 0 0 0.8rem 3rem;
display: flex;
align-items: center;
justify-content: center;
width: 13.2rem;
height: 13rem;
background: url(img/contact/bg01.png) no-repeat center;
background-size: 100% auto;
}
.contactHead .txtBox p {
font-size: 2.6rem;
color: #fff;
line-height: 1.1;
text-align: center;
font-weight: 500;
letter-spacing: 0.04em;
}
.contactHead .txtBox p .num {
font-size: 3.6rem;
}
@media all and (max-width: 896px) {
.contactHead .hTtl {
margin-bottom: 0;
font-size: 2.2rem;
}
.contactHead .lBox p {
font-size: 1.7rem;
}
.contactHead .txtBox {
position: absolute;
top: -1.6rem;
left: calc(50% + 4.4rem);
margin-bottom: 0;
width: 7.6rem;
height: 7.5rem;
}
.contactHead .txtBox p {
font-size: 1.5rem;
}
.contactHead .txtBox p .num{
font-size: 2.1rem;
}
.contactHead {
width: fit-content;
margin: 0 auto 3.7rem;
position: relative;
}
}
/* - - contactDl - -*/
.contactDl {
box-sizing: content-box;
max-width: 78rem;
padding-right: 8.5rem;
margin: 0 auto 1rem;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.contactDl dt {
width: 20rem;
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
letter-spacing: 0.04em;
padding: 2.4rem 0.2rem 2.6rem 0;
border-bottom: 1px solid #E9E9E9;
}
.contactDl dt p {
display: flex;
align-items: center;
}
.contactDl .dtStyle p {
align-self: flex-start;
}
.contactDl dt .any,
.contactDl dt .must {
width: 4.5rem;
text-align: center;
color: #fff;
font-size: 1.5rem;
letter-spacing: 0.04em;
margin-right: 1rem;
font-weight: 400;
margin-top: 0.2rem;
padding-bottom: 0.2rem;
background-color: #F96883;
}
.contactDl dt .any {
background-color: #B0B0B0;
}
.contactDl dd {
padding: 2.6rem 0 2.6rem 0;
font-size: 1.8rem;
letter-spacing: 0.02em;
width: calc(100% - 20rem);
border-bottom: 1px solid #E9E9E9;
}
.contactDl dd .other {
margin-top: 2rem;
}
.contactDl dd .ttl,
.contactDl dd .dateBtn input {
margin-bottom: 2rem;
max-width: 23rem;
border: 1px solid rgb(164, 164, 164);
border-radius: 0.6rem;
text-align: center;
min-height: 6rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 2rem;
font-size: 1.8rem;
letter-spacing: 0;
cursor: pointer;
}
.contactDl dd .ttl:last-of-type {
margin-bottom: 0;
}
.contactDl dd .ttl:last-child {
margin-bottom: 0;
}
.contactDl .dateBox {
display: none;
}
.step2 .contactDl .dateBox.show {
display: block;
}
.contactDl .dtStyle2 {
padding-top: 3.5rem;
}
.contactDl dt:last-of-type,
.contactDl dd:last-of-type {
border: none;
}
@media all and (max-width: 896px) {
.contactDl {
margin-bottom: 2rem;
max-width: inherit;
padding: 0;
display: block;
}
.contactDl dt {
width: auto;
border: none;
padding: 0 0 0.8rem !important;
font-size: 1.4rem;
}
.contactDl dt .any, .contactDl dt .must {
font-size: 1.3rem;
margin-right: 0.8rem;
padding-block: 0.2rem 0.3rem;
}
.contactDl dd {
margin-bottom: 1.4rem;
width: auto;
padding: 0 0 2rem;
font-size: 1.4rem;
}
.contactDl dd .dateBtn input,
.contactDl dd .ttl {
margin-bottom: 1.1rem;
max-width: 16.75rem;
min-height: 5rem;
font-size: 1.4rem;
border-radius: 0.3rem;
}
.contactDl dd:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
/* - - input textarea - -*/
textarea,
input[type="email"],
input[type="tel"],
input[type="text"] {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
border-radius: 0.6rem;
height: 6rem;
color: #000;
border: 1px solid rgb(164, 164, 164);
box-sizing: border-box;
font-size: 1.6rem;
padding: 0 2.5rem;
width: 100%;
letter-spacing: 0.04em;
background-color: #fff;
}
textarea {
margin-top: 2rem;
height: 10rem;
resize: vertical;
padding-block: 1.3rem;
}
textarea:first-child {
margin-top: 0;
}
.wid01[type="text"] {
width: 10rem;
margin-right: 1.3rem;
}
@media all and (max-width: 896px) {
textarea, input[type="email"], input[type="tel"], input[type="text"] {
height: 5rem;
font-size: 1.4rem;
border-radius: 0.3rem;
padding: 0 1.7rem;
}
textarea {
margin-top: 1.6rem;
height: 8.1rem;
padding-block: 1rem;
}
textarea[name="fnote"] {
height: 13.3rem;
}
}
/* - - radio - -*/
input[type="radio"] {
display: none;
}
input[type="radio"] ~ span {
background: url(img/common/radio01.png) no-repeat left center;
background-size: 3rem auto;
border-radius: 0;
display: inline-block;
line-height: 2rem;
cursor: pointer;
padding: 0.8rem 0 0.8rem 4rem;
}
input[type="radio"]:checked ~ span {
background-image: url("img/common/radio02.png");
}
@media all and (max-width: 896px) {
input[type="radio"] ~ span{
font-size: 1.4rem;
padding-left: 3.2rem;
background-size: 2.4rem auto;
}
}
/* - - radioUl - -*/
.radioUl {
margin: -0.7rem 0 -0.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem 4.5rem;
}
.radioUl .wpcf7-form-control-wrap {
display: block;
}
.radioUl .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: 1rem 4.5rem;
}
.radioUl .wpcf7-list-item {
margin-left: 0;
}
@media all and (max-width: 896px) {
.radioUl {
margin: 0 0 -1rem;
}
.radioUl .wpcf7-radio {
gap: 1rem 3.6rem;
}
}
/* - - radioUl02 - -*/
.radioUl02 {
margin-bottom: 2.9rem;
gap: 1rem;
}
.radioUl02 .wpcf7-radio {
gap: 1rem;
}
.radioUl02 input[type="radio"] ~ span {
background: none;
padding: 0;
width: 10rem;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
border: 1px solid rgb(164, 164, 164);
border-radius: 0.6rem;
}
.radioUl02 input[type="radio"]:checked ~ span {
background: #BFEDE6;
}
@media all and (max-width: 896px) {
.radioUl02 {
margin-bottom: 1.9rem;
}
.radioUl02 li {
width: calc((100% - (0.8rem * 3)) / 4);
}
.radioUl02 .wpcf7-radio {
gap: 0.8rem;
}
.radioUl02 .wpcf7-list-item {
width: calc((100% - (0.8rem * 3)) / 4);
}
.radioUl02 input[type="radio"] ~ span {
width: 100%;
height: 5rem;
font-size: 1.4rem;
border-radius: 0.3rem;
}
}
/* - - privacyBox - -*/
.privacyBox {
max-width: 78.5rem;
padding-right: 9.5rem;
margin: 0 auto 2.3rem;
box-sizing: content-box;
}
.privacyBox .sub {
padding: 1.3rem 3.5rem;
height: 12.5rem;
overflow-y: scroll;
border-radius: 0.6rem;
border: 1px solid rgb(164, 164, 164);
}
.privacyBox p {
font-size: 1.5rem;
letter-spacing: 0.04em;
line-height: 1.733;
}
.privacyBox p .txtSpan {
font-size: 1.6rem;
margin-bottom: 0.8rem;
display: block;
}
@media all and (max-width: 896px) {
.privacyBox {
max-width: inherit;
padding: 0;
}
.privacyBox .sub{
padding: 1.3rem 1.5rem;
border-radius: 0.3rem;
height: 10.2rem;
}
.privacyBox p {
font-size: 1.2rem;
line-height: 1.5;
}
.privacyBox p .txtSpan{
font-size: 1.4rem;
margin-bottom: 0.3rem;
}
}
/* - - checkText - -*/
.checkText {
margin-bottom: 4.8rem;
text-align: center;
}
.checkText .wpcf7-list-item {
position: relative;
margin-left: 0;
}
.checkText a {
text-decoration: underline;
text-underline-offset: 6px;
}
.checkText a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.checkText {
margin-bottom: 3.5rem;
}
}
/* - - checkbox - -*/
input[type="checkbox"] {
opacity: 0;
position: absolute;
left: 0;
top: 0.4rem;
margin: 0;
width: 2.8rem;
height: 2.8rem;
}
input[type="checkbox"] ~ span {
background: url(img/common/check01.png) no-repeat left center;
background-size: 2.8rem auto;
border-radius: 0;
display: inline-block;
line-height: 2rem;
cursor: pointer;
font-size: 1.5rem;
letter-spacing: 0.02em;
padding: 0.8rem 0 0.8rem 3.5rem;
}
input[type="checkbox"]:checked ~ span {
background-image: url("img/common/check02.png");
}
@media all and (max-width: 896px) {
input[type="checkbox"] ~ span {
font-size: 1.3rem;
padding-left: 3.5rem;
padding-top: 0.6rem;
background-size: 2.3rem auto;
}
}
/* - - submit - -*/
.submit {
position: relative;
text-align: center;
}
.submit li {
margin: 0 1rem;
display: inline-block;
}
.submit li input {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
width: 26rem;
height: 6rem;
border-radius: 6rem;
text-align: center;
cursor: pointer;
font-size: 2.2rem;
font-weight: 700;
color: #fff;
border: none;
letter-spacing: 0.04em;
background: #62A2F8;
}
.submit li .wpcf7c-btn-back {
color: #fff;
background-color: #CACACA;
}
.submit li.disabled input {
filter: grayscale(100%);
pointer-events: none;
}
.submit .wpcf7-spinner {
position: absolute;
bottom: -4rem;
margin: 0;
left: calc(50% - 2rem);
transform: translateX(50%);
}
.submit li input:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.submit li {
margin: 0 0.4rem;
}
.submit li input{
width: 19.4rem;
height: 4.5rem;
font-size: 1.5rem;
}
.submit {
position: relative;
}
}
/* - - thanksWrap - -*/
.thanksWrap {
padding: 2.4rem 0 14rem;
text-align: center;
}
.thanksWrap p {
letter-spacing: 0.04em;
line-height: 2.12;
}
@media all and (max-width: 896px) {
.thanksWrap {
padding: 0.2rem 0 12.8rem;
}
.thanksWrap p {
line-height: 1.64;
}
}
/* - - confirmed - -*/
.confirmed dd span:not(.fage) {
display: block;
}
.confirmed .inner {
display: none;
}
.confirmed .confirmTxt {
text-align: center;
letter-spacing: 0.04em;
margin-bottom: 6rem;
padding-top: 5rem;
}
.confirmed .contactDl {
padding-right: 0;
}
.confirmed .contactDl dd p {
margin-bottom: 1rem;
}
@media all and (min-width: 897px) {
.confirmed .contactDl dt {
padding-top: 2.6rem;
}
.confirmed .contactDl .dtStyle2 {
padding-top: 2.6rem;
}
}
@media all and (max-width: 896px) {
.confirmed .confirmTxt {
margin: -1.5rem 0 3.5rem;
padding-top: 0;
}
.confirmed .submit li input {
width: 15rem;
}
.confirmed .contactDl dd p {
margin-bottom: 0.2rem;
}
.formError {
left: 0 !important;
}
}
/* - - comheading01 - -*/
.comheading01 {
text-align: center;
}
.comheading01 .en {
margin-bottom: -0.3rem;
display: block;
font-size: 10rem;
color: #99bff2;
line-height: 1;
}
.comheading01.mbSml .headLine03 {
margin-bottom: 4.9rem;
}
@media all and (max-width: 896px) {
.comheading01 .en {
margin-bottom: -1.2rem;
font-size: 6rem;
}
.comheading01 .en02 {
margin-bottom: 0;
}
.comheading01.mbSml .headLine03 {
margin-bottom: 2.8rem;
}
}
/* - - comheading02 - -*/
.comheading02 {
margin: 0 0 2.3rem;
text-align: left;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.comheading02 .photo {
margin-right: 0.6rem;
flex-shrink: 0;
}
@media all and (max-width: 896px) {
.comheading02 {
margin: 0 0 1.2rem 3rem;
}
.comheading02 .photo {
margin-right: 1.1rem;
width: 5rem;
}
}
/*------リバイブナビ--end--*/
/*------リバイブナビ--end--*/
/*------リバイブナビ--end--*/
/*------治療メニューゴールドライン見出し このコード必要なのaga-tko.com/highじゃないの？-*/
/*.ttl {
margin-bottom: 0.2rem;
}*/
.sub {
font-size: 80%;
display: block;
}
/* - - snsLinkUl - -*/
.snsLinkUl {
margin-bottom: 11.3rem;
gap: 2rem 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.snsLinkUl li {
width: 33rem;
text-align: center;
}
.snsLinkUl li .ttl {
padding: 0 1rem 0.3rem;
font-size: 2rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
width: fit-content;
margin: 0 auto 0.5rem;
position: relative;
}
.snsLinkUl li .ttl::before {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
left: 0;
bottom: 0.5rem;
transform: rotate(-30deg);
content: "";
}
.snsLinkUl li .ttl::after {
width: 1px;
background-color: currentColor;
position: absolute;
top: 0.5rem;
right: 0;
bottom: 0.5rem;
transform: rotate(30deg);
content: "";
}
.snsLinkUl .tel a,
.snsLinkUl .link a {
display: flex;
justify-content: center;
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(131,180,247) 0%, rgb(136,183,246) 6%, rgb(140,185,245) 18%, rgb(119,174,247) 40%, rgb(98,162,248) 61%, rgb(143,188,249) 77%, rgb(188,214,249) 90%, rgb(129,179,246) 100%);
border-radius: 6rem;
border: 3px solid #fff;
min-height: 8rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
align-items: center;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem 0.3rem 0.5rem rgba(78, 146, 238, 0.8),-0.3rem -0.3rem 0.5rem rgba(78, 146, 238, 0.8);
}
.snsLinkUl .link span {
display: inline-block;
padding-left: 5.2rem;
background: url(img/common/img04.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl .link02 a {
position: relative;
text-shadow: 0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem 0.3rem 0.5rem rgba(32, 187, 17, 0.8),-0.3rem -0.3rem 0.5rem rgba(32, 187, 17, 0.8);
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background-image: linear-gradient( 360deg, rgb(77,202,75) 0%, rgb(96,215,77) 6%, rgb(114,227,79) 18%, rgb(72,206,48) 40%, rgb(30,185,17) 61%, rgb(92,210,74) 77%, rgb(153,235,131) 89%, rgb(12,195,0) 100%);
}
.snsLinkUl .link02 span {
background-image: url(img/common/img05.png);
}
.snsLinkUl .tel a {
box-shadow: 0rem 0.3rem 0.837rem 0.063rem rgba(0, 0, 0, 0.17);
background: #F39E19;
font-size: 1.35rem;
color: #262626;
letter-spacing: 0;
font-weight: 700;
text-shadow: none;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN",'ヒラギノ明朝 ProN', 'ヒラギノ角ゴシック', "Noto Sans JP",sans-serif;
}
.snsLinkUl .tel .num {
display: block;
line-height: 1;
font-size: 3.6rem;
text-align: left;
font-weight: 400;
letter-spacing: 0.03em;
color: #fff;
}
.snsLinkUl .tel .telSpan {
padding-left: 5.5rem;
background: url(img/common/img06.png) no-repeat left center;
background-size: 4.6rem auto;
}
.snsLinkUl a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.snsLinkUl {
margin-bottom: 5.4rem;
display: block;
}
.snsLinkUl li {
width: auto;
margin: 0 auto 1rem;
max-width: 30.2rem;
}
.snsLinkUl li:last-child {
margin-bottom: 0;
}
.snsLinkUl li .ttl {
font-size: 1.5rem;
margin-bottom: 0.2rem;
}
.snsLinkUl .tel a, .snsLinkUl .link a {
min-height: 6rem;
border-width: 2px;
font-size: 2.2rem;
box-shadow: 0rem 0.1rem 0.4rem 0.063rem rgba(0, 0, 0, 0.17);
}
.snsLinkUl .link span {
padding-left: 4.5rem;
background-size: 3.8rem auto;
}
.snsLinkUl .tel a {
font-size: 1.15rem;
}
.snsLinkUl .tel .num {
font-size: 3.1rem;
}
.snsLinkUl .tel .telSpan {
padding-left: 4.5rem;
background-size: 4rem auto;
}
}
/* - - snsLinkUl -end -*/
/*------------------------------------------------------------
ヘッダー
------------------------------------------------------------*/
#gHeader {
margin-top: var(--wp-admin--admin-bar--height);
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 1000;
box-shadow: 0.3rem 0.3rem 1.8rem rgba(204, 204, 204, 0.4);
}
/* #gHeader .hInner {
padding: 1.2rem 2rem 1.4rem;
align-items: flex-start;
} */
#gHeader .hInner {
padding: 1.2rem 2rem 0;
align-items: flex-start;
}
/* #gHeader .lBox {
width: min(28vw,38rem);
} */
/* #gHeader .lBox {
width: min(37vw,45rem);
} */
.hTxt {
font-weight: 400;
font-size: min(1vw,1.4rem);
color: #a0a0a0;
font-feature-settings: "palt";
}
#gHeader .logo a {
align-items: center;
display: inline-flex;
}
#gHeader .logo a:hover {
opacity: 0.5;
}
#gHeader .logo .txt {
font-weight: 400;
font-size: min(2.2vw,3rem);
color: #595757;
letter-spacing: -0.12em;
}
#gHeader .logoImg {
margin-right: 0.5rem;
flex-shrink: 0;
width: min(3.6vw,5rem);
height: min(3.6vw,5rem);
border-radius: 100%;
overflow: hidden;
position: relative;
}
#gHeader .logoImg img {
width: 100%;
height: 100%;
object-fit: cover;
}
#gHeader .rBox {
margin-top: -0.1rem;
padding: 0 0.4rem 0 1rem;
flex: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
}
#gHeader .rBox a:hover {
opacity: 0.5;
}
/* #gHeader .hBox {
margin-bottom: 1.3rem;
display: flex;
justify-content: flex-end;
gap: 0 1.5rem;
} */
#gHeader .hBox {
margin-bottom: 0;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0 1.5rem;
}
#gHeader .hBox .tel {
display: flex;
align-items: center;
margin-top: -0.2rem;
}
#gHeader .hBox .tel a {
font-size: min(2.8vw,3.535rem);
display: inline-block;
padding-left: 0.7rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
#gHeader .hBox .tel .telLinkImg {
padding: 0;
margin-bottom: -0.3rem;
display: flex;
align-items: center;
}
#gHeader .linkUl {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
#gHeader .linkUl li {
width: 20rem;
}
#gHeader .linkUl li a {
display: flex;
align-items: center;
justify-content: center;
min-height: 5rem;
font-size: 1.9rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #fff;
padding-bottom: 0.3rem;
background-color: #47C44D;
box-shadow: 0.3rem 0.2rem 0.7rem rgba(0, 0, 0, 0.17);
}
#gHeader .linkUl .liStyle a {
background-color: #62A2F8;
}
#gHeader .linkUl li .linkImg {
width: 2.8rem;
margin: 0.6rem 0.5rem 0 0;
}
#gHeader .love_pc {
width: min(2.9vw,5.4rem);
}
#gHeader .love_sp {
display: none;
}
#gHeader nav ul:not(.subUl) {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0 min(1.7vw,2.3rem);
font-size: min(1.3vw,1.7rem);
margin-block-start: 0em;
margin-block-end: 0em;
}
#gHeader nav > ul > li {
position: relative;
}
#gHeader nav .jsBox {
display: none;
padding: 1.8rem 0 1rem;
position: absolute;
top: calc(100% + 1.4rem);
left: -0.8rem;
width: 28.6rem;
background-color: #fff;
}
#gHeader nav .jsBox .subUl a {
display: block;
padding: 0.75rem 1.4rem;
font-size: 1.6rem;
color: #595757;
position: relative;
border-bottom: 1px solid #D2D2D2;
}
#gHeader nav .jsBox > .subUl > li:last-child a {
border: none;
}
#gHeader nav .jsBox .subUl a .subSpan {
padding-left: 0.8rem;
display: inline-block;
line-height: 1.2;
position: relative;
border-left: 3px solid #62A2F8;
}
#gHeader nav .jsBox .subUl a .subSpan:after {
width: 100%;
height: 2px;
background-color: #62A2F8;
position: absolute;
bottom: -1rem;
left: 0.8rem;
content: "";
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s;
}
#gHeader nav > ul > li > a {
padding-bottom: 2rem;
position: relative;
}
#gHeader nav > ul > li > a:after {
width: calc(100% + 1rem);
height: 3px;
background-color: #62A2F8;
position: absolute;
bottom: 1.1rem;
left: -0.5rem;
content: "";
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s;
}
#gHeader nav .jsBox > .subUl > li .subUl a {
border-style: dotted;
}
#gHeader nav .jsBox > .subUl > li .subUl a span {
border-color: transparent;
}
#gHeader nav > ul > li.on > a:after {
transform: scaleX(1);
}
@media all and (min-width: 1101px) {
.menu {
display: none;
}
#gHeader nav > ul > li > a:hover:after {
transform: scaleX(1);
}
#gHeader nav .jsBox .subUl a:hover .subSpan:after {
transform: scaleX(1);
}
.menuBox .snsLinkUl {
display: none !important;
}
/* #gHeader .hInner {
min-height: 11.4rem;
} */
#gHeader nav {
/* padding: 0 2.4rem 1.4rem 18rem; */
padding: 0 0rem 1.4rem 0rem;
}
#gHeader nav .jsBox .subSpan .icon {
display: none;
}
#gHeader nav a:hover {
opacity: 1 !important;
color: rgba(89, 87, 87, 0.5) !important;
}
}
@media all and (min-width: 897px) and (max-width: 1380px) {
#gHeader nav ul:not(.subUl) {
gap: 0 min(1.0vw,2.3rem);
}
}
@media screen and (max-width: 600px) {
#wpadminbar {
position: fixed !important;
}
}
@media all and (max-width: 1100px) {
#gHeader {
box-shadow: 0px 0.15rem 0.7rem 0.15rem rgba(204, 204, 204, 0.26);
}
#gHeader nav.pc {
display: none !important;
}
#gHeader .hInner {
position: relative;
align-items: center;
padding: 0.4rem 2rem 0.3rem;
}
/* #gHeader .lBox {
width: 25rem;
} */
/*#gHeader .lBox {
width: 29.5rem;
} */
.hTxt {
font-size: 0.9rem;
}
#gHeader nav {
margin: 0 1.5rem;
padding-bottom: 1.5rem;
}
#gHeader nav ul:not(.subUl) {
flex-direction: column;
font-size: 1.5rem;
color: #4f96f5;
font-weight: 700;
}
#gHeader nav > ul > li {
width: 100%;
}
#gHeader nav > ul > li > a {
color: #4f96f5;
display: block;
padding: 1.35rem 1.2rem;
border-bottom: 1px dotted #C8C5C5;
}
#gHeader nav > ul > .home > a {
color: #000;
}
#gHeader nav .jsBox .subUl a .subSpan {
border: none;
display: flex;
padding-left: 0;
}
#gHeader nav .jsBox .subUl a .subSpan .icon {
flex-shrink: 0;
margin-right: 0.5rem;
}
#gHeader nav .jsBox .subUl a {
padding: 1rem 1.4rem;
font-weight: 400;
font-size: 1.5rem;
color: #000000;
border-style: dotted;
}
#gHeader nav .jsBox > .subUl > li .subUl a {
padding-left: 3rem;
}
#gHeader nav .jsBox > .subUl > li:last-child a {
border-bottom: 1px dotted #D2D2D2;
}
#gHeader nav > ul > li .jsIco {
z-index: -1;
cursor: pointer;
position: absolute;
top: 1.4rem;
right: 1.2rem;
display: block;
width: 2rem;
height: 2rem;
}
#gHeader nav > ul > li .jsIco::after {
content: '';
position: absolute;
top: 0.8rem;
left: 50%;
width: 0.7rem;
height: 0.7rem;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: translate(-50%, -60%) rotate(45deg);
transform-origin: center;
transition: all 0.3s ease;
}
#gHeader nav > ul > li .jsIco.on::after {
top: 1.3rem;
transform: translate(-50%, -60%) rotate(225deg);
}
#gHeader nav > ul > li:last-child a {
border: none;
}
#gHeader nav .jsBox .subUl .subList a {
padding: 0.8rem 1rem 0.7rem 2.1rem;
}
#gHeader nav .jsBox {
display: none;
padding: 0;
width: auto;
position: static;
}
#gHeader .logoImg {
width: 2.4rem;
height: 2.4rem;
}
#gHeader .logo .txt{
font-size: 2rem;
}
#gHeader .love_pc {
display: none;
}
#gHeader .love_sp {
width: 3.6rem;
display: block;
}
#gHeader .rBox{
/* padding-right: 3.3rem; */
display: block;
}
#gHeader .hBox {
margin: 0;
}
#gHeader .hBox .tel:not(.snsLinkUl .tel) {
display: none;
}
#gHeader .linkUl {
display: none;
}
.menu {
position: absolute;
height: 2rem;
width: 2.5rem;
top: calc(50% + 0.2rem);
right: 1.8rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
/* transition: opacity .25s ease;
transition: all .3s ease; */
}
.menu:hover {
opacity: 0.5;
}
.menu span {
background: rgb(59, 57, 56);
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.menu span:nth-of-type(1) {
top: 0;
}
.menu span:nth-of-type(2) {
top: 0.8rem;
}
.menu span:nth-of-type(3) {
top: auto;
bottom: 0.2rem;
}
.menu.on .top {
top: 50%;
transform: translate(-50%, -50%) rotate(315deg);
}
.menu.on .middle {
opacity: 0;
}
.menu.on .bottom {
top: 50%;
bottom: auto;
transform: translate(-50%, -50%) rotate(-315deg);
}
.menu.on {
width: 2.2rem;
top: calc(50% + 0rem);
right: 2.1rem;
}
.menuBox {
position: fixed;
/*top: 5.05rem; */
top: 6.05rem;
right: 0;
width: 100%;
height: calc(100% - 5.05rem);
z-index: 800;
padding: 1.5rem 0;
transform: translateX(2000px);
background: rgba(255, 255, 255, 0.95) url(img/common/menu_bg.png) no-repeat center top;
background-size: 100% 1rem;
overflow-y: auto;
transition: all .5s ease-out;
}
.menuBox .sp {
display: block !important;
}
.menuBox.on {
transform: translateX(0);
}
.menuBox .snsLinkUl{
display: flex;
margin: 0 3.7rem 3rem;
flex-direction: column;
gap: 1rem 2.5rem;
text-align: center;
}
.menuBox .snsLinkUl li {
margin: 0 auto;
max-width: 46.2rem;
width: 100%;
}
#gHeader nav a:hover,
.menuBox .snsLinkUl a:hover {
opacity: 0.5;
}
}
@media all and (min-width: 897px) {
.sp {
display: none !important;
}
}
@media all and (min-width: 1101px) {
.menuBox {
display: none !important;
}
}
/*------------------------------------------------------------
ヘッダー end
------------------------------------------------------------*/
/* - - fixedBox -芋のフッターボタン -*/
@media all and (max-width: 896px) {
.fixedBox {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
background-color: #fff;
right: 0;
}
.fixedBox ul {
margin-bottom: 0 !important;
display: flex;
}
.fixedBox li {
padding: 0 !important;
margin: 0 !important;
width: 33.33%;
}
.fixedBox li::before {
display: none !important;
}
.fixedBox a {
justify-content: center;
min-height: 5rem;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
background-color: #62A2F8;
}
.fixedBox a:hover {
opacity: 0.5;
}
.fixedBox img {
width: 2.4rem;
margin-right: 0.3rem;
}
.fixedBox .li02 a {
background-color: #05B903;
}
.fixedBox .li03 a {
background-color: #F39E19;
}
}
/* - - fixedBox -芋のフッターボタン ---end---*/
/*--------------------------------------
header-midashi .navi_list
-----------------------------------------*/
@media only screen and (min-width: 1100px) {
.spnav {
display: none;
}
}
.site_nav {
width: 100%;
/* justify-content: space-around; */
margin: auto;
text-align: center;
display: block;
/* margin-top: 36px; */
}
.nav_list {
width: 100%;
/* justify-content: space-between; */
margin: 0 auto;
display: block;
}
.nav_item {
list-style: none;
padding: 0;
margin:0 auto 5px;
display: inline-block;
flex-wrap: wrap;
justify-content: space-around;
}
.nav_link {
color: inherit;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: block;
padding: 0.5em 0em 0.5em 0em;
transition: all 0.3s ease-in-out 0s;
}
.nav_link:hover {
color: #fff;
background-color: #50360d;
opacity: 0.8;
}
.nav_link i {
margin-right: 0.5em;
}
@media only screen and (min-width: 768px) {
.nav_item {
font-size: 24px;
margin:0 1em 0 5px;
}
}
/*--------------------------------------
.navi_list-------end---
-----------------------------------------*/
/*--------------------------------------
円グラフ横→縦-------start---
-----------------------------------------*/
@media all and (max-width: 896px) {
.visitorImgBox {
margin: 0 0 3rem;
display: block;
}
.visitorImgBox .textBox {
padding: 0 0 3.5rem;
}
}
/*-------duo-method-----*/
@media screen and (min-width: 769px) and (max-width: 1439px) {
.inner {
max-width: 90.2777777778vw;
padding: 0 3.4722222222vw;
}
}
@media (max-width: 768px) {
.inner {
padding: 0 8vw;
}
}
media (min-width: 1440px) {
.inner {
max-width: 1300px;
width: 100%;
padding: 0 50px;
margin: 0 auto;
}}
@media screen and (min-width: 769px) {
.sp {
display: none;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--flex {
gap: 1.8055555556vw;
}
}
@media screen and (min-width: 1440px) {
.t-method__item--flex {
gap: 26px;
}}
@media (max-width: 768px) {
.t-method__item--flex {
gap: 5px;
}
}
@media (max-width: 768px) {
.t-method__item--flexSp {
margin-top: 5.3333333333vw;
gap: 3.2vw !important;
}
}
@media screen and (max-width: 768px) {
.t-method__item--en {
/*font-size: 22px;*/
color: #d2a005;
/* text-align: center; */
}}
@media screen and (max-width: 768px) {
.t-method__item--num {
font-size: 22px;
color: #d2a005;
text-align: center;
}}
@media (max-width: 768px) {
.t-method__item--line {
width: 1px;
height: 12.8vw;
background: #e2c66f;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--line {
height: 4.3055555556vw;
width: 1px;
background: #e2c66f;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--en {
font-size: 1.5277777778vw;
color: #d2a005;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--num {
font-size: 2.7777777778vw;
margin-top: -.6944444444vw;
color: #d2a005;
}
}
@media (max-width: 768px) {
.t-method__item--head {
gap: 3.4666666667vw;
}
}
.t-method__item--head {
gap: 13px;
}
.t-method__item {
/* width: calc(50% - 18px); */
background: #fff;
/* padding: 45px 30px 25px;
border-radius: 10px;*/
}
/*---upper end----*/
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method {
background: #f8f8f5;
padding-top: 13.8888888889vw;
padding-bottom: 8.3333333333vw;
}
}
@media (max-width: 768px) {
.t-method {
padding-top: 21.3333333333vw;
padding-bottom: 0;
}
}
.t-method {
background: #f8f8f5;
/* padding-top: 200px; */
padding-top: 50px;
padding-bottom: 120px;
position: relative;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__bg {
width: 133.3333333333vw;
}
}
@media (max-width: 768px) {
.t-method__bg {
position: absolute;
top: 53.3333333333vw;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
}
}
.t-method__bg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 1920px;
}
@media screen and (min-width: 769px) {
.pc {
display: block;
}
}
@media screen and (max-width: 768px) {
.pc {
display: none !important;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.inner {
max-width: 90.2777777778vw;
padding: 0 3.4722222222vw;
}
}
@media screen and (max-width: 768px) {
.inner {
padding: 0 8vw;
}
}
.inner {
max-width: 1300px;
width: 100%;
/* padding: 0 50px; */
margin: 0 auto;
}
/*
media screen and (min-width: 1440px) {
.inner {
max-width: 1300px;
width: 100%;
padding: 0 50px;
margin: 0 auto;
}} */
.t-method__wrapper {
position: relative;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.topPage-en {
font-size: 2.0833333333vw;
margin-bottom: 1.3888888889vw;
}
}
.topPage-en {
color: #d2a005;
font-size: 30px;
font-weight: 300;
line-height: 1.23;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.topPage-en {
font-size: 5.3333333333vw;
margin-bottom: 2.6666666667vw;
}
}
.en {
font-family: "Cormorant Garamond", serif;
}
.none, .u-none {
display: none !important;
}
.none {
display: none;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.topPage-sub {
font-size: 2.5vw;
margin-bottom: 1.3888888889vw;
}
}
.topPage-sub {
font-weight: 500;
font-size: 36px;
line-height: 1.38;
margin-bottom: 20px;
letter-spacing: .05em;
}
.ja {
font-family: "Shippori Mincho B1", serif;
}
@media (max-width: 768px) {
.t-method .topPage-sub {
font-size: 4vw;
letter-spacing: .06em;
}
}
@media (max-width: 768px) {
.topPage-sub {
font-size: 4.8vw;
margin-bottom: 2.6666666667vw;
letter-spacing: .08em;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.topPage-title {
font-size: 3.4722222222vw;
}
}
.topPage-title {
font-size: 50px;
font-weight: 500;
letter-spacing: .05em;
line-height: 1.44;
}
@media (max-width: 768px) {
.t-method .topPage-title {
font-size: 5.0666666667vw;
letter-spacing: .05em;
}
}
@media (max-width: 768px) {
.topPage-title {
font-size: 6.9333333333vw;
letter-spacing: .08em;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__title {
font-size: 5.5555555556vw;
margin-top: .6944444444vw;
padding-bottom: .6944444444vw;
}
}
.t-method__title {
font-size: 80px;
font-weight: 500;
line-height: 1.45;
margin-top: 10px;
color: #d2a005;
padding-bottom: 10px;
border-bottom: 1px solid #d2a005;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@media (max-width: 768px) {
.t-method__title {
font-size: 8.5333333333vw;
line-height: 1.45;
margin-top: 2.6666666667vw;
padding-bottom: 2.6666666667vw;
border-bottom: 1px solid #d2a005;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__flex {
margin-top: 4.1666666667vw;
gap: 4.5138888889vw;
}
}
.t-method__flex {
margin-top: 60px;
gap: 65px;
}
.t-method__items {
margin-top: 94px;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 36px;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 768px) {
.t-method__flex {
margin-top: 24vw;
gap: 10.6666666667vw;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-flow: column-reverse;
-ms-flex-flow: column-reverse;
flex-flow: column-reverse;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__text {
width: calc(100% - 35.7638888889vw - 4.5138888889vw - 2.5vw);
font-size: 1.1111111111vw;
}
}
@media (min-width: 1440px) {
.t-method__text {
width: calc(100% - 515px - 65px - 36px);
font-size: 16px;
letter-spacing: .04em;
line-height: 2;
}}
@media (max-width: 768px) {
.t-method__text {
font-size: 3.7333333333vw;
letter-spacing: .04em;
line-height: 2.1;
width: 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__img {
width: 35.7638888889vw;
padding-right: 2.5vw;
}
}
.t-method__img {
/* width: 515px; */
width: 350px;
/* padding-right: 36px; */
padding-right: 8px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__items {
margin-top: 6.5277777778vw;
gap: 2.5vw;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1440px)
.t-method__items {
margin-top: 94px;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 36px;
}}
@media (max-width: 768px) {
.t-method__items {
margin-top: 10.6666666667vw;
-webkit-flex-wrap: unset;
-ms-flex-wrap: unset;
flex-wrap: unset;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
gap: 8vw;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item {
width: calc(50% - 1.25vw);
padding: 3.125vw 2.0833333333vw 1.7361111111vw;
border-radius: .6944444444vw;
}
}
@media (max-width: 768px) {
.t-method__item {
padding: 6.6666666667vw 5.3333333333vw;
width: 100%;
}
}
@media (min-width: 1440px) {
.t-method__item {
width: calc(50% - 18px);
background: #fff;
padding: 45px 30px 25px;
border-radius: 10px;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--flex {
gap: 1.8055555556vw;
}
}
@media screen and (min-width: 1440px) {
.t-method__item--flex {
gap: 26px;
}}
@media (max-width: 768px) {
.t-method__item--flex {
gap: 5px;
}
}
/*@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--cont {
width: calc(100% - 1.8055555556vw - 16.8055555556vw);
}
}*/
/*@media screen and (min-width: 769px) {
.t-method__item--cont {
width: calc(100% - 26px - 242px);
}}*/
@media (max-width: 768px) {
.t-method__item--cont {
width: calc(100% - 6.9333333333vw - 64.5333333333vw);
width: 100%;
}
}
/*@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--head {
gap: .9027777778vw;
}
} */
@media screen and (min-width: 769px) {
.t-method__item--head {
gap: 13px;
}}
@media (max-width: 768px) {
.t-method__item--head {
gap: 3.4666666667vw;
}
}
/*@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--en {
font-size: 1.5277777778vw;
}
}*/
@media screen and (min-width: 769px) {
.t-method__item--en {
font-size: 22px;
color: #d2a005;
text-align: center;
}}
/*@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--num {
font-size: 2.7777777778vw;
margin-top: -.6944444444vw;
}
} */
@media screen and (min-width: 769px) {
.t-method__item--num {
font-size: 40px;
color: #d2a005;
text-align: center;
/* margin-top: -10px !important; */
}}
@media (max-width: 768px) {
.t-method__item--num {
font-size: 6.9333333333vw;
/* margin-top: -2.6666666667vw ; */
letter-spacing: .05em;
}
}
.t-method__item--num {
font-size: 40px;
color: #d2a005;
text-align: center;
margin-top: 5px;
}}
/*@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--line {
height: 4.3055555556vw;
}
} */
@media screen and (min-width: 769px) {
.t-method__item--line {
width: 1px;
height: 62px;
background: #e2c66f;
}}
/*@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--title {
font-size: 1.5972222222vw;
}
} */
@media screen and (min-width: 769px) {
.t-method__item--title {
font-size: 23px;
font-weight: 500;
}}
@media (max-width: 768px) {
.t-method__item--title {
font-size: 5.3333333333vw;
}
}
@media (max-width: 768px) {
.t-method__item--flexSp {
margin-top: 5.3333333333vw;
gap: 3.2vw !important;
}
}
@media screen and (min-width: 1440px) {
.t-method__item--img {
width: 242px;
}}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--img {
width: 16.8055555556vw;
}
}
@media (max-width: 768px) {
.t-method__item--img {
width: 30.9333333333vw;
}
}
@media screen and (min-width: 769px) {
.pc {
display: block;
}
}
@media screen and (min-width: 769px) {
.sp {
display: none !important;
}
}
@media screen and (min-width: 769px) {
.sp {
display: none;
}
}
@media screen and (min-width: 769px) {
.t-method__item--img-sp img {
display: none;
}
}
@media screen and (max-width: 768px) {
.sp {
display: block ;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-method__item--text {
font-size: .9722222222vw;
margin-top: 1.3888888889vw;
}
}
@media screen and (min-width: 1440px) {
.t-method__item--text {
font-size: 14px;
letter-spacing: .04em;
line-height: 1.78;
margin-top: 20px;
}}
@media (max-width: 768px) {
.t-method__item--text {
width: calc(100% - 3.2vw - 30.9333333333vw);
/* font-size: 3.2vw; */
font-size: 3.6vw;
letter-spacing: 0;
line-height: 1.66;
margin-top: 0;
}
}
.m_title_pink__small {
/* font-size: 22px; */
line-height: 1.4;
font-weight: bold;
text-align: center;
color: #f65275;
}
.uq_layout_pill_about_title {
font-size: 22px;
line-height: 1.4;
font-weight: bold;
text-align: center;
color: #f65275 !important;
}
/*------t-method end------*/
/*----duo problem---*/
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-problem {
margin-top: 4.1666666667vw;
padding-bottom: 4.1666666667vw;
}
}
@media (min-width: 1440px) {
.t-prblem {
margin-top: 60px;
padding-bottom: 35px;
}}
@media (max-width: 768px) {
.t-problem {
margin-top: 21.3333333333vw;
padding-bottom: 12vw;
}
}
.t-problem__wrapper {
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.t-problem__wrapper {
position: relative;
z-index: 1;
}
}
.t-problem__flex {
position: relative;
}
/* @media (max-width: 768px) { */
@media (max-width: 1440px) {
.t-problem__flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-problem__items {
margin-top: 6.25vw;
max-width: 33.6805555556vw;
}
}
.t-problem__items {
margin-top: 90px;
border-top: 1px dotted #d2a005;
max-width: 485px;
width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-problem__item {
gap: .6944444444vw;
padding: 3.4722222222vw 0;
}
}
.t-problem__item {
border-bottom: 1px dotted #d2a005;
gap: 10px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 50px 0;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-problem__item--icon {
width: 1.9444444444vw;
}
}
.t-problem__item--icon {
width: 28px;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-problem__item--text {
font-size: 1.25vw;
}
}
.t-problem__item--text {
/* font-size: 18px; */
font-size: 24px;
letter-spacing: .1em;
}
@media (min-width: 1440px) {
.t-problem__img {
position: absolute;
width: 600px;
/* width: 750;*/
top: 150px;
right: -5px;
}}
/* @media screen and (min-width: 769px) and (max-width: 1439px) { */
/* @media screen and (min-width: 0px) and (max-width: 1439px) {
.t-problem__img {
width: 52.0833333333vw;
/* top: 10.4166666667vw; */
/* right: -25vw; */
/* right: -10vw;
position: absolute;
}
} */
@media screen and (min-width: 769px) and (max-width: 1440px) {
.t-problem__img {
margin-top: 16vw;
width: 47.3333333333vw;
margin-right: -24vw;
position: unset;
top: unset;
right: unset;
}
}
@media (max-width: 768px) {
.t-problem__img {
margin-top: 16vw;
width: 77.3333333333vw;
margin-right: -24vw;
position: unset;
top: unset;
right: unset;
}
}
.t-problem__img img {
z-index: -1;
}
@media (min-width: 1440px) {
.t-problem__img:before {
content: "";
position: absolute;
background: #f1ebd8;
/* width: 845px; */
width: 600px;
height: 385px;
bottom: -100px;
left: -140px;
z-index: -2;
}}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-problem__img:before {
content: "";
width: 58.6805555556vw;
height: 26.7361111111vw;
bottom: -6.9444444444vw;
left: -9.7222222222vw;
background: #f1ebd8;
position: absolute;
z-index: -2;
}
}
@media (max-width: 768px) {
.t-problem__img:before {
content: "";
width: 84vw;
height: 40vw;
bottom: -10.6666666667vw;
left: 0;
background: #f1ebd8;
position: absolute;
z-index: -2;
}
}
/*-----duo recommend------*/
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend {
margin-top: 8.3333333333vw;
margin-bottom: 11.1111111111vw;
}
}
.t-recommend {
margin-top: 120px;
margin-bottom: 160px;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__warapper {
padding: 0 7.1527777778vw;
}
}
@media screen and (min-width: 1440px)
.t-recommend__warapper {
padding: 0 103px;
}}
@media screen and (max-width: 1768px) {
.t-recommend__warapper {
padding: 0 103px;
}}
@media (max-width: 768px) {
.t-recommend__items {
margin-top: 10.6666666667vw;
-webkit-flex-wrap: unset;
-ms-flex-wrap: unset;
flex-wrap: unset;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
gap: 0vw;
border-top: 1px dotted #d2a005;
width: 95%;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__items {
margin-top: 5.5555555556vw;
gap: 0 3.4722222222vw;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1440px) {
.t-recommend__items {
margin-top: 80px;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0 50px;
}}
.flex-sb {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.t-recommend__item {
width: 100%;
border-top: none;
border-bottom: 1px dotted #d2a005;
gap: 2.1333333333vw;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 8vw 0;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__item {
width: calc(50% - 1.7361111111vw);
gap: .6944444444vw;
padding: 3.4722222222vw 0;
border-top: 1px dotted #d2a005;
border-bottom: 1px dotted #d2a005;
}
}
@media screen and (min-width: 1440px) {
.t-recommend__item {
width: calc(50% - 25px);
border-top: 1px dotted #d2a005;
border-bottom: 1px dotted #d2a005;
gap: 10px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 50px 0;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__item--icon {
width: 1.9444444444vw;
}
}
.t-recommend__item--icon {
width: 28px;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__item--text {
font-size: 1.25vw;
}
}
.t-recommend__item--text {
font-size: 18px;
letter-spacing: .1em;
}
/*
@media (min-width: 1440px) {
.t-recommend__read {
margin-top: 80px;
text-align: center;
font-size: 18px;
letter-spacing: .04em;
}
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__read {
margin-top: 5.5555555556vw;
font-size: 1.25vw;
text-align: center;
letter-spacing: .04em;
}
}
@media (max-width: 768px) {
.t-recommend__read {
margin-top: 8vw;
text-align: left;
font-size: 4vw;
padding: 0 1.3333333333vw;
line-height: 2;
}
} */
.t-recommend__read {
margin-top: 80px;
text-align: center;
font-size: 18px;
letter-spacing: .04em;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.t-recommend__btn {
margin: 5.5555555556vw auto 0;
}
}
.t-recommend__btn {
margin: 80px auto 0;
}
/* ---.t-recommend------end------*/
/*------digital-worry--start---*/
.method03-inner｛
text-align: center;
margin-right: auto;
margin-left: auto;
max-width: 960px;
}
.method03-list {
position: relative;
z-index: 5;
width: 44.75rem;
margin: -1.875rem 0 5.75rem -1rem;
padding: 4.0625rem 0 1.875rem;
background: url("https://digital-clinic.life/lp/diet-m/images/method03-list-bg.webp") no-repeat center/cover;
}
.method03-list-ttl {
margin: 0 0 2.5rem;
color: #0171aa;
font-weight: bold;
font-size: 2.25rem;
text-align: center;
letter-spacing: 0.04em;
line-height: 1.55;
}
.method03-list-img {
width: 28.5625rem;
margin: 0 auto;
}
.method03-item {
position: relative;
width: 35.625rem;
margin: 0 auto 1.5625rem;
padding: 2.0625rem 0;
border-radius: 1.875rem;
background: #5d9bc3;
color: #ffffff;
font-size: 1.875rem;
text-align: center;
letter-spacing: 0.04em;
line-height: 1.66;
}
.method03-item::after {
content: "";
position: absolute;
bottom: -0.5625rem;
right: -0.0625rem;
width: 2.3125rem;
height: 2.3125rem;
background: url("https://digital-clinic.life/lp/diet-m/images/method03-item-arrow.webp") no-repeat center/contain;
}
.method03-item span {
color: #fcffa6;
font-weight: bold;
}
.method03-item02 {
position: relative;
width: 35.625rem;
margin: 0 auto 1.5625rem;
padding: 2.0625rem 0;
border-radius: 1.875rem;
background: #5d9bc3;
color: #ffffff;
font-size: 1.875rem;
text-align: center;
letter-spacing: 0.04em;
line-height: 1.66;
}
.method03-item02::after {
content: "";
position: absolute;
bottom: -0.5625rem;
left: -0.1875rem;
width: 2.1875rem;
height: 2.1875rem;
background: url("https://digital-clinic.life/lp/diet-m/images/method03-item02-arrow.webp") no-repeat center/contain;
}
.method03-item02 span {
color: #fcffa6;
font-weight: bold;
}
.plan-item-top {
max-width: 960px;
position: relative;
z-index: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/* -webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;*/
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1.5625rem 1.875rem;
border-radius: 1.875rem 1.875rem 0 0;
background: -webkit-gradient(linear, left top, right top, from(#4dacd5), to(#0c99d6));
background: linear-gradient(to right, #4dacd5, #0c99d6);
}
.plan-item-top-img {
width: 15.625rem;
margin: 0 3.625rem 0 0;
}
.plan-item-top-name {
margin: 0 0 0.9375rem;
color: #ffffff;
font-weight: bold;
font-size: 2.875rem;
letter-spacing: 0.06em;
}
.plan-item-top-txt {
color: #ffffff;
font-size: 1.75rem;
letter-spacing: 0.06em;
line-height: 1.5;
}
/*------digital-worry--end---*/
/*------east-med--menu---*/
@media screen and (min-width: 769px) {
.p-Medicine {
background-color: #F1F5FE;
padding-bottom: 94px;
}
}
@media screen and (max-width: 768px) {
.p-Medicine {
padding-bottom: 6.66667vw;
background-color: #F1F5FE;
}
}
.p-Medicine {
padding-bottom: 6.66667vw;
background-color: #F1F5FE;
}
.p-Medicine__detail {
background-color: #F1F5FE;
}
.p-Medicine__detail_set1 {
margin-top: 52px;
background-color: #F1F5FE;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1 {
margin-top: 6.66667vw;
background-color: #F1F5FE;
}
}
.p-Medicine__detail_set1_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #fff;
margin-top: 16px;
padding: 17px 18px 17px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 3.33333vw;
padding: 3.55556vw 3.55556vw 3.55556vw;
}
}
.p-Medicine__detail_set1_item_img {
width: 147px;
margin-right: 25px;
}
@media (max-width: 1030px) {
.p-Medicine__detail_set1_item_img {
width: 14.27184vw;
margin-right: 2.42718vw;
}
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_img {
width: 32.66667vw;
margin-right: 4.22222vw;
}
}
.p-Medicine__detail_set1_item_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 46.44444vw;
}
}
.p-Medicine__detail_set1_item_name {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
@media screen and (min-width: 769px) {
.p-Medicine__detail_set1_item_name {
width: 166px;
}
}
@media screen and (min-width: 769px) and (max-width: 1030px) {
.p-Medicine__detail_set1_item_name {
width: 16.1165vw;
}
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_name {
font-size: 4vw;
line-height: 1.25;
}
}
.p-Medicine__detail_set1_item_name .is-small {
display: inline;
color: #989BAA;
font-weight: 500;
font-size: 12px;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_name .is-small {
font-size: 2.66667vw;
}
}
.p-Medicine__detail_set1_item_name h3 {
display: inline;
}
.p-Medicine__detail_set1_item_txt {
font-size: 16px;
}
@media screen and (min-width: 769px) {
.p-Medicine__detail_set1_item_txt {
min-height: 80%;
padding-left: 34px;
border-left: 1px solid #DCE4F6;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 542px;
}
}
@media screen and (min-width: 769px) and (max-width: 1030px) {
.p-Medicine__detail_set1_item_txt {
width: 52.62136vw;
padding-left: 3.30097vw;
}
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_txt {
font-size: 2.88889vw;
margin-top: 1.33333vw;
}
}
.p-Medicine__detail_set2 {
background-color: #fff;
margin-top: 36px;
font-size: 15px;
padding: 26px;
line-height: 2;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set2 {
margin-top: 3.55556vw;
font-size: 2.44444vw;
padding: 3.33333vw;
line-height: 1.55;
}
}
.p-HeadlineBorder {
font-weight: 700;
font-size: 32px;
text-align: center;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder {
font-size: 5.77778vw;
}
}
.p-HeadlineBorder::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: linear-gradient(165deg, #FF8FA0 50%, #B7D6E1 90%, #B7D6E1);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder::after {
width: 17.77778vw;
margin-top: 3.33333vw;
}
}
.p-HeadlineBorder_small {
font-size: 16px;
text-align: center;
line-height: 1;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder_small {
font-size: 3.11111vw;
font-weight: 500;
}
}
.p-HeadlineBorder.--Margin {
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder.--Margin {
margin-bottom: 6.66667vw;
}
}
.p-Section {
padding-top: 77px;
}
@media screen and (max-width: 768px) {
.p-Section {
padding-top: 8.88889vw;
}
}
.p-Section_inner {
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1280px) {
.p-Section_inner {
margin: 0 40px;
}
}
@media screen and (max-width: 768px) {
.p-Section_inner {
margin: 0 5.11111vw;
}
}
.p-Section_inner.is-950 {
max-width: 950px;
margin: 0 auto;
}
@media (min-width: 1030.1px) and (max-width: 1199px) {
.p-Section_inner.is-950 {
margin: 0 auto;
}
}
@media (max-width: 1030px) {
.p-Section_inner.is-950 {
margin: 0 40px;
}
}
@media screen and (max-width: 768px) {
.p-Section_inner.is-950 {
margin: 0 5.11111vw;
}
}
.p-text {
font-size: 18px;
line-height: 1.9;
}
@media screen and (max-width: 768px) {
.p-text {
font-size: 3.33333vw;
}
}
/*------Ladies worry----start---*/
@media print, screen and (min-width: 769px) {
.l-row__inner._middle_ {
max-width: 1030px;
}
}
.l-row__inner {
margin: 0 auto;
padding: 0 15px;
width: 100%;
}
/*--
.l-row__inner._middle_
Specificity: (0,2,0)
{
max-width: 1030px;
}
--*/
@media print, screen and (min-width: 769px) {
.c-grid._col2_ {
grid-gap: 30px 20px;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 20px 1fr;
display: -ms-grid;
display: grid
;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
}
@media screen and (max-width: 768px) {
.c-grid._sm-col1_ {
grid-gap: 20px 20px;
-ms-grid-rows: auto;
-ms-grid-columns
Lays out the columns of the grid.
: 100%;
display: -ms-grid;
display: grid
;
grid-template-columns: repeat(1, 100%);
grid-template-rows: auto;
}
}
@media print, screen and (min-width: 769px) {
.c-lp-faga-worries-check {
font-size: 2rem;
padding-left: 40px;
}
}
@media print, screen and (min-width: 769px) {
.c-lp-faga-worries-check {
font-size: 2rem;
padding-left: 40px;
}
}
.c-lp-faga-worries-check {
margin-bottom: 20px;
position: relative;
}
@media screen and (max-width: 768px) {
.c-lp-faga-worries-check {
font-size: 1.8rem;
padding-left: 35px;
}
}
@media print, screen and (min-width: 769px) {
.c-lp-faga-worries-check:before {
height: 25px;
top: .3em;
width: 25px;
}
}
.c-lp-faga-worries-check:before {
background: url(https://www.1971fujinka.jp/common/img/lp/faga/ico_check.svg) no-repeat;
content: "";
left: 0;
position: absolute;
}
@media screen and (max-width: 768px) {
.c-lp-faga-worries-check:before {
height: 23px;
top: .3em;
width: 23px;
}
}
.u-mt-s {
margin-top: 25px !important;
}
.u-al-c {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center !important;
}
.u-mw100p {
max-width: 100% !important;
}
@media screen and (max-width: 768px) {
.u-mw100p {
max-width: 30% !important;
}
}
.u-mw10p {
max-width: 10% !important;
}
@media screen and (max-width: 768px) {
.u-sp-mw20p {
max-width: 20% !important;
}
}
/*------east-med--menu--end----*/
/*----east menu7----*/
.p-Navi
{
background-color: #FFEBED !important;
}
.p-Navi_tit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: 700;
color: #E36074;
font-size: 28px;
}
@media screen and (max-width: 768px) {
.p-Navi_tit {
font-size: 4vw;
}
}
.p-Navi_tit:before, .p-Navi_tit:after {
content: "";
width: 25px;
height: 50px;
}
@media screen and (max-width: 768px) {
.p-Navi_tit:before, .p-Navi_tit:after {
width: 3.55556vw;
height: 5.55556vw;
}
}
.p-Navi_tit:before {
margin-right: 1.5rem;
background: url(https://www.womens.eastcl.com/_materials/images/diet/ico_navi_tit_left.svg) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 768px) {
.p-Navi_tit:before {
margin-right: 0.7rem;
background: url(https://www.womens.eastcl.com/_materials/images/diet/ico_navi_tit_left--sp.svg) no-repeat center center;
background-size: contain;
}
}
.p-Navi_tit:after {
margin-left: 1.5rem;
background: url(https://www.womens.eastcl.com/_materials/images/diet/ico_navi_tit_right.svg) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 768px) {
.p-Navi_tit:after {
margin-left: 0.7rem;
background: url(https://www.womens.eastcl.com/_materials/images/diet/ico_navi_tit_right--sp.svg) no-repeat center center;
background-size: contain;
}
}
.p-Navi__Column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 990px;
padding: 0 20px 78px;
margin: 6px auto 0;
}
@media screen and (max-width: 768px) {
.p-Navi__Column {
padding: 0 5.77778vw 5.77778vw;
margin: 3.11111vw auto 0;
}
}
.p-Navi__Column_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 32%;
height: 99px;
overflow: hidden;
margin-top: 17px;
}
@media (min-width: 769px) and (max-width: 1024px) {
.p-Navi__Column_item {
height: 9.66797vw;
}
}
@media screen and (max-width: 768px) {
.p-Navi__Column_item {
width: 49%;
height: 14.22222vw;
margin-top: 2.44444vw;
margin-right: 0;
margin-left: 2%;
}
}
@media screen and (max-width: 768px) {
.p-Navi__Column_item:nth-child(odd) {
margin-left: 0;
}
}
.p-Navi_anchor {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 8px;
padding-left: 27px;
padding-bottom: 1px;
font-size: 22px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff !important;
border: 1px solid #FF8FA0;
color: #4D4E53;
font-weight: 500;
text-align: left;
line-height: 1.5;
}
@media (min-width: 769px) and (max-width: 1024px) {
.p-Navi_anchor {
border-radius: 0.78125vw;
padding-left: 2.63672vw;
font-size: 2.14844vw;
}
}
@media screen and (max-width: 768px) {
.p-Navi_anchor {
font-size: 3.33333vw;
padding-left: 3.77778vw;
}
}
.p-Navi_anchor::after {
content: '';
display: block;
position: absolute;
background: url(https://www.womens.eastcl.com/_materials/images/diet/ico_navi_link.svg) no-repeat center center;
background-size: contain;
width: 20px;
height: 20px;
right: 15px;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
@media screen and (max-width: 768px) {
.p-Navi_anchor::after {
width: 3.11111vw;
height: 2.66667vw;
right: 2.22222vw;
}
}
@media screen and (min-width: 769px) {
.p-Navi_anchor {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.p-Navi_anchor:hover {
background-color: #f65275;
color: #fff;
}
.p-Navi_anchor:hover::after {
background: url(https://www.womens.eastcl.com/_materials/images/diet/ico_navi_link_white.svg) no-repeat center center;
background-size: contain;
}
}
.p-Navi_anchor ._text {
display: table-cell;
vertical-align: middle;
}
/*----east menu----end-----*/
/*------namida box midashi--------*/
.keiken {
margin-bottom: 15px;
margin-top: 45px;
}
/*------namida box --------*/
.nayamiboxgreenopa {
width: auto;
padding: 40px 0;
background: linear-gradient(transparent 20%, rgba(159, 219, 112, 0.7) 0%);
opacity: 0.9;
/* position: relative; */
}
.nayamiboxgreenopa img {
/* width: 45%; */
/* margin: 0 1rem; */
border-radius: 0 20px 20px 0;
/* position: absolute; */
z-index: -10;
}
.textbox {
width: auto;
text-align: center;
}
.namidaboxh3E {
font-family: cormorant-garamond, serif;
font-weight: 400;
font-style: normal;
font-size: 54px;
line-height: 1;
/* color: rgb(66, 66, 66); */
color: #b39800;
margin: 5px auto;
}
.namidaboxh3J {
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 25px;
line-height: 1.8;
margin-bottom: 5px;
margin-top: 5px;
display: block;
width: 100%;
letter-spacing: 0.07em;
color: rgb(255, 255, 255) !important;
}
.namidaboxpN {
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 400;
font-style: normal;
color: #333333;
font-size: 18px;
line-height: 2.2;
}
/*------namida box ---end-----*/
/*------open QA-----*/
#archive_faq_list_open {
margin: 0 auto 24px;
}
#archive_faq_list_open .faq_open {
margin-bottom: 32px;
border: 1px solid #ADB2C1;
}
.question_open {
line-height: 32px;
}
.question_open {
line-height: 1.6;
padding: 16px 32px 16px 16px;
font-weight: normal;
background: #F6F7F9;
}
.question_open .quest, .answer_open .ans {
font-size: 16px;
display: inline-block;
background: #005EAD;
color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
margin-right: 5px;
vertical-align: top;
}
.question_open .quest, .answer_open .ans {
font-size: 16px;
display: inline-block;
background: #00326a;
color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
margin-right: 5px;
vertical-align: top;
}
.question_open .num, .answer_open .num {
font-size: 0.75rem;
}
.answer_open {
padding: 16px 32px 16px 16px;
border-top: 1px solid #ADB2C1;
}
.answer_open {
padding: 16px 32px 16px 16px;
border-top: 1px solid #ADB2C1;
}
.answer_open {
padding: 16px 32px 16px 16px;
border-top: 1px solid #ADB2C1;
}
/*------open QA---end--*/
/* - - treatmentList - -*/
.treatmentList {
margin-bottom: 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 2.8rem;
}
.treatmentList li {
background-color: #fff;
border-radius: 1rem;
padding: 1.3rem 2rem;
width: calc((100% - (2.8rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
text-align: center;
padding: 2.3rem min(1.1vw,2rem) 2.9rem;
display: flex;
flex-direction: column;
font-size: 4.6rem;
font-weight: 700;
align-items: center;
justify-content: center;
color: #a49972;
letter-spacing: 0.04em;
line-height: 1;
border: 2px solid #DBD2AE;
border-block-width: 6px;
}
.treatmentList li p span {
margin-bottom: 0.5rem;
display: block;
font-size: 3rem;
color: #62a2f8;
}
@media all and (max-width: 896px) {
.treatmentList {
margin-bottom: 1.7rem;
gap: 2rem 0.4rem;
}
.treatmentList li {
padding: 0.7rem 0.5rem;
border-radius: 0.5rem;
width: calc((100% - (0.4rem * 2 + 0.1rem)) / 3);
}
.treatmentList li p {
border-width: 1px;
padding: 1.2rem 0 1.4rem;
font-size: 2.3rem;
border-block-width: 3px;
}
.treatmentList li p span {
font-size: 1.4rem;
margin: 0 -1rem 0.3rem;
letter-spacing: 0;
}
}
/* - - treatmentDl - -*/
.treatmentDl {
margin: 0 auto 3rem;
max-width: 48rem;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.treatmentDl:last-child {
margin-bottom: 0;
}
.treatmentDl dt {
display: flex;
align-items: flex-end;
width: calc(100% - 10.5rem);
font-size: 3rem;
letter-spacing: 0.04em;
font-weight: 700;
color: #595757;
padding-bottom: 1.5rem;
border-bottom: 1px solid #AA9F7A;
}
.treatmentDl dd {
width: 10.5rem;
padding-bottom: 0.2rem;
font-size: 5rem;
letter-spacing: 0.04em;
color: #86753b;
font-weight: 700;
/* border-bottom: 1px solid #AA9F7A; */
}
.treatmentDl dd .num {
font-size: 6rem;
line-height: 1.45;
}
@media all and (max-width: 896px) {
.treatmentDl {
max-width: 27rem;
}
.treatmentDl dt {
padding: 0 0 1.2rem 0.7rem;
width: calc(100% - 5.5rem);
font-size: 1.7rem;
letter-spacing: 0.02em;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
width: 5.5rem;
font-size: 2.5rem;
}
.treatmentDl dd .num {
font-size: 3.5rem;
}
.treatmentDl {
padding-top: 0.5rem;
max-width: 25.7rem;
}
.treatmentDl dd {
padding-bottom: 0.5rem;
font-size: 2.7rem;
}
.treatmentDl dd .num {
font-size: 3.3rem;
line-height: 1.3;
}
}
/* - - anchorList - -*/
.anchorList {
margin: 0 5rem 12.5rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 12rem;
}
.anchorList li {
width: calc((100% - 24.1rem) / 3);
}
.anchorList li a {
padding: 2.7rem 0 1.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
letter-spacing: 0.02em;
text-align: center;
position: relative;
display: block;
border-bottom: 2px solid #A49972;
background: #fff url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/img01.png) no-repeat center top;
background-size: 3.2rem auto;
}
.anchorList li a:hover {
opacity: 0.5;
}
.anchorList li a:after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 50%;
width: 0;
/* z-index: -1; */
z-index: 1;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 0.7rem solid #A49972;
transform: translate(-50%, -50%);
}
.anchorList li .ttl {
margin: 0 -2rem 2.7rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.anchorList {
margin: 0 0 4.5rem;
gap: 1.2rem;
}
.anchorList li {
width: calc((100% - 2.5rem) / 3);
}
.anchorList li a {
padding: 1.9rem 0 0.6rem;
font-size: 1.4rem;
border-width: 1px;
background-size: 2rem auto;
}
.anchorList li .ttl {
min-height: 4rem;
margin-bottom: 0.2rem;
font-size: 1.6rem;
line-height: 1.06;
}
.anchorList li a::after {
bottom: -11px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid #A49972;
}
}
/* - - planBox - -*/
.planBox {
padding: 9.6rem 0 11.2rem;
padding: 10.5rem 0 9rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg03.png ) no-repeat center;
background-size: 100% 100%;
}
.planBox .headLine06 {
font-size: 3.6rem;
margin-bottom: 0;
}
.planBox .comEn {
margin-bottom: 3.7rem;
font-size: 2.6rem;
}
@media all and (max-width: 896px) {
.planBox {
padding: 3.2rem 0 4.2rem;
}
.planBox .headLine06 {
font-size: 2.2rem;
}
.planBox .comEn {
margin-top: -0.5rem;
margin-bottom: 2.2rem;
font-size: 1.7rem;
}
}
/* - - bigPlanPhoto - -*/
.bigPlanPhoto {
max-width: 81rem;
margin: 0 auto 8.2rem;
position: relative;
}
.bigPlanPhoto .txtSpan01 {
position: absolute;
top: calc(50% + 5.3rem);
left: 0.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .txtSpan02 {
position: absolute;
top: calc(50% + 5.3rem);
left: 12.5rem;
font-size: 1.6rem;
color: #595757;
}
.bigPlanPhoto .note {
width: fit-content;
margin: -2.4rem -6.3rem 0 auto;
text-align: right;
display: block;
letter-spacing: 0.04em;
font-size: 1.5rem;
text-indent: -1em;
padding-left: 1em;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 5.5rem;
}
@media all and (max-width: 896px) {
.bigPlanPhoto {
margin: 0 0.2rem 2.2rem;
max-width: inherit;
}
.bigPlanPhoto img {
width: 100%;
}
.bigPlanPhoto .txtSpan01 {
font-size: 2.4vw;
top: 55%;
left: -1.3vw;
}
.bigPlanPhoto .txtSpan02 {
font-size: 2.4vw;
top: 55%;
left: 12.3vw;
}
.bigPlanPhoto .note {
font-size: 2.66vw;
margin: 0.8rem 0 0 auto;
}
.bigPlanPhoto.bigPhoto02 {
margin-bottom: 2.2rem;
}
}
/* - - effectList - -*/
.effectList {
margin: 0 auto 5.2rem;
max-width: 79.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem 5.2rem;
position: relative;
}
.effectList:after {
width: 2.8rem;
height: 5rem;
background-color: rgb(89, 87, 87);
clip-path: polygon(0% 18%, 50% 18%, 50% 0%, 100% 50%, 50% 100%, 50% 86%, 0% 86%);
position: absolute;
top: calc(50% - 1.7rem);
transform: translate(-50%,-50%);
left: 50%;
content: "";
}
.effectList li {
padding: 1.7rem 1.7rem 1.4rem;
text-align: center;
width: calc((100% - 5.2rem) / 2);
background-color: #fff;
box-shadow: 0rem 0rem 0.658rem 0.042rem rgba(0, 0, 0, 0.13);
}
.effectList li .photo {
max-width: 32rem;
margin: 0 auto 1rem;
}
.effectList li .photo img {
width: 100%;
}
.effectList li .txtSpan {
display: block;
width: 13rem;
min-height: 3rem;
background-color: #EBEBEB;
border-radius: 6rem;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
color: #595757;
margin: 0 auto;
}
.effectList li .txtSpan02 {
background-color: #FFDDE7;
color: #fa2662;
}
@media all and (max-width: 896px) {
.effectList {
margin: 0 auto 2.6rem;
max-width: inherit;
gap: 3rem 2.2rem;
}
.effectList::after {
width: 1.3rem;
height: 2.2rem;
top: calc(50% - 0.2rem);
}
.effectList li {
padding: 1rem 1rem 0.5rem;
width: calc((100% - 2.2rem) / 2);
box-shadow: 0rem 0rem 0.33rem 0.021rem rgba(0, 0, 0, 0.13);
}
.effectList li .txtSpan {
padding-bottom: 0.1rem;
width: 6.5rem;
font-size: 1.3rem;
min-height: 1.75rem;
}
.effectList li .txtSpan02 {
background-color: #FFDDE7;
}
.effectList li .photo {
max-width: inherit;
margin-bottom: 0.4rem;
}
}
/* - - preventionList - -*/
.preventionList {
margin-bottom: 5.4rem;
}
.preventionList li {
padding-bottom: 1.7rem;
margin-bottom: 2.2rem;
border-bottom: 2px solid #E9E9E9;
}
.preventionList li:last-child {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
.preventionList li > dl {
max-width: 62rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.preventionList li > dl > dt {
font-size: 2.6rem;
margin-top: -1rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
width: 15rem;
line-height: 1;
display: flex;
align-items: center;
font-family: "Shippori Mincho B1", serif;
}
.preventionList li > dl > dd {
flex: 1;
font-size: 2rem;
letter-spacing: 0.04em;
line-height: 1.7;
}
@media all and (max-width: 896px) {
.preventionList {
margin-bottom: 3.5rem;
}
.preventionList li {
padding-bottom: 0.85rem;
margin-bottom: 0.85rem;
}
.preventionList li > dl {
max-width: inherit;
}
.preventionList li > dl > dt {
margin-top: -0.3rem;
font-size: 1.4rem;
width: 7rem;
}
.preventionList li > dl > dd {
font-size: 1.4rem;
line-height: 1.36;
}
}
/* - - priceDl - -*/
.priceDl {
padding-bottom: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.priceDl dt {
padding-top: 1.5rem;
width: 11rem;
font-size: 2rem;
}
.priceDl dt.no {
display: none;
}
.priceDl dd {
margin-bottom: -0.7rem;
width: calc(100% - 11rem);
}
.priceDl dd .txtSpan {
font-size: 3.6rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.priceDl dd .priceSpan {
font-size: 3rem;
color: #86753b;
letter-spacing: 0.04em;
font-weight: 700;
}
.priceDl dd .num {
font-size: 4.6rem;
line-height: 1;
}
@media all and (max-width: 896px) {
.priceDl dt {
padding-top: 0.7rem;
width: 7.4rem;
font-size: 1.4rem;
}
.priceDl dd {
margin: -0.5rem 0 -1.0rem;
width: calc(100% - 7.4rem);
font-size: 1.4rem;
}
.priceDl dd .txtSpan {
font-size: 1.8rem;
}
.priceDl dd .priceSpan {
font-size: 1.7rem;
}
.priceDl dd .num {
font-size: 2.5rem;
line-height: 1;
}
.priceDl {
padding-bottom: 1rem;
}
}
/* - - medicationList - -*/
.medicationList {
margin-bottom: 10.8rem;
}
.medicationList li {
margin-bottom: 1.5rem;
}
.medicationList .txt {
font-size: 1.7rem;
display: none;
padding: 2.2rem 1.0rem 0.8rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
@media all and (max-width: 896px) {
.medication .headLine13 {
padding-bottom: 0.1rem;
font-size: 1.7rem;
}
.medicationList {
margin-bottom: 4.4rem;
}
.medicationList li {
margin-bottom: 0.8rem;
}
.medicationList .txt {
padding: 0.6rem 0.4rem 0.5rem;
font-size: 1.4rem;
line-height: 1.57;
}
}
/* - - treatmentArticle - -*/
.treatmentArticle {
padding: 2.2rem 0;
}
.treatmentArticle .headLine09 {
background-image: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg02.png);
}
.treatmentArticle .comTtlBox {
margin-bottom: 4.5rem;
border-color: #A385EE;
}
.treatmentArticle .headLine10 .lSpan {
color: #A385EE;
}
.treatmentArticle .headLine11 {
border-color: #A385EE;
}
.treatmentArticle .effectList {
margin-bottom: 6.4rem;
}
.treatmentArticle .headLine12 {
background-color: #C8BAED;
}
.treatmentArticle .medicationList {
margin-bottom: 7rem;
}
@media all and (max-width: 896px) {
.treatmentArticle .comTtlBox {
margin-bottom: 2rem;
}
.treatmentArticle .effectList {
margin-bottom: 2.6rem;
}
.treatmentArticle .medicationList {
margin-bottom: 3rem;
}
}
/* - - areataArticle - -*/
.areataArticle .headLine09 {
background-image: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg03.png);
}
.areataArticle .comTtlBox {
margin-bottom: 4.5rem;
border-color: #A49972;
}
.areataArticle .headLine10 .lSpan {
color: #a49972;
border-color: #EDE6CC;
}
.areataArticle .headLine11 {
border-color: #A49972;
}
.areataArticle .headLine12 {
background-color: #A49972;
font-size: 3rem;
padding-block: 0.6rem 0.8rem;
}
.areataArticle .effectList {
margin-bottom: 6.7rem;
}
.areataArticle {
margin-bottom: -3.5rem;
}
@media all and (max-width: 896px) {
.areataArticle .headLine09 .icon {
width: 1.8rem;
}
.areataArticle .comTtlBox {
margin-bottom: 3rem;
}
.areataArticle .effectList {
margin-bottom: 2.6rem;
}
.areataArticle .headLine12 {
margin-bottom: 2.5rem;
font-size: 1.7rem;
padding: 0.2rem;
}
.areataArticle {
margin-bottom: 0;
}
}
/* - - areataList - -*/
.areataList {
padding: 0 2rem 5.5rem;
margin-top: -0.7rem;
display: flex;
flex-wrap: wrap;
gap: 2rem 2rem;
}
.areataList li {
text-align: center;
width: calc((100% - (2rem * 5)) / 6);
}
.areataList li.no {
position: relative;
}
.areataList li.no:after {
background-color: #fff;
opacity: 0.7;
inset: -1rem;
position: absolute;
content: "";
}
.areataList li .photo {
margin-bottom: 1.8rem;
}
.areataList li p {
font-size: 1.6rem;
color: #595757;
line-height: 1.25;
}
.areataList li .ttl {
min-width: 10rem;
width: fit-content;
line-height: 1.1;
padding-bottom: 0.2rem;
margin: 0 auto 1.3rem;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.1em;
border: 1px solid #4F96F5;
border-radius: 6rem;
text-align: center;
}
.areataList li .ttl02 {
border-color: #F31A43;
background-color: #FFE1E7;
}
.areataList li p:not([class]) {
margin-inline: -1rem;
}
@media all and (max-width: 896px) {
.areataList {
padding: 0 1rem 2.2rem;
gap: 0.8rem 1.5rem;
}
.areataList li{
width: calc((100% - (1.5rem * 2)) / 3);
}
.areataList li .photo {
max-width: 5rem;
margin: 0 auto 0.8rem;
}
.areataList li p {
font-size: 1rem;
line-height: 1.3;
}
.areataList li .ttl {
padding: 0.1rem 0 0;
margin-bottom: 0.3rem;
min-width:5rem;
font-size: 1.1rem;
}
}
/* - - treatmentList - --end---*/
/* - - headLine09 - -*/
.headLine09 {
padding-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6.4rem;
max-width: 62.8rem;
min-height: 11rem;
font-size: 3.2rem;
color: #595757;
letter-spacing: 0.04em;
background: url(https://aga-hair-clinic.net/wp-content/themes/aga/img/price/bg01.png) no-repeat center;
background-size: 100% auto;
}
.headLine09 .icon {
margin: 0 1.5rem -1rem 0;
}
@media all and (max-width: 896px) {
.headLine09 {
max-width: 31.6rem;
margin: 0 auto 3.1rem;
font-size: 1.7rem;
background-size: 100% 100%;
min-height: 5.5rem;
}
.headLine09 .icon {
margin: -0.4rem 1rem -1rem 0;
width: 1.4rem;
}
}
/* - - comTtlBox - -*/
.comTtlBox {
margin-bottom: 4rem;
padding: 1.7rem 2rem;
border-bottom: 2px solid #4F96F5;
border-top: 2px solid #4F96F5;
}
@media all and (max-width: 896px) {
.comTtlBox {
margin-bottom: 2rem;
padding: 0.7rem 0.5rem 0.8rem;
border-width: 1px;
}
}
/* - - headLine10 - -*/
.headLine10 {
display: flex;
align-items: stretch;
justify-content: space-between;
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
}
.headLine10 .lSpan {
margin: -0.2rem 2.5rem 0 0;
padding-bottom: 0.4rem;
width: 12.4rem;
flex-shrink: 0;
font-size: 2.6rem;
font-weight: 400;
color: #4f96f5;
line-height: 1;
border-right: 4px solid #EDECE4;
}
.headLine10 .lSpan .num {
font-size: 5rem;
}
.headLine10 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine10 {
font-size: 1.7rem;
}
.headLine10 .lSpan {
margin: 0 1.5rem 0 0;
width: 7.0rem;
border-width: 2px;
font-size: 1.5rem;
}
.headLine10 .lSpan .num {
line-height: 0.8;
font-size: 3rem;
}
.headLine10 .rSpan {
line-height: 1.3;
padding: 0.2rem 0;
}
}
/* - - headLine11 - -*/
.headLine11 {
margin-bottom: 2.2rem;
font-size: 2.6rem;
font-weight: 700;
text-align: center;
color: #595757;
padding: 0.6rem 1rem 1.2rem;
border: 1px solid #4F96F5;
border-radius: 1rem;
}
@media all and (max-width: 896px) {
.headLine11 {
margin-bottom: 1.8rem;
padding: 0.3rem 1rem 0.4rem;
border-radius: 0.5rem;
font-size: 1.7rem;
}
}
/* - - headLine12 - -*/
.headLine12 {
margin-bottom: 5rem;
padding: 1rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
background-color: #A1C6F6;
border-radius: 1rem;
text-align: center;
}
@media all and (max-width: 896px) {
.headLine12 {
margin-bottom: 2rem;
font-size: 1.7rem;
border-radius: 0.5rem;
padding: 0.2rem 0.5rem;
}
}
/* - - headLine13 - -*/
.headLine13 {
margin-bottom: 2.1rem;
font-size: 2.6rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.04em;
}
@media all and (max-width: 896px) {
.headLine13 {
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
}
/* - - headLine14 - -*/
.headLine14 {
padding: 0.8rem 4rem 1.1rem 2rem;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
background: #EDECE4;
position: relative;
}
.headLine14:before,
.headLine14:after {
position: absolute;
right: 2.5rem;
top: calc(50% - 0.3rem);
width: 1.2rem;
height: 2px;
background-color: rgb(89, 87, 87);
-webkit-transition: all .3s ease;
transition: all .3s ease;
content: "";
}
.headLine14:after {
transform: rotate(90deg);
}
.headLine14.on:after {
transform: rotate(180deg);
opacity: 0;
}
.headLine14-2 {
padding: 0 !important;
}
.headLine14 a {
display: block;
padding: 0.8rem 4rem 1.1rem 2rem;
}
.headLine14 a:hover {
opacity: 0.5;
}
@media all and (max-width: 896px) {
.headLine14 {
padding: 0.4rem 2.5rem 0.5rem 1rem;
font-size: 1.4rem;
letter-spacing: 0.02em;
}
.headLine14::before, .headLine14::after {
right: 1.5rem;
width: 0.7rem;
height: 1px;
top: calc(50% + 0rem);
}
.headLine14 a {
padding: 0.4rem 2.5rem 0.5rem 1rem;
}
}
/* - - headLine15 - -*/
.headLine15 {
color: #323131;
margin-bottom: 2.5rem;
font-size: 6.6rem;
line-height: 1;
letter-spacing: 0.04em;
text-shadow: 0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem 0.3rem 0.7rem rgba(169,203,249,0.9),-0.3rem -0.3rem 0.7rem rgba(169,203,249,0.9);
}
@media all and (max-width: 896px) {
.headLine15 {
margin-bottom: 1.3rem;
font-size: 2.9rem;
letter-spacing: 0.02em;
}
}
/* - - headLine16 - -*/
.headLine16 {
margin-bottom: 1.4rem;
font-size: 2.6rem;
color: #62a2f8;
text-align: center;
letter-spacing: 0.04em;
font-weight: 700;
line-height: 1.31;
}
@media all and (max-width: 896px) {
.headLine16 {
margin-bottom: 1.6rem;
font-size: 2.3rem;
line-height: 1.22;
}
}
/* - - headLine17 - -*/
.headLine17 {
margin-bottom: 3rem;
padding: 0 1.0rem 1.2rem;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #595757;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
border-bottom: 1px solid #A49972;
}
.headLine17 .lSpan {
padding-top: 1rem;
font-size: 2.6rem;
font-weight: 400;
color: #62a2f8;
line-height: 1;
flex-shrink: 0;
width: 10rem;
background: url(img/common/img07.png) no-repeat left 1rem top;
background-size: 4.6rem auto;
}
.headLine17 .lSpan .num {
font-size: 5rem;
}
.headLine17 .rSpan {
flex: 1;
}
@media all and (max-width: 896px) {
.headLine17 {
margin-bottom: 1.7rem;
font-size: 1.8rem;
padding: 0 0 0.2rem;
}
.headLine17 .lSpan {
width: 6.4rem;
white-space: nowrap;
font-size: 1.7rem;
padding-top: 0.6rem;
background-position: left 0.2rem top;
background-size: 3.5rem auto;
}
.headLine17 .lSpan .num {
font-size: 3.3rem;
}
}
/* - - headLine18 - -*/
.headLine18 {
font-size: 2.6rem;
color: #62a2f8;
letter-spacing: 0.04em;
font-weight: 700;
margin: 0 1rem 2.7rem;
}
@media all and (max-width: 896px) {
.headLine18 {
margin: 0 0.5rem 1rem;
font-size: 1.7rem;
}
}
/* - - headLine19 - -*/
.headLine19 {
margin-bottom: 4.8rem;
font-size: 3.6rem;
color: #62a2f8;
letter-spacing: 0.04em;
text-align: center;
}
@media all and (max-width: 896px) {
.headLine19 {
margin-bottom: 2rem;
font-size: 2.3rem;
}
}
/* - - headLine20 - -*/
.headLine20 {
margin-bottom: 2rem;
font-size: 2.2rem;
color: #595757;
display: flex;
align-items: flex-start;
}
.headLine20 .columnsImg {
flex-shrink: 0;
width: 3rem;
margin: 0.5rem 0.5rem 0 0;
}
@media all and (max-width: 896px) {
.headLine20 {
margin-bottom: 1.7rem;
font-size: 1.7rem;
}
.headLine20 .columnsImg {
width: 2.6rem;
margin-top: 0.1rem;
}
}
/* - - headLine21 - -*/
.headLine21 {
padding: 0 0 1.5rem;
margin: 3rem 0 3rem;
font-size: 2.2rem;
color: #4f96f5;
letter-spacing: 0.04em;
border-bottom: 1px solid currentColor;
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
.headLine21 {
padding: 0 0 0.7rem;
margin: 3rem 0;
line-height: 1.2;
}
}
/* - - headLine22 - -*/
.headLine22 {
margin: 4rem 0;
padding: 0 0 0.5rem 1rem;
font-family: "Shippori Mincho B1", serif;
font-size: 2rem;
color: #595757;
border-left: 3px solid currentColor;
}
@media all and (max-width: 896px) {
.headLine22 {
margin: 3rem 0;
}
}
/* - - headLine23 - -*/
.headLine23 {
background-color: #F2F7FF;
border-radius: 1rem;
padding: 1rem 2rem;
font-size: 1.8rem;
margin: 4rem 0;
font-family: "Shippori Mincho B1", serif;
}
@media all and (max-width: 896px) {
}
/* - - greeting - -*/
.greeting {
padding: 10.5rem 0 9rem;
background: url( https://aga-hair-clinic.net/wp-content/themes/aga/img/index/bg01.jpg ) no-repeat center;
background-size: 100% 100%;
}
.greeting .content {
flex-wrap: nowrap;
align-items: flex-start;
}
.greeting .photoBox {
width: 53.3%;
margin-right: -7.4rem;
}
.greeting .photoBox img {
width: 100%;
}
.greeting .textBox {
margin-top: 10.7rem;
flex: 1;
order: 1;
position: relative;
z-index: 5;
padding: 7rem 7.5rem 4.4rem;
padding-inline-end: 5rem;
background-image: linear-gradient( -90deg, rgb(221,236,255,0.8) 1%, rgb(231,241,253,0.8) 40%, rgb(240,245,251,0.8) 100%);
}
.greeting .textBox .comEn02 {
position: absolute;
top: -6.2rem;
left: 8rem;
/* font-size: 12rem; */
}
.greeting .headLine03 {
margin-bottom: 1.5rem;
}
.greeting p {
margin-bottom: 2.4rem;
line-height: 1.76;
}
.greeting .ttl {
margin-bottom: 1.2rem;
}
.greeting .ttl img {
vertical-align: -0.2rem;
width: 4.1rem;
margin-left: 0.5rem;
}
.greeting .comLink03 a {
min-height: 5rem;
font-size: 1.8rem;
min-width: 28rem;
padding: 0 5rem 0 2.5rem;
}
.greeting .comLink03 .arrow-circle {
right: 2.5rem;
}
@media all and (max-width: 896px) {
.greeting {
padding: 7.4rem 0 5.3rem;
}
.greeting .content {
display: block;
}
.greeting .textBox {
padding: 4.1rem 2.0rem 3.1rem 2.7rem;
margin: 0 -1.75rem 0 -0.2rem;
}
.greeting .photoBox {
width: auto;
margin: -4.7rem 2.2rem 0 -1.75rem;
}
.greeting p {
margin-bottom: 2rem;
line-height: 1.43;
}
.greeting .headLine03 {
margin-bottom: 1.2rem;
font-size: 1.7rem;
}
.greeting .textBox .comEn02 {
font-size: 7rem;
top: -3.7rem;
left: 2.4rem;
}
.greeting .comLink03 {
margin-left: -0.5rem;
}
.greeting .comLink03 a {
min-height: 4.5rem;
min-width: 28rem;
font-size: 1.5rem;
}
}
/* - - greeting ----end---- -*/
/* - - faqSec - -*/
.faqSec {
margin-bottom: 6rem;
padding: 7.2rem 0;
background-color: #F2F7FF;
}
.faqSec .comEn02 {
transform: none;
color: #99bff2;
text-align: center;
}
.faqSec .headLine03 {
margin-bottom: 5rem;
text-align: center;
}
.faqSec .faqInner {
margin-bottom: 4.4rem;
}
.faqSec .comLink03 a {
min-width: 36rem;
}
@media all and (max-width: 896px) {
.faqSec {
margin-bottom: 3.6rem;
padding: 3.2rem 0;
}
.faqSec .headLine03 {
margin-bottom: 2.4rem;
}
.faqSec .faqInner {
margin-bottom: 1.7rem;
}
.faqSec .comLink03 {
padding-top: 0.8rem;
}
.faqSec .comLink03 a {
min-width: 28rem;
min-height: 4.5rem;
font-size: 1.5rem;
}
}
/* - - faqSec - --end----*/
/* - - faqList - -*/
.faqList li {
padding: 3.0rem 3rem 2.1rem;
margin-bottom: 1.5rem;
background-color: #fff;
border-radius: 1rem;
}
.faqList li:last-child {
margin-bottom: 0;
}
.faqList li h4 {
font-size: 2rem;
color: #595757;
font-weight: 700;
letter-spacing: 0.02em;
position: relative;
cursor: pointer;
display: flex;
}
.faqList li h4 .lSpan {
flex-shrink: 0;
margin: -0.6rem 1.5rem 0 0;
font-size: 4.4rem;
color: #62a2f8;
padding-right: 1rem;
letter-spacing: 0.02em;
line-height: 1;
font-weight: 400;
position: relative;
z-index: 1;
}
.faqList li h4 .lSpan:after {
width: 3.2rem;
height: 3.2rem;
background-color: #E1EEFF;
position: absolute;
top: 0.8rem;
right: -0.3rem;
border-radius: 100%;
z-index: -1;
content: "";
}
.faqList li h4:before,
.faqList li h4:after {
position: absolute;
right: 0rem;
top: 1.4rem;
width: 1.2rem;
height: 1px;
background-color: #a49972;
-webkit-transition: all .3s ease;
transition: all .3s ease;
content: "";
}
.faqList li h4:after {
transform: rotate(90deg);
}
.faqList li h4.on:after {
transform: rotate(180deg);
opacity: 0;
}
.faqList li .pBox {
display: none;
padding: 1.8rem 0 0.6rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
.faqList li .pBox p {
min-height: 4rem;
padding-left: 5.5rem;
padding-right: 3rem;
position: relative;
z-index: 1;
}
.faqList li .pBox p:after {
width: 3.2rem;
height: 3.2rem;
background-color: #F2F0E8;
position: absolute;
top: 0.8rem;
left: 1rem;
border-radius: 100%;
z-index: -1;
content: "";
}
.faqList li .pBox p::before {
color: #a49972;
position: absolute;
top: 0rem;
font-size: 4.4rem;
line-height: 1;
font-weight: 400;
left: 0;
border-radius: 100%;
content: "A";
font-family: "Corinthia", cursive;
}
@media all and (max-width: 896px) {
.faqList li {
margin-bottom: 1.1rem;
padding: 1.9rem 3rem 1.7rem 1.9rem;
border-radius: 0.5rem;
}
.faqList li h4 {
padding: 0 0 0 0;
font-size: 1.5rem;
line-height: 1.33;
}
.faqList li h4::before, .faqList li h4::after {
width: 1rem;
top: 1rem;
right: -1.5rem;
}
.faqList li h4 .lSpan {
font-size: 3rem;
padding-right: 0.8rem;
margin: -0.3rem 1.3rem 0 0;
}
.faqList li h4 .lSpan::after {
width: 2.2rem;
height: 2.2rem;
right: 0;
top: 0.7rem;
}
.faqList li .pBox p::after {
width: 2.2rem;
height: 2.2rem;
top: 0.1rem;
left: 0.6rem;
}
.faqList li .pBox p::before {
font-size: 3rem;
top: -0.4rem;
}
.faqList li .pBox {
padding: 1.8rem 0 1rem;
}
.faqList li .pBox p {
padding-right: 0;
line-height: 1.43;
padding-left: 4rem;
background-size: 2.9rem auto;
}
}
/* - - faqList ---end--- -*/
/*-----east menu3---*/
.c-Box.--Gray
{
background: #F5F5F5;
}
.c-Inner.--Max1200
{
max-width: 1200px;
}
.c-Box.--Preset1 {
padding-top: 80px;
padding-bottom: 100px;
}
.c-Inner {
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
.p-Outpatient {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.p-Outpatient.is-1column {
display: grid;
grid-template-columns: none;
gap: 0px;
justify-items: center;
margin-top: 20px;
}
@media (max-width: 767px) {
.p-Outpatient {
gap: min(10px, 2.66vw);
margin-top: min(50px, 13.33vw);
margin-left: max(-10px, -2.67vw);
margin-right: max(-10px, -2.67vw);
}
.p-Outpatient.is-1column {
margin-top: min(0px, 0vw);
}
}
.is-1column .p-Outpatient__Column {
width: 48.33%;
max-width: 580px;
}
@media (max-width: 767px) {
.is-1column .p-Outpatient__Column {
width: 48.33%;
max-width: 48.33%;
}
}
.p-Outpatient__Catch {
margin-top: 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
line-height: 1.8;
min-height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.p-Outpatient__Catch {
min-height: auto;
margin-top: min(15px, 4vw);
font-size: min(14px, 3.73vw);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
}
.p-Outpatient__Catch.--Pink {
color: #ED7386;
}
.p-Outpatient__Catch.--Blue {
color: #65ADC6;
}
.p-Outpatient__Catch.--Yellow {
color: #F7CE46;
}
.p-Outpatient__Text {
margin-top: 10px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
text-align: center;
line-height: 1.8;
width: 90%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.p-Outpatient__Text {
margin-top: min(10px, 2.66vw);
font-size: min(14px, 3.73vw);
text-align: left;
}
}
.p-OutpatientCard {
--outpatient-card--color: $COLOR-PRIMARY-BLACK;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 200px;
color: var(--outpatient-card--color);
-webkit-box-shadow: 0 0 0px 2px var(--outpatient-card--color) inset;
box-shadow: 0 0 0px 2px var(--outpatient-card--color) inset;
}
@media (max-width: 767px) {
.p-OutpatientCard {
min-height: min(165px, 44vw);
}
}
.p-OutpatientCard.--Pink {
--outpatient-card--color: #ED7386;
background: -webkit-gradient(linear, left top, right top, from(rgba(237, 115, 134, 0.05)), to(rgba(237, 115, 134, 0.3)));
background: linear-gradient(to right, rgba(237, 115, 134, 0.05), rgba(237, 115, 134, 0.3));
}
.p-OutpatientCard.--Blue {
--outpatient-card--color: #65ADC6;
background: -webkit-gradient(linear, left top, right top, from(rgba(101, 173, 198, 0.05)), to(rgba(101, 173, 198, 0.3)));
background: linear-gradient(to right, rgba(101, 173, 198, 0.05), rgba(101, 173, 198, 0.3));
}
.p-OutpatientCard.--Yellow {
--outpatient-card--color: #F7CE46;
background: -webkit-gradient(linear, left top, right top, from(rgba(247, 206, 70, 0.05)), to(rgba(247, 206, 70, 0.3)));
background: linear-gradient(to right, rgba(247, 206, 70, 0.05), rgba(247, 206, 70, 0.3));
}
@media (min-width: 768.1px) {
.p-OutpatientCard:hover {
-webkit-box-shadow: 0 0 0px 4px var(--outpatient-card--color) inset;
box-shadow: 0 0 0px 4px var(--outpatient-card--color) inset;
}
}
/*.p-OutpatientCard__Icon {
width: 60px;
}*/
/*@media (max-width: 767px) {
.p-OutpatientCard__Icon {
width: min(45px, 12vw);
}
}*/
.p-OutpatientCard__Name-y {
font-size: 32px;
font-weight: bold;
margin-top: 10px;
color: #F7CE46;
}
.p-OutpatientCard__Name-p {
font-size: 32px;
font-weight: bold;
margin-top: 10px;
color: #ED7386;
}
.p-OutpatientCard__Name-b {
font-size: 32px;
font-weight: bold;
margin-top: 10px;
color: #65ADC6;
}
.p-OutpatientCard__More-y {
color: #F7CE46;
}
.p-OutpatientCard__More-p {
color: #ED7386;
}
.p-OutpatientCard__More-b {
color: #65ADC6;
}
@media (max-width: 767px) {
.p-OutpatientCard__Name {
margin-top: min(5px, 1.33vw);
font-size: min(23.5px, 6.26vw);
}
}
/*-----east menu3--end----*/
/*------east-med--menu---*/
@media screen and (min-width: 769px) {
.p-Medicine {
background-color: #F1F5FE;
padding-bottom: 94px;
}
}
@media screen and (max-width: 768px) {
.p-Medicine {
padding-bottom: 6.66667vw;
background-color: #F1F5FE;
}
}
.p-Medicine {
padding-bottom: 6.66667vw;
background-color: #F1F5FE;
}
.p-Medicine__detail {
background-color: #F1F5FE;
}
.p-Medicine__detail_set1 {
margin-top: 52px;
background-color: #F1F5FE;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1 {
margin-top: 6.66667vw;
background-color: #F1F5FE;
}
}
.p-Medicine__detail_set1_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #fff;
margin-top: 16px;
padding: 17px 18px 17px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 3.33333vw;
padding: 3.55556vw 3.55556vw 3.55556vw;
}
}
.p-Medicine__detail_set1_item_img {
width: 147px;
margin-right: 25px;
}
@media (max-width: 1030px) {
.p-Medicine__detail_set1_item_img {
width: 14.27184vw;
margin-right: 2.42718vw;
}
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_img {
width: 32.66667vw;
margin-right: 4.22222vw;
}
}
.p-Medicine__detail_set1_item_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 46.44444vw;
}
}
.p-Medicine__detail_set1_item_name {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
@media screen and (min-width: 769px) {
.p-Medicine__detail_set1_item_name {
width: 166px;
}
}
@media screen and (min-width: 769px) and (max-width: 1030px) {
.p-Medicine__detail_set1_item_name {
width: 16.1165vw;
}
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_name {
font-size: 4vw;
line-height: 1.25;
}
}
.p-Medicine__detail_set1_item_name .is-small {
display: inline;
color: #989BAA;
font-weight: 500;
font-size: 12px;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_name .is-small {
font-size: 2.66667vw;
}
}
.p-Medicine__detail_set1_item_name h3 {
display: inline;
}
.p-Medicine__detail_set1_item_txt {
font-size: 16px;
}
@media screen and (min-width: 769px) {
.p-Medicine__detail_set1_item_txt {
min-height: 80%;
padding-left: 34px;
border-left: 1px solid #DCE4F6;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 542px;
}
}
@media screen and (min-width: 769px) and (max-width: 1030px) {
.p-Medicine__detail_set1_item_txt {
width: 52.62136vw;
padding-left: 3.30097vw;
}
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set1_item_txt {
font-size: 2.88889vw;
margin-top: 1.33333vw;
}
}
.p-Medicine__detail_set2 {
background-color: #fff;
margin-top: 36px;
font-size: 15px;
padding: 26px;
line-height: 2;
}
@media screen and (max-width: 768px) {
.p-Medicine__detail_set2 {
margin-top: 3.55556vw;
font-size: 2.44444vw;
padding: 3.33333vw;
line-height: 1.55;
}
}
.p-HeadlineBorder {
font-weight: 700;
font-size: 32px;
text-align: center;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder {
font-size: 5.77778vw;
}
}
.p-HeadlineBorder::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: linear-gradient(165deg, #FF8FA0 50%, #B7D6E1 90%, #B7D6E1);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder::after {
width: 17.77778vw;
margin-top: 3.33333vw;
}
}
.p-HeadlineBorder_small {
font-size: 16px;
text-align: center;
line-height: 1;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder_small {
font-size: 3.11111vw;
font-weight: 500;
}
}
.p-HeadlineBorder.--Margin {
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.p-HeadlineBorder.--Margin {
margin-bottom: 6.66667vw;
}
}
.p-Section {
padding-top: 77px;
}
@media screen and (max-width: 768px) {
.p-Section {
padding-top: 8.88889vw;
}
}
.p-Section_inner {
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1280px) {
.p-Section_inner {
margin: 0 40px;
}
}
@media screen and (max-width: 768px) {
.p-Section_inner {
margin: 0 5.11111vw;
}
}
.p-Section_inner.is-950 {
max-width: 950px;
margin: 0 auto;
}
@media (min-width: 1030.1px) and (max-width: 1199px) {
.p-Section_inner.is-950 {
margin: 0 auto;
}
}
@media (max-width: 1030px) {
.p-Section_inner.is-950 {
margin: 0 40px;
}
}
@media screen and (max-width: 768px) {
.p-Section_inner.is-950 {
margin: 0 5.11111vw;
}
}
.p-text {
font-size: 18px;
line-height: 1.9;
}
@media screen and (max-width: 768px) {
.p-text {
font-size: 3.33333vw;
}
}
/*------east-med--menu----end---*/
/*-----east pil setumei--table---*/
.m_container_gradation {
background-image: -webkit-gradient(linear, left top, right top, color-stop(80%, #FFEBED), to(#E8F6FA));
background-image: linear-gradient(to right, #FFEBED 80%, #E8F6FA);
}
.m_paddingBottom80, .m_rsp_paddingBottom80 {
padding-bottom: 80px !important;
}
.m_paddingTop60, .m_rsp_paddingTop60 {
padding-top: 60px !important;
}
.m_inner_m {
max-width: 1000px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
padding-right: 20px;
padding-left: 20px;
}
@media screen and (max-width: 640px) {
.m_inner_m {
padding-right: 3vw;
padding-left: 3vw;
}
}
.m_title_border {
font-size: 44px;
font-weight: normal;
text-align: center;
color: #f65275;
margin-bottom: 40px;
}
@media (max-width: 640px) {
.m_title_border {
font-size: 26px;
margin-bottom: 25px;
}
}
.uq_layout_pill_about {
font-size: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.uq_layout_pill_about .uq_layout_pill_about_item {
width: 30%;
margin-right: 4.5%;
}
@media (max-width: 800px) {
.uq_layout_pill_about .uq_layout_pill_about_item {
width: 46%;
margin-right: 0;
}
}
.m_marginTop30, .m_rsp_marginTop30 {
margin-top: 30px !important;
}
@media screen and (max-width: 640px) {
.m_rsp_marginTop30 {
margin-top: 15px !important;
}
}
.uq_layout_pill_about .uq_layout_pill_about_title {
font-size: 24px;
font-weight: bold;
color: #f65275;
text-align: center;
}
@media screen and (max-width: 640px) {
.uq_layout_pill_about .uq_layout_pill_about_title {
font-size: 18px;
}
}
.m_text {
font-size: 16px;
color: #4d4e53;
line-height: 1.8;
}
.m_marginTop20, .m_rsp_marginTop20 {
margin-top: 20px !important;
}
@media screen and (max-width: 640px) {
.m_text {
font-size: 14px;
}
}
.m_link_arrow {
font-size: 0;
text-align: right;
}
.m_align_left {
text-align: left !important;
}
.m_marginTop20, .m_rsp_marginTop20 {
margin-top: 20px !important;
}
.m_link_arrow .m_link_arrow_text {
font-size: 17px;
color: #f65275;
display: inline-block;
vertical-align: top;
position: relative;
line-height: 1.8;
padding-left: 25px;
font-weight: bold;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media screen and (max-width: 640px) {
.m_link_arrow .m_link_arrow_text {
font-size: 15px;
padding-left: 15px;
}
}
@media screen and (max-width: 640px) {
.m_link_arrow .m_link_arrow_text::before {
width: 8px;
height: 8px;
top: 14px;
}
}
.m_link_arrow .m_link_arrow_text::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-top: solid 2px #f65275;
border-right: solid 2px #f65275;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 0;
top: 14px;
margin-top: -5px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.m_link_arrow .m_link_arrow_text::after {
content: '';
display: block;
width: 0%;
height: 1px;
background: #f65275;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
bottom: -1px;
-webkit-transition: 0.3s;
transition: 0.3s;
left: 50%;
}
.m_marginTop10, .m_rsp_marginTop10 {
margin-top: 10px !important;
}
.m_text {
font-size: 16px;
color: #4d4e53;
line-height: 1.8;
}
.m_marginTop20, .m_rsp_marginTop20 {
margin-top: 20px !important;
}
/*------east price table-----*/
/*
.m-PriceTable_Label.is-boderR {
border-right: 1px solid #DDD;
}
.m-PriceTable_Label {
background-color: #F195A0;
color: #fff;
font-weight: normal;
vertical-align: middle;
text-align: center;
padding: 8px 0;
}
.m-PriceTable thead th:not(.m-PriceTable_Label) {
background-color: #FCEBEC;
vertical-align: middle;
}
.m-PriceTable thead th:not(.m-PriceTable_Label), .m-PriceTable thead td, .m-PriceTable tbody th:not(.m-PriceTable_Label), .m-PriceTable tbody td {
border: 1px solid #DDD;
font-weight: normal;
padding: 8px 0;
}
.m-PriceTable .is-red {
color: #E36074;
font-weight: bold;
}
@media (min-width: 900.1px) {
.m-PriceTable .p-Visible--900 {
display: none !important;
}
}
.m-PriceTable tbody td.--Name1, .m-PriceTable tbody td.--Name2, .m-PriceTable tbody td.--Name3 {
width: 38.44%;
padding: 10px;
text-align: left;
}
.m-PriceTable tbody td {
vertical-align: middle;
text-align: center;
background-color: #fff;
width: 20.52%;
padding: 10px;
} */
/*
.m-PriceTable thead th:not(.m-PriceTable_Label) a, .m-PriceTable thead td a, .m-PriceTable tbody th:not(.m-PriceTable_Label) a, .m-PriceTable tbody td a {
color: #4D4E52;
}
.m-PriceTable__imgLink {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.m-PriceTable__2col {
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.m-PriceTable__2col__img {
max-width: 144px;
}
.m-PriceTable tbody td.--Price1 {
font-size: 12px;
font-weight: bold;
}
.m-PriceTable tbody td {
vertical-align: middle;
text-align: center;
background-color: #fff;
width: 20.52%;
padding: 10px;
}
.m-PriceTable tbody td.--Price1 .is-large {
font-size: 18px;
margin-right: 0.1rem;
}
.m-PriceTable .is-red {
color: #E36074;
font-weight: bold;
} */
/*@media screen and (max-width: 640px) {
.m-PriceTable__discount {
display: block;
margin-left: auto;
margin-right: auto;
padding: min(4.5px, 1.2vw) 0 min(5px, 1.33vw);
width: min(76px, 20.26vw);
border-radius: min(6px, 1.6vw);
line-height: 1.1;
}
}
@media screen and (max-width: 950px) {
.m-PriceTable__discount {
padding: min(4.5px, 1.2vw) min(16px, 4.26vw) min(5px, 1.33vw);
border-radius: min(10px, 2.66vw);
}
}
@media screen and (mix-width: 951px) {
.m-PriceTable__discount {
display: inline-block;
background-color: #E36074;
text-align: center;
line-height: 1;
margin-top: 2px;
padding: 4.5px 16px 5px;
border-radius: 30px;
font-size: 10px;
color: #FFF795;
font-weight: bold;
}
.m-PriceTable__discount .is-white {
color: #fff;
display: inline-block;
position: relative;
top: -0.08rem;
margin-right: 0.2rem;
}
.m-PriceTable__discount .is-large2 {
font-size: 14px;
} */
/*
@media screen and (min-width: 950.1px) {
.m-PriceTable .p-Visible--950 {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.m-PriceTable__2col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.m-PriceTable__2col {
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.m-PriceTable__2col__img {
max-width: 144px;
}
@media screen and (max-width: 768px) {
.m-PriceTable {
font-size: min(10px, 2.66vw);
}
}
.m-PriceTable {
font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Meiryo UI', 'メイリオ', Meiryo, Avenir, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
width: 100%;
border-collapse: collapse;
color: #4D4E52;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
@media screen and (max-width: 640px) {
.m_rsp_marginTop30 {
margin-top: 15px !important;
}
}
.m_marginTop30, .m_rsp_marginTop30 {
margin-top: 30px !important;
}
*/
.m-PriceTable_Label {
background-color: #F195A0;
color: #fff;
font-weight: normal;
vertical-align: middle;
text-align: center;
padding: 8px 0;
}
.m-PriceTable .is-red {
color: #E36074;
font-weight: bold;
}
.m-PriceTable__discount {
display: inline-block;
background-color: #E36074;
text-align: center;
line-height: 1.2;
margin-top: 2px;
padding: 4.5px 16px 5px;
border-radius: 30px;
font-size: 10px;
color: #FFF795;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.m-PriceTable__2col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.m-PriceTable__2col {
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.m-PriceTable__2col__img {
max-width: 144px;
}
.m-PriceTable {
font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Meiryo UI', 'メイリオ', Meiryo, Avenir, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
width: 100%;
border-collapse: collapse;
color: #4D4E52 !important;
}
/*-----east pil setumei--table-- end---*/
/*-----east pil setumei-----*/
.m_title_pink__small {
font-size: 22px;
color: #f65275;
line-height: 1.4;
font-weight: bold;
text-align: center;
}
.m_title_pink__small a {
font-size: 22px;
color: #f65275 !important;
line-height: 1.4;
font-weight: bold;
text-align: center;
}
.m_container_gradation {
background-image: -webkit-gradient(linear, left top, right top, color-stop(80%, #FFEBED), to(#E8F6FA));
background-image: linear-gradient(to right, #FFEBED 80%, #E8F6FA);
}
.m_paddingBottom80, .m_rsp_paddingBottom80 {
padding-bottom: 80px !important;
}
.m_paddingTop60, .m_rsp_paddingTop60 {
padding-top: 60px !important;
}
.m_inner_m {
max-width: 1000px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
padding-right: 20px;
padding-left: 20px;
}
@media screen and (max-width: 640px) {
.m_inner_m {
padding-right: 3vw;
padding-left: 3vw;
}
}
.m_title_border {
font-size: 44px;
font-weight: normal;
text-align: center;
color: #f65275;
margin-bottom: 40px;
}
@media (max-width: 640px) {
.m_title_border {
font-size: 26px;
margin-bottom: 25px;
}
}
.uq_layout_pill_about {
font-size: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.uq_layout_pill_about .uq_layout_pill_about_item {
width: 30%;
margin-right: 4.5%;
}
@media (max-width: 800px) {
.uq_layout_pill_about .uq_layout_pill_about_item {
width: 46%;
margin-right: 0;
}
}
.m_marginTop30, .m_rsp_marginTop30 {
margin-top: 30px !important;
}
@media screen and (max-width: 640px) {
.m_rsp_marginTop30 {
margin-top: 15px !important;
}
}
.uq_layout_pill_about .uq_layout_pill_about_title {
font-size: 24px;
font-weight: bold;
color: #f65275;
text-align: center;
}
@media screen and (max-width: 640px) {
.uq_layout_pill_about .uq_layout_pill_about_title {
font-size: 18px;
}
}
.m_text {
font-size: 16px;
color: #4d4e53;
line-height: 1.8;
}
.m_marginTop20, .m_rsp_marginTop20 {
margin-top: 20px !important;
}
@media screen and (max-width: 640px) {
.m_text {
font-size: 14px;
}
}
.m_link_arrow {
font-size: 0;
text-align: right;
}
.m_align_left {
text-align: left !important;
}
.m_marginTop20, .m_rsp_marginTop20 {
margin-top: 20px !important;
}
.m_link_arrow .m_link_arrow_text {
font-size: 17px;
color: #f65275;
display: inline-block;
vertical-align: top;
position: relative;
line-height: 1.8;
padding-left: 25px;
font-weight: bold;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media screen and (max-width: 640px) {
.m_link_arrow .m_link_arrow_text {
font-size: 15px;
padding-left: 15px;
}
}
@media screen and (max-width: 640px) {
.m_link_arrow .m_link_arrow_text::before {
width: 8px;
height: 8px;
top: 14px;
}
}
.m_link_arrow .m_link_arrow_text::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-top: solid 2px #f65275;
border-right: solid 2px #f65275;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 0;
top: 14px;
margin-top: -5px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.m_link_arrow .m_link_arrow_text::after {
content: '';
display: block;
width: 0%;
height: 1px;
background: #f65275;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
bottom: -1px;
-webkit-transition: 0.3s;
transition: 0.3s;
left: 50%;
}
.m_marginTop10, .m_rsp_marginTop10 {
margin-top: 10px !important;
}
.m_text {
font-size: 16px;
color: #4d4e53;
line-height: 1.8;
}
.m_marginTop20, .m_rsp_marginTop20 {
margin-top: 20px !important;
}
.u-Feature {
padding-top: 20px;
padding-bottom: 4%;
background: linear-gradient(165deg, #FF8FA0 50%, #B7D6E1 90%, #B7D6E1);
}
/*-----east pil setumei--end---*/
/*-----east table-----*/
table, thead, tbody, td, th {
/*width: 100%;*/
border-collapse: collapse;
border-spacing: 0px;
border: solid #ccc 1px;
font-size: 14px;
}
/*-----east point-----*/
.u-Feature {
padding-top: 20px;
padding-bottom: 4%;
background: linear-gradient(165deg, #FF8FA0 50%, #B7D6E1 90%, #B7D6E1);
}
@media (max-width: 767px) {
.u-Feature {
overflow: hidden;
padding-top: min(20px, 5.33vw);
padding-bottom: min(50px, 13.33vw);
margin-top: min(30px, 8vw);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.u-Feature {
padding-bottom: 2.75rem;
}
}
.c-Inner.--Max1200 {
max-width: 1200px;
}
.c-Inner {
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.c-Inner {
padding-left: min(20px, 5.33vw);
padding-right: min(20px, 5.33vw);
}
}
@media (min-width: 1025px) {
.u-ListFeature {
display: grid;
gap: min(10px, 0.69vw);
grid-template-columns: repeat(5, 1fr);
}}
@media (max-width: 767px) {
.u-ListFeature {
grid-template-columns: repeat(2, 1fr);
gap: min(5px, 1.33vw);
display: grid;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.u-ListFeature {
grid-template-columns: repeat(3, 1fr);
display: grid;
gap: min(10px, 0.69vw);
}
}
.u-ListFeature__Item {
background: #fff;
border-radius: min(10px, 0.69vw);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
color: #ED7386;
min-height: min(120px, 8.33vw);
padding: 10px;
font-size: min(24px, 1.66vw);
position: relative;
}
@media (max-width: 767px) {
.u-ListFeature__Item {
border-radius: min(25px, 1.73vw);
min-height: min(80px, 21.33vw);
padding: min(10px, 2.66vw);
font-size: min(16px, 4.26vw);
}
}
.u-ListFeature__ItemNote.is_sp {
display: none;
}
.u-ListFeature__ItemNote {
color: #4d4e53;
text-align: left;
line-height: 1.3;
position: absolute;
bottom: 0;
left: 0;
width: 110%;
font-size: min(11.7px, 0.81vw);
-webkit-transform: translateY(135%);
transform: translateY(135%);
}
/*-----east point---end--*/
/*-----記事 小目次*/
@media screen and (max-width: 750px) {
.article ul, .article ol {
/* font-size: 3.4666666667vw; */
font-size: 18px;
margin-bottom: 4vw;
padding: 4vw;
padding-left: 8vw;
width: 100%;
}
}
.article ul, .article ol {
border: 1px solid #d7dadf;
margin-bottom: 10px;
padding: 20px;
padding-left: 40px;
/* width: 440px;*/
}
.article ol li {
list-style-type: decimal;
}
.container2 {
width: 100%;
margin: -160px auto 0;
}
@media only screen and (max-width: 768px) {
.container2 {
width: 100%;
margin: -80px auto 0;
}
}
/*-----記事 小目次-----end---*/
/* --site map----*/
.smap-container {
margin: 0 auto;
max-width: 1160px;
padding: 0 30px;
width: 100%;
}
@media screen and (max-width: 750px) {
.smap-container {
padding: 0 4vw;
}
}
.sitemap {
color: #000;
display: grid;
gap: 50px 100px;
grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1100px) {
.sitemap {
gap: 50px 70px;
}
}
@media screen and (max-width: 750px) {
.sitemap {
font-size: 3.4666666667vw;
gap: 6.6666666667vw;
grid-template-columns: 1fr;
}
}
.sitemap_list {
border-bottom: 1px dashed #918b8b;
display: block;
padding: 10px 0;
}
@media screen and (max-width: 750px) {
.sitemap_list {
padding: 2.6666666667vw 0;
}
}
.sitemap_list__child li {
position: relative;
}
.sitemap_list__child li::before {
content: "-";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.sitemap_list__child li a {
padding-left: 15px;
}
@media screen and (max-width: 750px) {
.sitemap_list__child li a {
padding-left: 2.6666666667vw;
}
}
/* --site map--end--*/