@charset 'UTF-8';
  html,
body {
overflow-x: hidden;
}
body {
line-height: 1.9;
font-family: "Playfair_Display", "Shippori_Mincho_B1", serif;
font-weight: 400;
letter-spacing: 0.01em;
font-size: 17px;
}
body.is-fixed {
overflow: hidden;
}
@media screen and (max-width:480px) {
body {
font-size: 17px;
}
}
.br__pc {
display: none;
}
@media screen and (min-width:768px) {
.br__tb {
display: none;
}
}
@media screen and (min-width:960px) {
.br__pc {
display: block;
}
.br__sp {
display: none;
}
}
@font-face {
font-family: 'Shippori_Mincho_B1';
src: url(//kouso-pilates.com/wp-content/themes/hannablogsite/Shippori_Mincho_B1/ShipporiMinchoB1-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Shippori_Mincho_B1_Medium';
src: url(//kouso-pilates.com/wp-content/themes/hannablogsite/Shippori_Mincho_B1/ShipporiMinchoB1-Medium.ttf) format('truetype');
}
.small {
font-size: 14px;
display: inline-block;
line-height: 1.6;
}
.big {
font-size: 30px;
}
.bold {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
}
.textGradient {
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.1) 80%);
background-clip: text;
-webkit-text-fill-color: transparent;
} .load-fade {
opacity: 0;
visibility: hidden;
transition: all 1.5s;
}
.load-fade.is-show {
opacity: 1;
visibility: visible;
}
.scroll-up {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: all 2s;
}
.scroll-up.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
@media screen and (min-width:768px) {
.small {
font-size: 16px;
}
.big {
font-size: 40px;
}
} .container {
margin: 0 auto;
padding: 0 20px;
position: relative;
}
@media screen and (min-width:768px) {
.container {
max-width: 750px;
}
}
@media screen and (min-width:960px) {
.container {
max-width: 1080px;
}
} .section {
padding-top: 50px;
padding-bottom: 80px;
position: relative;
background: #f8f6f0;
color: #381e20;
}
.section._primary {
background: #fff;
}
.section._secondary {
background: #ece5dc;
}
.section._kouso {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_kouso_sp.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
overflow: hidden;
color: #fff;
padding-bottom: 90px;
}
.section._pilates {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_pilates_sp.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
overflow: hidden;
color: #fff;
padding-bottom: 90px;
}
@media screen and (min-width: 768px) {
.section {
padding-top: 80px;
padding-bottom: 100px;
}
}
@media screen and (min-width: 960px) {
.section._kouso {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_kouso_pc.png);
}
.section.section._pilates {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_pilates_pc.png);
}
} .link {
text-decoration: underline;
} .header {
display: none;
}
@media screen and (min-width: 960px) {
.header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 90px;
z-index: 10;
background: #ebdcc8;
}
.logo {
margin-left: 15px;
margin-top: 5px;
}
.logo__wrapper {
width: 180px;
height: auto;
}
.logo__wrapper img {
width: 100%;
flex-shrink: 1;
}
} #navSP {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 1;
}
.navSP__list {
display: flex;
justify-content: space-between;
}
.navSP__item {
display: inline-block;
width: 100%;
padding: 10px 5px;
text-align: center;
background: #ebdcc8;
color: #55353b;
font-size: 15px;
}
.navSP__item._reservasion {
background: #55353b;
color: #fff;
}
.navSP__item i {
font-size: 25px;
}
.iconname {
display: block;
}
#navPC {
display: none;
}
.menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 650px;
background-color: #f8f6f0;
color: #381e20;
z-index: 5;
padding: 15px;
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.menu.open {
transform: translateY(0);
}
.closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 25px;
}
.menu ul {
display: block;
margin-top: 40px;
}
.menu li {
display: block;
padding: 10px;
border-bottom: #7c7c7c 1px solid;
font-size: 16px;
}
.menu__instaArea {
padding-left: 10px;
}
.menu__instaArea i {
font-size: 45px;
} #navPC {
position: fixed;
right: 0;
width: 100%;
}
.navPC__list {
display: flex;
justify-content: flex-end;
align-items: center;
}
.navPC__item {
display: inline-block;
width: 7.5%;
height: 90px;
padding: 17px 5px 0 5px;
text-align: center;
background: #ebdcc8;
color: #55353b;
font-size: 13px;
}
.navPC__item._about {
padding: 15px 5px 0 5px;
}
.navPC__item._reservasion {
background: #55353b;
color: #fff;
margin-left: 10px;
}
.navPC__icon {
width: 32px;
margin: 0 auto;
}
#navPC i {
font-size: 25px;
}
.iconname {
display: block;
}
@media screen and (min-width: 960px) {
#navSP {
display: none;
}
#navPC {
display: block;
}
} .headingL {
text-align: center;
margin-top: 30px;
font-size: 30px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
letter-spacing: 0.1em;
}
.headingL._top {
margin-top: 60px;
}
.headingL._primary {
position: relative;
margin-top: 0px;
margin-bottom: 50px;
}
.headingL._primary::before {
content: '';
position: absolute;
background: #381e20;
width: 100px;
height: 1px;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.headingL._secondary {
font-size: 25px;
}
.headingL._bg {
border-bottom: 1px solid #fff;
margin-bottom: 30px;
}
.headingM {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
font-size: 19px;
margin-top: 30px;
margin-bottom: -10px;
margin-left: 13px;
position: relative;
}
.headingM::before {
content: '';
display: inline-block;
position: absolute;
background-color: #381e20;
width: 4px;
height: 30px;
top: 5px;
left: -13px;
margin-right: 5px;
}
.headingM:first-of-type {
margin-top: 50px;
}
.headingS {
font-size: 22px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
margin-top: 5px;
}
@media screen and (min-width: 768px) {
.headingL {
margin-top: 50px;
font-size: 40px;
}
.headingL._top {
margin-top: 90px;
}
.headingL._primary {
margin-bottom: 60px;
}
.headingL._secondary {
font-size: 35px;
margin-top: 90px;
}
.headingL._bg {
margin: 20px auto 50px;
max-width: 800px;
}
} .headingImg {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_header.png);
width: 100%;
height: 15vh;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (min-width: 960px) {
.headingImg {
height: 40vh;
}
}
.headingImg.headingImg--kouso {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_kouso.jpg);
}
.headingImg.headingImg--pilates {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_pilates.jpg);
}
.headingImg.headingImg--blog {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/bg_blog.png);
} .breadcrumb {
margin: 0;
padding: 0 20px;
list-style: none;
background: #f8f6f0;
color: #55353b;
font-size: 15px;
}
.breadcrumb li {
display: inline; list-style: none;
}
.breadcrumb li:after { content: '>';
padding: 0 0.2em;
color: #555;
}
.breadcrumb li:last-child:after {
content: '';
}
.breadcrumb li a {
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
} .imageArea img {
width: 100%;
}
.imgArea {
margin-top: 30px;
} .pageIntro__wrapper {
display: flex;
flex-direction: column;
}
.pageIntro__wrapper._mirror {
flex-direction: column-reverse;
}
.pageIntro__catch {
font-size: 22px;
margin-top: 15px;
letter-spacing: 0.05em;
text-align: center;
}
.pageIntro__catch._middle {
margin-top: 75px;
}
.pageIntro__catch._table {
margin-top: 30px;
}
.pageIntro__txt {
margin-top: 30px;
}
.pageIntro__txt._border {
border: #7c7c7c 1px solid;
padding: 12px 12px 18px 12px;
border-radius: 5px;
margin-top: 20px;
}
.pageIntro__txt.pageIntro__txt--center {
text-align: center;
}
@media screen and (min-width: 768px) {
.pageIntro__catch {
font-size: 34px;
letter-spacing: 0.07em;
}
.pageIntro__catch._middle {
margin-top: 100px;
}
}
@media screen and (min-width: 960px) {
.pageIntro__wrapper {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.pageIntro__wrapper._mirror {
flex-direction: row;
}
.pageIntro__wrapper._half {
align-items: flex-start;
}
.pageIntro__wrapper .pageIntro__txt {
width: 55%;
margin-right: 50px;
}
.pageIntro__wrapper .imgArea {
width: 45%;
}
.pageIntro__wrapper._mirror .pageIntro__txt {
margin-right: 0;
margin-left: 50px;
}
.pageIntro__wrapper._half .pageIntro__inner {
width: calc((100% - 50px) / 2);
}
.pageIntro__wrapper._half .pageIntro__txt {
width: 100%;
}
.pageIntro__inner .pageIntro__catch {
margin-top: 0;
}
.pageIntro__txt {
font-size: 18px;
max-width: 800px;
margin: 30px auto;
}
} .centerBtn {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 30px;
position: relative;
}
.centerBtn .btn+.btn {
margin-top: 15px;
}
.centerBtn._bottom {
margin-bottom: 30px;
}
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 0.4em;
width: 100%;
max-width: 370px;
transition: .4s;
cursor: pointer;
} .btn--default {
position: relative;
background: transparent;
border: 1px #381e20 solid;
color: #381e20;
font-size: 18px;
letter-spacing: 0.03em;
}
.btn--default::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 10px;
height: 10px;
margin: auto;
border-top: 1.5px solid #381e20;
border-right: 1.5px solid #381e20;
transform: rotate(45deg);
box-sizing: border-box;
} .btn--primary {
position: relative;
border: 1px #fff solid;
background: transparent;
color: #fff;
font-size: 18px;
}
.btn--primary::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 10px;
height: 10px;
margin: auto;
border-top: 1.5px solid #fff;
border-right: 1.5px solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
@media screen and (min-width:768px) {
.btn {
max-width: 400px;
}
.btn--default,
.btn--primary {
font-size: 20px;
}
.centerBtn {
flex-direction: row;
margin-top: 50px;
}
.centerBtn--blog {
margin-top: 70px;
}
.centerBtn .btn+.btn {
margin-top: 0;
margin-left: 20px;
}
} img {
width: 100%;
} .table {
margin-top: 60px;
width: 100%;
table-layout: fixed;
margin-bottom: 30px;
}
tr {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #7c7c7c;
}
.table tr:first-child {
padding-top: 0;
}
th {
font-weight: normal;
vertical-align: middle;
width: 25%;
}
td {
display: block;
width: 75%;
}
.table__txt {
font-size: 18px;
margin-top: 50px;
margin-bottom: -30px;
}
.table+.table__txt {
margin-top: 100px;
}
.table__list {
margin-top: 15px;
margin-bottom: 15px;
}
.table__list._first {
margin-top: 0;
}
.table__item {
display: flex;
}
.table__item+.table__item {
margin-top: 5px;
}
.number+.text {
margin-left: 5px;
} @media screen and (min-width:768px) {
th {
width: 35%;
}
td {
width: 65%;
}
}
.table__link {
text-decoration: underline;
}
.table__link i {
margin-left: -7px;
}
.table__link:hover {
color: #7c7c7c;
}
@media screen and (max-width: 480px) {
.table {
margin-top: 30px;
}
.table+.table__txt {
margin-top: 50px;
}
tr {
display: block;
}
th+td {
margin-top: 10px;
}
td {
width: 100%;
}
.table__txt {
font-size: 15px;
margin-top: 30px;
margin-bottom: -15px;
}
} .table__inner {
display: flex;
flex-direction: column;
}
.table__inner._option {
font-size: 15px;
}
.table__inner._option .plan__td {
font-size: 19px;
}
.table__inner._option .small {
font-size: 13px;
}
.table__inner._option .plan__tr {
padding-top: 15px;
padding-bottom: 15px;
}
.table__inner+.table__inner._option {
margin-top: -20px;
}
.plan__subTxt {
margin-top: -15px;
margin-bottom: 50px;
font-size: 15px;
}
.tableTtl {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
font-size: 19px;
margin-top: 30px;
margin-bottom: -10px;
margin-left: 13px;
position: relative;
}
.tableTtl::before {
content: '';
display: inline-block;
position: absolute;
background-color: #381e20;
width: 4px;
height: 30px;
top: 5px;
left: -13px;
margin-right: 5px;
}
.plan__markUp {
display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 25px;
font-size: 15px;
background: #573f42;
color: #FFF;
box-sizing: border-box;
border-radius: 40px;
margin-bottom: 10px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif
}
.plan__trTtl .plan__th {
width: 100%;
}
.plan__table {
margin-top: 30px;
width: 100%;
table-layout: fixed;
margin-bottom: 30px;
}
.plan__table._single {
max-width: 400px;
}
.plan__table._single .plan__td {
padding-right: 10px;
}
.plan__table._single .plan__tr:last-child {
border-bottom: none;
}
.plan__tr {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #7c7c7c;
background: #fff;
}
.plan__trTtl {
background: #ebdcc8;
padding: 5px 0 5px 0;
border-bottom: none;
}
.plan__name {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #7c7c7c;
background-color: #ebdcc8;
}
.plan__th {
font-weight: normal;
vertical-align: middle;
width: 25%;
padding-left: 10px;
line-height: 1.6;
}
.plan__td {
display: block;
width: 75%;
line-height: 1.4;
} .tab-wrap {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.tab-wrap:after {
content: '';
width: 100%;
height: 3px;
background: #573f42;
display: block;
order: -1;
}
.tab-label {
color: #fff;
background: #c3bfba;
white-space: nowrap;
text-align: center;
padding: 10px .5em;
order: -1;
position: relative;
cursor: pointer;
border-radius: 3px 3px 0 0;
flex: 1;
}
.tab-label:not(:last-of-type) {
margin-right: 5px;
}
.tab-content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
background: #fcfbf8;
border-radius: 0 0 5px 5px;
} .tab-switch:checked+.tab-label {
background: #573f42;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
font-weight: 400;
}
.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
padding: 15px 15px 50px 15px;
opacity: 1;
transition: 1.2s opacity;
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
} .tab-switch {
display: none;
} .plan__list {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 30px;
}
.plan__card {
width: 100%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
border-radius: 5px;
}
.plan__card+.plan__card {
margin-top: 30px;
}
.plan__card .plan__table {
margin: 10px 0 20px 0;
}
.plan__card._recommend {
border: 1px solid #573f42;
}
.plan__label {
background: #ebdcc8;
padding: 20px 10px 15px 10px;
border-radius: 5px 5px 0 0;
}
.plan__label._recommend {
background: #573f42;
color: #fff;
}
.plan__body {
padding: 20px 10px 20px 10px;
}
.plan__ttl {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
text-align: center;
font-size: 20px;
}
.plan__catch {
font-size: 15px;
text-align: center;
flex-grow: 1;
}
.plan__price {
text-align: center;
font-size: 22px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
}
.plan__td {
font-size: 22px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
text-align: right;
}
.plan__list._single .plan__td {
width: 55%;
}
.plan__list._single .plan__th {
width: 45%;
}
.plan__card .small {
margin-left: 3px;
}
@media screen and (min-width: 768px) {
.tab-switch:checked+.tab-label+.tab-content {
padding: 15px 30px 50px 30px;
}
.plan__list {
flex-direction: row;
flex-wrap: wrap;
}
.plan__card {
width: calc((100% - 30px) / 2);
}
.plan__list._single .plan__card {
width: calc((100% - 30px) / 2);
}
.plan__table._single .plan__th {
width: 50%;
}
.plan__table._single .plan__td {
width: 50%;
}
.plan__card .plan__th {
width: 50%;
}
.plan__card .plan__td {
width: 50%;
text-align: right;
padding-right: 10px;
}
.plan__card._recommend {
margin-top: 0;
}
}
@media screen and (min-width: 960px) {
.plan__markUp {
height: 50px;
line-height: 50px;
text-align: center;
padding: 0 30px;
font-size: 18px;
background: #573f42;
color: #FFF;
box-sizing: border-box;
border-radius: 30px;
}
.tableTtl._middle {
margin-bottom: 40px;
}
.table__wrapper {
max-width: 800px;
margin: 0 auto;
}
.table__inner {
flex-direction: row;
justify-content: space-between;
}
.table__inner .plan__table._single {
width: calc((100% - 30px) / 2);
}
.plan__list {
flex-direction: row;
}
.plan__list._single {
max-width: 800px;
}
.plan__card {
width: calc((100% - 30px) / 4);
}
.plan__list._single .plan__card {
width: calc((100% - 30px) / 3);
}
.plan__card+.plan__card {
margin-top: 0;
}
.plan__card:nth-child(4) {
margin-top: 30px;
}
}
@media screen and (max-width: 480px) {
.table__inner+.table__inner._option {
margin-top: -25px;
}
.pageIntro__txt._table .small {
margin-top: -10px;
}
.plan__table {
margin-top: 30px;
}
.plan__th {
width: 70%;
}
.plan__td {
width: 65%;
}
.plan__th+.plan__td {
margin-top: 0;
}
.plan__table+.plan__table {
margin-top: 0;
}
} .footer {
padding: 30px 10px 90px 10px;
text-align: center;
background: #573f42;
color: #fff;
font-weight: 300;
}
.footer._short {
padding: 30px 10px;
}
.footer__logo {
width: 170px;
height: auto;
margin: 0 auto;
}
.footer__wrapper {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.footer__list {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
margin-left: 10%;
}
.footer__item {
width: calc((100% - 10px) / 2);
text-align: left;
font-size: 16px;
padding: 1% 0 1% 0;
}
.footer__instaArea {
display: flex;
justify-content: flex-start;
margin: 50px 10% 0 10%;
border-top: 1px solid #fff;
}
.instaBtn {
display: inline-block;
font-size: 40px;
margin-top: 5px;
}
.footer__txt {
font-size: 16px;
}
.centerBtn._footer {
margin-top: 10px;
}
.footer__policyList {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;
margin-left: 10%;
flex-direction: column;
}
.footer__policyItem {
padding: 1% 0 1% 0;
text-align: left;
font-size: 14px;
}
.footer__copyright {
margin-top: 30px;
font-size: 14px;
}
@media screen and (min-width:768px) {
.footer._short {
padding: 30px 10px;
}
.footer__logo {
margin: 30px auto;
width: 30%;
}
.footer__wrapper {
flex-direction: row;
}
.footer__item {
font-size: 18px;
}
.footer__list {
width: 40%;
margin-top: 0;
margin-left: 10%;
}
.footer__inner {
width: 30%;
border-left: 1px solid #fff;
}
.footer__instaArea {
margin-top: 0;
border-top: none;
}
.footer__instaBtn {
margin-top: 0;
}
.footer__policyList {
margin-top: 30px;
}
}
@media screen and (min-width:960px) {
.footer {
padding: 30px 10px 50px 10px;
}
}
#reservation {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
top: 100px;
right: 0px;
width: 20%; opacity: 0;
visibility: hidden;
transition: .7s;
} #reservation.active {
opacity: 1;
visibility: visible;
}
#reservation a {
z-index: 999;
box-shadow: 1px 3px 5px rgba(155, 155, 155, .6);
background: #55353b;
padding: 0;
border-radius: 3px 0 0 3px;
}
.lineImg {
padding: 25%;
}
#reservation p {
margin-top: -5px;
margin-bottom: 20%;
font-size: 19px;
line-height: 1.3;
letter-spacing: 0.1em;
color: #fdfbf7;
}
@media screen and (min-width: 768px) {
#reservation a {
border-radius: 10px 0 0 10px;
}
#reservation p {
margin-top: -5px;
margin-bottom: 20%;
font-size: 30px;
line-height: 1.3;
letter-spacing: 0.1em;
color: #fdfbf7;
}
}
@media screen and (min-width: 960px) {
#reservation {
top: 200px;
right: 0px;
width: 100px;
}
#reservation p {
font-size: 25px;
}
} .mainVisual__wrapper img {
width: 100%;
}
.mainVisual__wrapper._pc {
display: none;
}
.mainVisual__wrapper._sp {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
aspect-ratio: 2 / 3;
}
.logoBox {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: auto;
}
@media screen and (min-width: 767px) {
.mainVisual__wrapper._sp {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
aspect-ratio: 3 / 4;
}
.logoBox {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: auto;
}
}
@media screen and (min-width:960px) {
.logoBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 170px;
height: auto;
}
.mainVisual__wrapper._pc {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
margin-top: 70px;
aspect-ratio: 2.4 / 1;
}
.mainVisual__wrapper._sp {
display: none;
}
.mainVisual__wrapper._pc {
display: block;
}
}
.img-01,
.img-02,
.img-03 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainVisual__wrapper._sp .img-01 {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/img01_sp.png);
animation: slide-animation-01 12s infinite;
}
.mainVisual__wrapper._sp .img-02 {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/img03_sp.png);
animation: slide-animation-02 12s infinite;
}
.mainVisual__wrapper._sp .img-03 {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/img02_sp.png);
animation: slide-animation-03 12s infinite;
}
.mainVisual__wrapper._pc .img-01 {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/img01_pc.png);
animation: slide-animation-01 15s infinite;
}
.mainVisual__wrapper._pc .img-02 {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/img02_pc.png);
animation: slide-animation-02 15s infinite;
}
.mainVisual__wrapper._pc .img-03 {
background-image: url(//kouso-pilates.com/wp-content/themes/hannablogsite/images/img03_pc.png);
animation: slide-animation-03 15s infinite;
}
@keyframes slide-animation-01 {
0% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
90% {
opacity: 0
}
100% {
opacity: 1;
}
}
@keyframes slide-animation-02 {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes slide-animation-03 {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
} @media screen and (min-width:768px) {
.trial__wrapper {
max-width: 600px;
margin: 0 auto;
}
} .about__wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.about__img {
border: #5a656b 1px solid;
border-radius: 7px;
}
.about__img img {
border-radius: 7px;
}
.about__inner+.about__img {
margin-left: 70px;
}
.about__mark {
width: 200px;
margin: 0 auto;
}
.about__logo {
width: 250px;
height: auto;
margin: 20px auto;
}
.about__logo._top {
margin-top: 60px;
width: 200px;
}
.about__ttl {
margin-top: 30px;
text-align: center;
font-size: 34px;
letter-spacing: 0.07em;
}
.about__ttl._top {
margin-top: 100px;
}
.about__txt {
max-width: 800px;
margin: 30px auto 15px;
}
.about__thumb {
width: 40%;
border-radius: 10px;
border: 1px solid #5a656b;
}
.about__thumb img {
border-radius: 10px;
}
.about__box {
width: 60%;
}
.about__box+.about__thumb {
margin-left: 50px;
}
.about__imageArea {
margin-top: 30px;
margin-bottom: 30px;
border-radius: 10px;
}
.about__imageArea img {
border-radius: 10px;
object-fit: cover;
}
.about__body {
color: #000;
border: 1px solid #5a656b;
border-radius: 10px;
padding: 15px 20px;
margin: 10px auto;
max-width: 750px;
}
.about__body._primary {
background: #fdfbf7;
}
.about__comment {
display: inline-block;
font-size: 18px;
}
.about__ttl._primary {
margin-top: 60px;
font-size: 30px;
}
.about__txt._primary {
max-width: 750px;
margin: 30px auto;
}
.about__ttl._point {
margin-top: 100px;
font-size: 30px;
}
.about__imgWrapper {
display: flex;
justify-content: space-between;
margin-top: 90px;
}
.about__imageArea {
border: 1px solid #7c7c7c;
border-radius: 10px;
width: calc((100% - 15px) / 2);
} .hanna__wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 50px;
}
.hanna__inner {
width: calc((100% - 50px) / 2);
}
.hanna__img {
margin-top: 10px;
margin-bottom: -10px;
}
.hanna__img a:hover {
opacity: 0.6;
transition: .7s;
}
.hanna__txt {
margin-top: 25px;
} .hanna-slideShow {
width: 100%;
margin: 50px auto 0;
display: flex;
align-items: center;
overflow: hidden;
}
.slide-wrapper {
display: flex;
animation: slide-flow 30s infinite linear 1s both;
}
.slide {
width: 500px;
object-fit: cover;
}
@keyframes slide-flow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media screen and (max-width:960px) {
.about__wrapper {
flex-direction: column;
margin-left: 0;
}
.about__wrapper._top {
margin-top: 0;
}
.about__box {
width: 100%;
}
.about__thumb {
width: 100%;
max-width: 480px;
}
.about__box+.about__thumb {
margin-left: 0;
margin-top: 30px;
}
.about__ttl._primary {
margin-top: 30px;
font-size: 22px;
}
.about__comment {
display: inline-block;
font-size: 12px;
}
.about__ttl._point {
margin-top: 60px;
font-size: 20px;
}
}
@media screen and (max-width:767px) {
.about__ttl {
font-size: 24px;
}
.about__ttl._primary {
font-size: 20px;
}
.about__ttl._top {
margin-top: 60px;
}
.about__mark,
.about__logo {
width: 200px;
}
.about__logo._top {
margin-top: 30px;
width: 130px;
}
.about__body {
color: #000;
border: 1px solid #5a656b;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
}
.about__imgWrapper {
flex-direction: column;
margin-left: 0;
margin-top: 60px;
}
.about__imageArea {
width: 100%;
}
.about__imageArea._primary {
display: none;
}
.hanna__wrapper {
flex-direction: column;
}
.hanna__inner {
width: 100%;
}
.hanna__inner+.hanna__inner {
margin-top: 30px;
}
.slide-wrapper {
display: flex;
animation: slide-flow 30s infinite linear 1s both;
}
.slide {
width: 350px;
object-fit: cover;
}
@keyframes slide-flow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
} .information__ttl,
.topBlog__ttl,
.faq__ttl {
font-size: 22px;
margin-top: 15px;
letter-spacing: 0.05em;
text-align: center;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
}
.topBlog__ttl {
margin-top: 70px;
}
.information__list {
margin-top: 30px;
border-top: 1px solid #7c7c7c;
}
.information__item {
display: flex;
padding: 15px 0 15px 5px;
border-bottom: 1px solid #7c7c7c;
flex-direction: column;
font-size: 16px;
}
.information__item .date {
display: inline-block;
margin-right: 20px;
}
time .date {
margin-right: 20px;
color: #55353b;
} .information .headingL._primary {
line-height: 1.6;
} .information__contents p {
margin-bottom: 1.5rem
}
.information__contents a {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
text-decoration: underline;
} .information__contents h2 {
font-size: 20px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
margin-left: 1rem;
position: relative;
margin-top: 50px;
margin-bottom: 10px;
}
.information__contents h2::before {
position: absolute;
content: '';
top: 5px;
left: -1rem;
background: #55353B;
width: 5px;
height: 30px;
}
.information__contents h3 {
font-size: 18px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
} .information__contents ul li {
margin-left: 1rem;
position: relative;
}
.information__contents ul li::before {
content: '･';
font-weight: 600;
font-size: 20px;
position: absolute;
top: -3px;
left: -1rem;
}
.information__contents ol {
list-style-type: decimal;
}
.information__contents ol li {
margin-left: 1.2rem;
} .pagination {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 60px;
}
a.page-numbers,
span.page-numbers {
font-size: 20px;
color: #55353B;
background-color: #fff;
border: 1px solid #55353B;
}
a.page-numbers,
span.page-numbers {
padding: 3px 12px 5px;
}
.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots {
background-color: transparent;
border: none;
}
span.page-numbers.current {
background-color: #55353B;
color: #fff;
}
.page-numbers.dots {
padding: 3px;
}
@media screen and (min-width: 768px) {
.information__ttl,
.topBlog__ttl,
.faq__ttl {
font-size: 34px;
letter-spacing: 0.07em;
}
.information__list {
max-width: 800px;
margin: 30px auto 0;
}
.information__item {
flex-direction: row;
font-size: 17px;
padding: 20px 0 20px 5px;
}
.topBlog .blog__list {
flex-wrap: nowrap;
width: 100%;
}
.topBlog .blog__card {
width: calc((100% - 10px) / 3);
} .information .headingL._primary {
margin: 0 auto 60px;
max-width: 800px;
}
.information__contents p {
font-size: 18px;
max-width: 800px;
margin: 0 auto 1.5rem;
}
.information__contents figure {
max-width: 600px;
margin: 50px auto;
}
a.page-numbers,
span.page-numbers {
font-size: 25px;
color: #55353B;
background-color: #fff;
border: 1px solid #55353B;
}
a.page-numbers,
span.page-numbers {
padding: 5px 17px;
}
} .blog__wrapper {
display: flex;
flex-direction: column;
}
.blog__preTxt {
margin-top: 30px;
}
.blog__list {
display: flex;
flex-direction: column;
margin-top: 30px;
}
.blog__card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
width: 100%;
}
.blog__link {
display: flex;
flex-direction: column;
}
.blog__card+.blog__card {
margin-top: 30px;
}
.blog__thumb img {
border-radius: 5px 5px 0 0;
aspect-ratio: 4 / 3;
object-fit: cover;
height: auto;
}
.blog__body {
padding: 20px 10px 30px 10px;
flex-grow: 1;
}
.blog__date {
font-size: 15px;
color: #573f42;
}
.post-categories {
display: inline-block;
font-size: 12px;
margin-left: 15px;
padding: 0 9px;
}
.post-categories.post-categories--all {
color: #fff;
background: #573f42;
border: 1px solid #573f42;
}
.post-categories.post-categories--kouso {
color: #fff;
background: #5c7937;
border: 1px solid #5c7937;
}
.post-categories.post-categories--pilates {
color: #fff;
background: #924a53;
border: 1px solid #924A53;
}
.blog__ttl {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
font-weight: 500;
margin-top: 5px;
}
.blog__menuWrapper {
margin-top: 50px;
}
.blog__menu+.blog__menu {
margin-top: 30px;
}
.blog__img {
margin-top: 30px;
}
.blog__img img {
aspect-ratio: 4 / 3;
object-fit: cover;
height: auto;
}
.blog__txt {
margin-top: 30px;
}
.date .blog__category {
font-size: 14px;
}
.blog__nav {
margin-top: 30px;
text-align: center;
}
.blog__nav a {
background: #55353B;
color: #fff;
padding: 10px 20px;
}
.blog__nav a+.blog__nav a {
margin-left: 20px;
}
.menu__ttl {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
font-weight: 500;
position: relative;
margin-left: 10px;
}
.menu__ttl::before {
content: "";
position: absolute;
display: block;
top: 7px;
left: -10px;
width: 3px;
height: 20px;
background: #55353b;
}
.menu__item {
padding: 10px;
border-bottom: #7c7c7c 1px solid;
} .blog__inner time {
color: #55353b;
} .blog__contents h2 {
font-size: 20px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
margin-left: 1rem;
position: relative;
margin-top: 50px;
margin-bottom: 10px;
}
.blog__contents h2::before {
position: absolute;
content: '';
top: 5px;
left: -1rem;
background: #55353B;
width: 5px;
height: 30px;
}
.blog__contents h3 {
font-size: 18px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
} .blog__contents p {
margin-bottom: 1.5rem;
}
.blog__contents a {
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
text-decoration: underline;
} .blog__contents ul li {
margin-left: 1rem;
position: relative;
}
.blog__contents ul li::before {
content: '･';
font-weight: 600;
font-size: 20px;
position: absolute;
top: -3px;
left: -1rem;
}
.blog__contents ol {
list-style-type: decimal;
}
.blog__contents ol li {
margin-left: 1.2rem;
} .topBlog .blog__list {
flex-direction: row;
overflow-x: auto;
}
.topBlog .blog__card {
flex-shrink: 0;
margin: 7px 7px 10px 5px;
}
.topBlog .blog__card+.blog__card {
margin-top: 7px;
margin-left: 10px;
}
@media screen and (min-width: 768px) {
.blog__wrapper {
flex-direction: row;
justify-content: space-between;
}
.blog__list {
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.blog__card {
width: calc((100% - 10px) / 2);
}
.blog__card:nth-child(2) {
margin-top: 0;
}
.blog__menuWrapper {
width: 40%;
margin-top: 30px;
margin-left: 30px;
}
.blog__menu+.blog__menu {
margin-top: 50px;
}
.blog__inner {
width: 60%;
} .blog__contents h1 {
font-size: 30px;
}
.blog__contents h2 {
font-size: 25px;
}
.blog__contents h2::before {
top: 8px;
left: -1.2rem;
background: #55353B;
width: 5px;
height: 37px;
}
}
@media screen and (min-width: 960px) {
.blog__body {
padding: 20px 15px 30px 15px;
}
.blog__menuWrapper {
margin-left: 70px;
}
} .access__wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.access__map {
width: 100%;
position: relative;
padding-top: 56.25%;
margin-top: 30px;
}
.access__map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.access__ttl {
font-size: 16px;
margin-top: 15px;
}
.access__bus {
display: flex;
}
.access__linkTxt {
display: inline-block;
color: #000;
}
.access__catch {
font-size: 18px;
text-align: center;
margin-top: 50px;
}
.access__catch+.access__wrapper {
margin-top: 20px;
}
.access__inner {
text-align: left;
}
.access__inner+.access__img {
margin-top: 20px;
}
.access__listItem {
display: flex;
}
.access__listItem+.access__linkList {
margin-top: 10px;
}
.access__linkList {
margin-top: 15px;
}
.access__item+.access__item {
margin-top: 10px;
}
.access__item,
.access__routeTtl {
padding: 5px;
background: #f7d9d9;
}
.access__item._blue,
.access__routeTtl._blue {
background: #d5e9f0;
}
.access__item i,
.access__routeTtl i {
color: #fff;
margin-right: 7px;
}
.access__link {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
@media screen and (min-width: 768px) {
.access {
padding-bottom: 30px;
}
.access__wrapper {
flex-direction: row;
}
.access__map {
padding-top: 35%;
width: 50%;
}
.access__inner {
width: 50%;
}
.access__ttl {
font-size: 18px;
}
.access__map+.access__inner {
margin-left: 50px;
}
.access__txt {
margin-top: 10px;
}
.access__img {
width: 50%;
}
.access__inner+.access__img {
margin-left: 30px;
}
.access__linkList {
display: none;
}
.access__catch {
font-size: 28px;
margin-top: 100px;
}
} .faq__list {
margin-top: 30px;
}
.faq__item {
padding: 15px 0;
border-bottom: 1px solid #7c7c7c;
}
.faq__button {
display: flex;
justify-content: space-between;
align-items: flex-start;
cursor: pointer;
font-weight: 500;
width: 100%;
border: none;
transition: all .5s ease;
}
.faq__button i {
margin-top: 7px;
color: #573f42;
}
.faq__button.close i {
transform: rotate(180deg);
}
.faq__txt {
position: relative;
margin-left: 30px;
margin-right: 20px;
font-size: 16px;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
}
.faq__txt::before {
content: 'Q.';
position: absolute;
font-style: oblique;
font-size: 18px;
top: -1px;
left: -30px;
}
.box {
display: none;
}
.faq__inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20px;
margin-bottom: 10px;
}
.faq__answer {
position: relative;
font-size: 16px;
margin-left: 30px;
margin-right: 20px;
color: #555;
}
.faq__answer::before {
content: 'A.';
position: absolute;
font-style: oblique;
font-size: 18px;
color: #924A53;
font-family: "Playfair_Display", "Shippori_Mincho_B1_Medium", serif;
top: -1px;
left: -30px;
}
@media screen and (min-width: 768px) {
.faq__txt {
font-size: 18px;
}
.faq__answer {
font-size: 17px;
margin-right: 50px;
}
.faq__question {
padding: 15px 25px;
}
.faq__button {
padding: 7px 20px;
}
.faq__button i {
margin-top: 9px;
}
.box {
padding: 0px 30px 20px 50px;
}
} .modal {
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
margin: 45% auto;
width: 80%;
position: relative;
}
.modal-content p br {
display: none;
}
.modal-content .btn {
font-size: 19px;
}
.modal-content .centerBtn {
margin-top: 30px;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.modal-content {
margin: 20vh auto;
width: 60%;
}
}
@media screen and (min-width: 960px) {
.modal-content {
margin: 10vh auto;
width: 35%;
}
}
.close-button {
color: #fff;
float: right;
font-size: 30px;
font-weight: bold;
margin-top: -20px;
position: absolute;
top: 10px;
right: 10px;
}
.close-button:hover,
.close-button:focus {
color: #7c7c7c;
text-decoration: none;
cursor: pointer;
}