@charset "UTF-8";
div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption {
margin: 0;
padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
q:before ,q:after {
content: '';
}
object, embed {
vertical-align: top;
}
hr, legend {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
img, abbr, acronym, fieldset {
border: 0;
}
img {
vertical-align: bottom;
-ms-interpolation-mode: bicubic;
}
img{
max-width: 100%;
height: auto;
width :auto;　
}
img{
-webkit-backface-visibility: hidden;
}
ul li {
list-style-type: none;
} html, body {
margin: 0px;
padding: 0px;
height: 100%;
text-align: center;
}
body {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
color: #333;
font-size: 18px;
}
textarea {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
font-size: 15px;
}
p {
line-height: 1.4em;
} a {
outline: none;
color: #359DFF;
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)";
text-decoration: none;
color: #ccc;
}
a:active {
text-decoration: none;
}
strong {
font-size: 1.2em;
color: #9A0002;
}
.clearfix:after {
content: "";
clear: both;
display: block;
} input[type="submit"] {
-webkit-appearance: none;
}

#wrapper {
background: #F4E5D7;
}
.mobile {
display: none !important;
}
.navigation { z-index: 999;
background-color: #F4E5D7;
position: relative;
padding-top: 50px;
}
.nav-container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.nav-container .logo_pc {
width: 120px;
margin-bottom: 20px;
}
.nav-container nav {
margin: 0 auto;
}
.nav-container nav ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 999;
}
.nav-container nav ul li {
display: inline-block;
position: relative;
} .nav-container nav ul li:last-of-type:after {
content: none;
}
.nav-container nav ul li a,
.nav-container nav ul li a:visited {
display: block;
padding: 0 15px; color: #000;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
.nav-container nav ul li a:hover,
.nav-container nav ul li a:visited:hover {
background: #009B73;
color: #ffffff;
} .nav-container nav ul li ul {
background: #FFF;
}
.nav-container nav ul li ul li {
min-width: 300px;
}
.nav-container nav ul li ul li:after {
content: none;
}
.nav-container nav ul li ul li a {
padding: 10px 20px;
line-height: 15px;
text-align: left;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
} .nav-mobile {
display: none;
position: fixed;
top: 20px;
right: 20px;
background: #027D4A;
height: 70px;
width: 70px;
border-radius: 5px;
} .mainimage {
width: 100%;
z-index: 997;
}
.mainimage img {
width: 100%;
}
.triangle {
display: block;
width: 100%;
height: 118px;
background-color: #F4E5D7;
transform: skewY(4deg);
margin-top: -55px;
}
.triangle>* {
transform: skewY(-4deg);
}
#top-contents {
padding: 70px 0;
}
#topbox {
position: relative;
z-index: 998;
}
#topbox h1 {
position: absolute;
width: 120px;
top: 20px;
left: 5%;
}
#topbox p {
position: absolute;
width: 170px;
top: 25px;
right: 5%;
background: #FFF;
border-radius: 5px;
padding: 3px 5px;
}
#topbox p a {
color: #000;
font-size: 14px;
}
#topbox p img {
width: 25px;
margin-right: 10px;
vertical-align: middle;
}
.banner {
width: 1200px;
margin: 0 auto;
padding-bottom: 30px;
}
.top-section {
width: 1000px;
margin: 0 auto;
padding: 60px 0;
text-align: left;
}
.top-section h2 {
font-size: 34px;
font-weight: 900;
padding: 7px 12px;
border-radius: 30px;
background: #FFF;
color: #027D4A;
position: relative;
display: inline-block;
min-width: 180px;
text-align: center;
margin-bottom: 30px;
}
.top-section h2:before {
content: "";
display: block;
position: absolute;
width: 1000px;
border-top: 6px solid #FFF;
left: -999px;
top: 24px;
}
#topnews {
width: 90%;
margin: 0 auto;
}
#topnews dl {
width: 445px;
margin: 0 auto;
padding: 20px 0;
display: inline-block;
vertical-align: top;
}
#topnews dl dt {
width: 100px;
display: inline-block;
vertical-align: top;
}
#topnews dl dt img {
width: 100px;
height: 100px;
display: block;
border-radius: 50%;
}
#topnews dl dd {
width: 320px;
display: inline-block;
vertical-align: top;
padding-left: 20px;
}
#topnews dl a dd {
color: #000;
line-height: 1.3em;
}
#topnews dl a dd time {
color: #135909;
font-size: 14px;
display: block;
padding: 30px 0 3px;
}
#topnews p {
text-align: right;
padding: 20px 0 30px;
}
#topnews p a {
color: #000;
font-size: 16px;
}
#topnews p a i {
display: inline-block;
margin-right: 6px;
}
.taiken-banner {
text-align: center;
}
.youtube {
width: 50%;
aspect-ratio: 16 / 9;
margin: 60px auto 0;
}
.youtube iframe {
width: 100%;
height: 100%;
}
#socialbox {
padding-bottom: 50px;
text-align: center;
}
.oneday #socialbox {
padding-top: 50px;
}
#socialbox li {
display: inline-block;
width: 70px;
margin: 0 15px;
} #socialbox i {
font-size: 70px;
}
#linkbox {
padding-top: 60px;
text-align: center;
}
#linkbox li {
display: inline-block;
width: 45%;
margin: 0 2% 20px;
} #f_space {
clear: both;
position: relative;
}
footer {
clear: both;
height: auto;
width: 100%;
position: relative;
}
footer figure {
width: 100%;
}
#copyright {
text-align: center;
font-size: 10px;
clear: both;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 40px 0 40px;
}
#infooter {
width: 95%;
margin-right: auto;
margin-left: auto;
padding-top: 30px;
font-size: 16px;
text-align: center;
}
.box-footer {
display: inline-block;
text-align: left;
vertical-align: top;
}
.footsitemap {
padding-left: 40px;
}
.box-footer #discription {
font-size: 85%;
width: 230px;
padding-top: 20px;
}
.box-footer dl {
font-size: 85%;
float: left;
padding-left: 15px;
margin-right: 20px;
padding-top: 7px;
}
.box-footer dl a {
color: #333;
}
.box-footer dl dt {
padding-top: 8px;
}
.box-footer dl dd {
padding-left: 12px;
width: auto;
}
.box-footer #footright {
margin-top: -40px;
padding-left: 50px;
}
.box-footer #footright dt {
text-align: center;
}
.box-footer #footright dd {
padding-top: 20px;
} @media only screen and (max-width: 798px) {
.desk {
display: none !important;
}
.mobile {
display: block !important;
}
#wrapper {
overflow-x: hidden;
}
#topbox h1 {
position: fixed;
width: 120px;
top: auto;
left: auto;
right: 20px;
bottom: 130px;
}
#topbox p {
display: none;
} #toppage {
position: relative;
}
#toppage h1 {
width: 100px;
position: absolute;
top: 20px;
left: 20px;
z-index: 998;
}
.mainimage img {
height: 100vh;
object-fit: cover;
}
.triangle {
transform: skewY(-4deg);
}
.triangle>* {
transform: skewY(4deg);
}
.nav-mobile {
display: block;
z-index: 999;
}
.navigation {
height: 100%;
max-height: 100vh;
top: 0px;
position: fixed;
background: #FFF;
padding-top: 0;
overflow-y: scroll;
}
.nav-container nav {
width: 100%;
padding: 30px 0 15px;
max-width: 100%;
}
.nav-container nav ul {
display: none;
}
.nav-container nav ul li {
float: none;
width: 100%;
text-align: left;
}
.nav-container nav ul li a {
padding: 15px;
line-height: 20px;
}
.nav-container nav ul li a br {
display: none;
}
.nav-container nav ul li ul li {
min-width: 100%;
}
.nav-container nav ul li ul li a {
padding: 15px 0 15px 30px;
border-bottom: 1px dashed #999;
}
.nav-dropdown {
position: static;
}
.nav-container nav ul li:after {
display: none;
}
#top-contents {
padding: 0px 0;
position: relative;
z-index: 998;
margin-top: -40px;
margin-top: 60px;
}
.banner {
width: 100%;
margin: 0 auto;
padding-bottom: 0px;
z-index: 998;
}
.top-section {
width: 100%;
padding: 60px 0;
}
.top-section h2 {
font-size: 30px;
font-weight: 800;
padding: 4px 10px;
display: table;
margin: 0 auto 30px;
}
.top-section h2:before {
border-top: 4px solid #FFF;
}
.top-section h2:after {
content: "";
display: block;
position: absolute;
width: 1000px;
border-top: 4px solid #FFF;
right: -999px;
top: 24px;
}
#topnews {
width: 80%;
}
#topnews dl {
width: 100%;
}
#topnews dl dt,
#topnews dl dt img {
width: 60px;
height: 60px;
}
#topnews dl dd {
width: 68%;
padding-left: 5%;
}
#topnews dl a dd time {
padding: 10px 0 3px;
}
#topnews p {
text-align: center;
padding: 20px 0 0;
}
.taiken-banner {
width: 85%;
margin: -30px auto;
}
.youtube {
width: 90%;
}
#socialbox {
width: 65%;
margin: 0 auto;
padding: 0 0 40px;
}
#socialbox li {
width: 21%;
margin: 0 2% 5%;
}
#socialbox i {
font-size: 50px;
} #linkbox {
padding-top: 0px;
}
#linkbox li {
width: 80%;
margin: 0 auto 20px;
}
#infooter {
width: 100%;
margin: 0;
padding-top: 10px;
}
.box-footer {
display: none;
}
#copyright {
font-size: 9px;
padding: 10px 0;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}  .cmn1000 {
width: 90%;
max-width: 1000px;
margin: auto;
}
.cmn1200 {
width: 90%;
max-width: 1200px;
margin: auto;
}
.pc_none {
display: none !important;
}
@media only screen and (max-width: 798px) {
.pc_none {
display: block !important;
}
}
.sp_none {
display: block !important;
}
@media only screen and (max-width: 798px) {
.sp_none {
display: none !important;
}
}
@media (min-width: 798.1px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
#link-english {
position: fixed;
top: 20px;
right: 20px;
}
#link-english a {
font-size: 14px;
color: #131313;
}
.low_mv {
width: 100%;
padding-top: 36.25%; position: relative;
}
.trial_mv {
background: url(/img/2022new/trial/trial_main.jpg) no-repeat center center/cover;
}
.basic_mv {
background: url(/img/2022new/basic/basic_mv.jpg) no-repeat center center/cover;
}
.oneday_mv {
background: url(/img/2022new/oneday/oneday_mv.jpg) no-repeat center center/cover;
}
.beginner_mv {
background: url(/img/2022new/beginner/beginner_mv.jpg) no-repeat center center/cover;
}
.low_mv h1 {
width: 100px;
position: absolute;
top: 20px;
left: 20px;
}
.sec-title-wrap {
width: 100%; text-align: left;
}
.sec-title {
font-size: clamp(25px, 34 / 1920 * 100vw, 34px);
font-weight: 900;
padding: 7px 50px;
border-radius: 30px;
background: #FFF;
color: #027D4A;
position: relative;
display: inline-block;
min-width: 180px;
text-align: center; }
.sec-title:before {
content: "";
display: block;
position: absolute;
width: 1000px;
border-top: 6px solid #FFF;
left: -999px;
top: 24px;
}
.sec-title-white {
color: #fff;
background: #027D4A;
}
.sec-title-white:before {
border-top: 6px solid #027D4A;
}
.video {
width: 70%; margin: auto;
}
.iframe_wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.iframe_wrap iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.cta {
background: #F4E5D7;
}
.cta_inner {
width: 100%;
max-width: 1200px;
margin: auto;
padding: 5% 15px;
text-align: center;
box-sizing: border-box;
}
.cta_lead {
font-size: 20px;
}
.cta_search {
margin-top: 35px;
}
.cta_search a {
width: 100%;
max-width: 520px;
margin: auto;
display: block;
}
.cta_search img {
width: 80%;
}
.cta_tel_wrap {
margin-top: 6%;
}
.cta_tel {
margin-top: 30px;
margin-left: 150px;
display: inline-block;
position: relative;
}
.cta_tel_lead {
font-size: clamp(18px, 26 / 1920 * 100vw, 26px);
font-weight: 700;
}
.cta_tel_num {
font-size: clamp(40px, 60 / 1920 * 100vw, 60px);
position: relative;
color: #333;
}
.cta_tel_num:before {
content: "";
width: 1em;
height: 1em;
display: block;
background: url(/img/2022new/basic/icon_tel01.png) no-repeat center center/cover;
position: absolute;
top: 3%;
left: -20%;
z-index: 1;
}
.cta_tel_text {
font-size: clamp(18px, 29 / 1920 * 100vw, 29px);
color: #333;
}
.cta_tel_text_sp {
display: none;
}
.swiper_low {
overflow: hidden;
}
.swiper_low img {
border-radius: 20px;
}
#contents .swiper-pagination {
margin-top: 15px;
position: static;
}
#contents .swiper-pagination span {
width: 15px;
height: 15px;
margin: 0 7px !important;
}
@media only screen and (max-width: 798px) {
.nav-container nav {
padding: 0 0 15px;
}
.nav-container nav li h1 {
width: 130px;
}
.nav-mobile {
height: 50px;
width: 50px;
}
#nav-toggle {
left: 10px;
top: 13px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
height: 3px;
width: 30px;
}
.oneday_mv {
background: url(/img/2022new/oneday/oneday_mv@sp.jpg) no-repeat center center/cover;
}
.sec-title-wrap { transform: translateY(-1em);
}
.sec-title {
width: fit-content; font-size: 20px;
font-weight: 800;
padding: 4px 20px;
display: table;
margin: 0 auto 30px;
}
.sec-title:before {
border-top: 6px solid #027D4A;
top: 50%;
transform: translateY(-50%);
}
.sec-title:after {
content: "";
display: block;
position: absolute;
width: 1000px;
border-top: 6px solid #027D4A;
right: -999px;
top: 50%;
transform: translateY(-50%);
}
.basic_top .sec-title:before,
.basic_top .sec-title:after {
border-top: 6px solid #fff;
}
.cta_inner {
width: 80%;
padding: 15% 0;
}
.cta_lead {
font-size: 14px;
}
.cta_tel {
margin-left: 0;
margin-top: 0; }
.cta_tel_lead {
font-size: 14px;
}
.cta_search {
margin-top: 10px;
}
.cta_tel_wrap {
margin-top: 30px;
}
.cta_tel_text {
font-size: 16px;
margin-top: 10px;
}
.cta_tel_num {
font-size: 30px;
margin-top: 5px;
}
.cta_tel_num:before {
background: url(/img/2022new/basic/icon_tel02.png) no-repeat center center/cover;
top: 0px;
left: -23%;
}
.cta_tel_text_pc {
display: none;
}
.cta_tel_text_sp {
display: block;
} #contents .swiper-pagination span {
width: 10px;
height: 10px;
margin: 0 5px !important;
}
}  .trial_top {
margin-top: 7%;
padding-top: 7%;
background: #F4E5D7;
}
.trial_top .text {
width: 80%; margin: 7% auto 0;
text-align: left;
line-height: 1.773;
}
.trial_top .media_item {
width: 90%;
max-width: 1550px;
margin: 10% auto 10%;
display: flex;
justify-content: space-between;
}
.trial_top .media_left {
width: 40%;
margin-right: 6%;
}
.trial_top .media_right {
width: 54%;
}
.trial_top .media_text {
text-align: left;
line-height: 1.731;
letter-spacing: 0.11em;
}
.trial_top .media_btn {
width: 80%;
margin: 19% auto 0;
}
.trial_top .media_btn {
margin-top: 5%;
}
.trial_top .media_btn p { font-weight: 700;
}
.trial_top .media_btn a {
color: #fff; font-size: 20px;
margin-top: 5px;
padding: 10px;
display: block;
text-align: center;
border-radius: 50px;
background-color: #ECAFB3;
}
.trial-flow {
margin: 60px auto;
padding: 30px 20px;
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px 20px;
background-color: #fff;
border: 4px solid #F9E3DE;
border-radius: 20px;
}
.trial-flow dt {
font-size: 14px;
letter-spacing: 0.03em;
color: #ECAFB3;
font-weight: normal;
display: flex;
align-items: center;
justify-content: flex-start;
}
.trial-flow dd {
font-size: 16px;
font-weight: bold;
color: #000;
margin: 0;
display: flex;
align-items: center;
}
.trial-btn__list {
width: 80%;
margin: 10% auto 0;
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.trial-btn__item {
width: 300px;
max-width: 100%;
}
.trial-btn__item a {
display: block;
text-align: center;
padding: 12px 20px;
font-size: 20px;
color: #fff;
background-color: #ECAFB3;
border-radius: 50px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.trial-flow {
grid-template-columns: 1fr;
text-align: left;
gap: 0;
}
.trial-flow dt {
padding-bottom: 4px;
font-size: 12px;
}
.trial-flow dd {
padding-bottom: 16px;
font-size: 14px;
}
.trial-flow dd:last-child {
padding-bottom: 0;
}
.trial-btn__list {
width: 80%;
flex-direction: column;
align-items: center;
gap: 20px;
}
.trial-btn__item {
width: 100%;
}
.trial-btn__item a {
font-size: 16px;
padding: 8px;
}
}  .basic_top {
margin-top: 10%;
}
.basic_top .text {
width: 80%; margin: 7% auto 0;
text-align: left;
line-height: 1.773;
}
.basic .card_list {
width: 100%; margin: 9% auto 0;
display: flex;
justify-content: space-between;
}
.basic .card_item {
width: calc((100% - 100px) / 2);
background-color: #fff;
border-radius: 42px;
box-sizing: border-box;
}
.basic .card_inner {
padding: 20px 7.5% 40px;
}
.basic .card_title {
color: #027D4A;
font-size: clamp(25px, 30 / 1920 * 100vw, 30px);
font-weight: 700;
margin-top: 30px;
}
.basic .card_img {
width: 76%;
margin: 30px auto 0;
}
.basic .card_text { margin-top: 16%;
text-align: left;
line-height: 1.5;
min-height: 200px;
}
.basic .card_btn {
margin-top: 8%;
}
.basic .card_btn a { color: #027D4A;
width: 80%;
margin: auto;
padding: 5px;
display: block;
border: 2px solid #027D4A;
border-radius: 50px;
position: relative;
}
.basic .card_btn a span {
position: relative;
}
.basic .card_btn a span:before {
content: "";
width: 1.2em;
height: 1.2em;
display: block;
background: url(/img/2022new/basic/icon_arrow01.png) no-repeat center center/cover;
position: absolute;
top: 50%;
left: -40%;
transform: translateY(-50%);
z-index: 1;
} .basic_flower {
margin-top: 7%;
padding-top: 7%;
background: #fff;
}
.basic_flower .media_item {
width: 90%;
max-width: 1550px;
margin: 10% auto 10%;
display: flex;
justify-content: space-between;
}
.basic_flower .media_left {
width: 40%;
margin-right: 6%;
}
.basic_flower .media_right {
width: 54%;
}
.basic_flower .media_text {
text-align: left;
line-height: 1.731;
letter-spacing: 0.11em;
}
.basic_flower .media_btn {
width: 80%;
margin: 19% auto 0;
}
.basic_kubari.basic_flower .media_btn {
margin-top: 5%;
}
.basic_flower .media_btn p { font-weight: 700;
}
.basic_flower .media_btn a {
color: #fff; font-size: 20px;
margin-top: 5px;
padding: 10px;
display: block;
text-align: center;
border-radius: 50px;
background-color: #ECAFB3;
}
.flow { margin: 13% auto 0;
}
.flow_item {
display: flex;
border: 10px solid #F9E4DE;
border-radius: 29px;
position: relative;
}
.flow_item:nth-of-type(4) {
border: 10px solid #EAC6AC;
}
.flow_item:nth-of-type(4) .flow_btn {
margin: auto auto 0;
}
.flow_item:nth-of-type(5) {
border: 10px solid #E28E54;
}
.flow_item:nth-of-type(n + 4) .flow_right {
display: flex;
justify-content: center;
align-items: center;
}
.flow_item:nth-of-type(n + 4) .flow_img {
height: 90%;
}
.flow_item:not(:first-of-type) { margin-top: 17%;
}
.flow_item:not(:last-of-type):before {
content: "";
border-top: 40px solid #F9E4DE;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
position: absolute;
bottom: -75px;
left: 50%;
transform: translateX(-50%);
}
.flow_item:not(:last-of-type):after {
content: "";
border-top: 40px solid #F9E4DE;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
position: absolute;
bottom: -140px;
left: 50%;
transform: translateX(-50%);
}
.flow_item:nth-of-type(4):before,
.flow_item:nth-of-type(4):after {
border-top: 40px solid #EAC6AC;
}
.flow_left {
width: 70%;
text-align: left;
}
.flow_left_wrap {
height: 100%;
padding: 32px 56px 30px 37px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.flow_right {
width: 30%;
}
.flow_title {
font-size: clamp(20px, 30 / 1920 * 100vw, 30px);
text-align: left;
display: inline-block;
position: relative;
z-index: 1;
}
.flow_title span {
position: relative;
font-weight: 700;
}
.flow_title span:before {
content: "";
width: 120%;
height: 50%;
display: block;
background-color: yellow;
border-radius: 50px;
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
z-index: -1;
}
.flow_item:nth-of-type(1) .flow_title span:before {
background-color: #f9e3dc;
}
.flow_item:nth-of-type(2) .flow_title span:before {
background-color: #f7e4e0;
}
.flow_item:nth-of-type(3) .flow_title span:before {
background-color: #f8e4dd;
}
.flow_item:nth-of-type(4) .flow_title span:before {
background-color: #ebc6ac;
}
.flow_item:nth-of-type(5) .flow_title span:before {
background-color: #e38e55;
}
.flow_text { margin-top: 5%;
margin-bottom: 7%;
text-align: left;
line-height: 1.731;
}
.flow_btn {
margin-top: auto;
}
.flow_btn a { color: #027D4A;
width: 50%;
max-width: 430px;
min-width: 290px;
margin-left: auto;
padding: 5px;
display: block;
border: 2px solid #027D4A;
border-radius: 50px;
text-align: center;
position: relative;
}
.flow_btn a span {
margin-left: 30px;
position: relative;
}
.flow_btn a span:before {
content: ""; width: 0.7em;
height: 1.2em;
display: block;
background: url(/img/2022new/basic/icon_arrow02.png) no-repeat center center/cover;
position: absolute;
top: 50%;
left: -40px;
transform: translateY(-50%);
z-index: 1;
}
.flow_img {
height: 100%;
}
.flow_img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 18px 18px 0;
}
.basic_flower_btn {
margin-top: 7%; padding-bottom: 7.7%;
}
.basic_flower_btn a { font-size: 20px;
color: #027D4A;
width: 47%;
max-width: 831px;
margin: auto;
padding: 5px;
display: block;
border: 2px solid #027D4A;
border-radius: 50px;
position: relative;
}
.basic_flower_btn a span {
margin-left: 8%;
position: relative;
}
.basic_flower_btn a span:before {
content: "";
width: 1.2em;
height: 1.2em;
display: block;
background: url(/img/2022new/basic/icon_arrow01.png) no-repeat center center/cover;
position: absolute;
top: 50%;
left: -17%;
transform: translateY(-50%);
z-index: 1;
}
.banner_list {
width: 90%;
margin: auto;
padding-bottom: 15%;
} .banner_list_sp {
display: none;
}
#basic_kubari {
margin-top: 0;
} @media only screen and (max-width: 798px) {
.basic_top {
margin-top: 0;
}
.basic_top .text {
width: 90%;
font-size: 14px;
margin-top: 40px;
}
.basic .card_list {
margin-top: 50px;
display: block;
}
.basic .card_item {
width: 100%;
border: 5px solid #DBCEC6;
border-radius: 16px;
}
.basic .card_item:not(:first-of-type) {
margin-top: 40px;
}
.basic .card_title {
font-size: 20px;
margin-top: 0;
padding: 10px 0;
background-color: #DBCEC6;
border-radius: 9px 9px 0 0;
}
.basic .card_inner {
padding: 20px 2% 20px;
display: flex;
justify-content: space-between;
}
.basic .card_img {
width: 40%;
margin-top: 0;
}
.basic .card_text {
color: #333;
font-size: 12px;
width: 55%;
min-height: initial;
margin-top: 0;
letter-spacing: 0.12em;
}
.basic_flower {
margin-top: 60px;
padding-top: 0;
}
.basic_flower .media_item {
margin-top: 40px;
margin-bottom: 43px;
flex-direction: column-reverse;
}
.basic_flower .media_left {
width: 100%;
margin-top: 38px;
}
.basic_flower .media_right {
width: 100%;
}
.basic_flower .media_text {
font-size: 13px;
}
.basic_flower .media_btn p {
font-size: 14px;
}
.basic_flower .media_btn a {
font-size: 16px;
padding: 8px;
}
.video {
width: 90%;
}
.flow {
margin-top: 60px;
}
.flow_item {
flex-direction: column;
border: none;
}
.flow_item:nth-of-type(4) {
border: none;
}
.flow_item:nth-of-type(5) {
border: none;
}
.flow_item:not(:first-of-type) {
margin-top: 140px;
}
.flow_item:not(:last-of-type):before {
content: "";
border-top: 30px solid #fff;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
bottom: -61px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.flow_item:not(:last-of-type):after {
content: "";
border-top: 30px solid #F9E4DE;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.flow_left_wrap {
padding: 0 15px;
}
.flow_left {
width: 100%;
}
.flow_right {
width: 100%;
}
.flow_title {
text-align: center;
}
.flow_title span:before {
width: 140%;
height: 60%;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
}
.flow_text {
font-size: 13px;
margin-bottom: 20px;
}
.flow_img {
width: 56.3%;
margin: auto;
}
.flow .flow_item .flow_btn {
margin-top: 30px;
}
.flow_btn a {
font-size: 14px;
width: 60%;
max-width: 300px;
min-width: unset;
margin: auto;
padding: 5px 20px;
}
.flow_btn a span:before {
left: -30px;
}
.flow_btn.pc_none {
position: relative;
}
.flow_item:not(:last-of-type) .flow_btn.pc_none:before {
content: "";
width: 150%;
height: 6px;
background-color: #F9E4DE;
display: block;
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.flow_item:nth-of-type(4) .flow_btn {
margin: 30px 0 0 0;
}
.basic_flower_btn {
margin-top: 14%;
padding-bottom: 14%;
}
.basic_flower_btn a {
font-size: 12px;
width: 85%;
}
.banner_list_sp {
display: flex;
}
.basic_kubari.basic_flower .media_btn {
margin: 19% auto 0;
}
} .oneday_top {
margin-top: 10%;
}
.oneday_top .text {
width: 80%;
font-size: clamp(16px, 18 / 1920 * 100vw, 18px); margin: 7% auto 0;
text-align: left;
line-height: 1.773;
}
.oneday .card_list {
width: 100%; margin: 16% auto;
display: flex;
}
.oneday .card_list:nth-of-type(3),
.oneday .card_list:nth-of-type(5) {
justify-content: center;
}
.oneday .card_item {
display: flex;
width: calc((100% - 100px) / 2); }
.oneday .card_item a {
display: contents;
color: #333;
}
.oneday .card_item a .card_content {
transition: 0.3s;
opacity: 1;
}
.oneday .card_item a .card_content:hover {
opacity: 0.8;
transition: 0.3s;
}
.oneday .card_item:nth-of-type(2) {
margin-left: 100px;
}
.oneday .card_content {
width: 100%; position: relative;
}
.oneday .card_img {
width: 63%; position: absolute;
left: -34%;
bottom: 0;
z-index: 1;
}
.oneday .card_img img {
width: 100%;
}
.oneday .card_content_lead {
font-size: clamp(12px, 16 / 1920 * 100vw, 16px);
margin-bottom: 10px;
text-align: right;
}
.oneday .card_content_box { width: 76.5%; border-radius: 53px;
margin-left: auto;
position: relative;
}
.oneday .card_content_top {
height: 100px;
background-color: #fff;
border-radius: 0 46px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.oneday .card_content_lesson {
font-size: clamp(20px, 28 / 1920 * 100vw, 28px);
font-weight: 700;
}
.oneday .card_item01 .card_content_lesson {
margin-left: 25%;
font-size: clamp(25px, 35 / 1920 * 100vw, 35px);
}
.oneday .card_item01 .card_content_position {
margin-left: 5%;
}
.oneday .card_item02 .card_content_lesson {
margin-left: 5%;
}
.oneday .card_item02 .card_content_lesson span:nth-of-type(2) {
margin-left: 5em;
}
.oneday .card_item03 .card_content_lesson {
margin-left: 10%;
}
.oneday .card_item03 .card_content_lesson span:nth-of-type(1) {
font-size: clamp(16px, 20 / 1920 * 100vw, 20px);
}
.oneday .card_item03 .card_content_lesson span:nth-of-type(2) {
margin-left: 5em;
}
.oneday .card_item03 .card_content_position {
font-size: clamp(10px, 16 / 1920 * 100vw, 16px);
margin-left: 23%;
}
.oneday .card_item03 .card_content_name {
margin-left: 26%;
}
.oneday .card_item03 .card_content_name span:nth-of-type(1) {
font-size: clamp(10px, 16 / 1920 * 100vw, 16px);
font-weight: 500;
margin-right: 10px;
transform: translateY(-10%);
display: inline-block;
}
.oneday .card_item04 .card_content_lesson span:nth-of-type(2) {
margin-left: 3em;
}
.oneday .card_item04 .card_content_lesson {
margin-left: 10%;
}
.oneday .card_item05 .card_content_lesson {
margin-left: 15%;
}
.oneday .card_item05 .card_content_lesson span:nth-of-type(2) {
margin-left: 6em;
}
.oneday .card_item06 .card_content_lesson {
margin-left: 25%;
}
.oneday .card_item06_sp .card_content_lesson_sp {
font-size: 16px;
}
.oneday .card_content_bottom {
height: 80px;
background-color: #027D4A;
border-radius: 0 0 46px 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.oneday .card_content_bottom p {
color: #fff;
}
.oneday .card_content_position {
font-size: clamp(14px, 18 / 1920 * 100vw, 18px);
}
.oneday .card_content_name {
font-size: clamp(14px, 23 / 1920 * 100vw, 23px);
font-weight: 700;
margin-left: 30%;
}
.oneday_lecturer {
width: 90%; margin: auto;
padding-top: 10%;
position: relative;
}
.oneday_lecturer:last-of-type {
margin-bottom: 8%;
}
.oneday_title {
color: #fff;
font-size: clamp(18px, 34 / 1920 * 100vw, 34px);
font-weight: 700;
width: 35%; padding: 1%;
background-color: #027D4A;
border-radius: 45px 0 45px 45px;
position: absolute;
top: -2.5%;
left: -3%;
z-index: 1;
}
.box {  padding: 8% 8% 4%;
background-color: #fff;
border-radius: 0 73px 73px 73px;
position: relative;
}
.zoom {
font-size: clamp(16px, 22 / 1920 * 100vw, 22px);
font-weight: 700;
position: absolute;
top: 2.8%;
left: 11%;
z-index: 1;
}
.box_media {
display: flex;
}
.box_img {
width: 30%;
}
.box_img img {
width: 100%;
}
.box_youtube {
width: 70%;
margin-left: 3px;
}
.box_youtube iframe {
width: 100%;
height: 100%;
}
.box_content {
margin-top: 13%;
display: flex;
}
.box_person {
width: 25%;
margin-right: 11%;
text-align: center;
}
.box_person_img {
position: relative;
}
.box_person_img img:nth-of-type(2) {
width: 170px;
position: absolute;
bottom: 0;
left: -30px;
z-index: 1;
}
.box_person_info {
margin-top: 27%;
}
.box_person_name {
font-size: 20px;
font-weight: 700;
}
.box_person_btn {
margin-top: 7%;
margin-left: 12%;
}
.box_person_btn a {
color: #027D4A;
font-size: clamp(16px, 20 / 1920 * 100vw, 20px);
}
.box_person_btn span {
position: relative;
}
.box_person_btn span:before {
content: "";
width: 30px;
height: 30px;
width: 1.2em;
height: 1.2em;
display: block;
background: url(/img/2022new/common/icon_arrow01.png) no-repeat center center/cover;
position: absolute;
top: 50%;
left: -25%;
transform: translateY(-50%);
z-index: 1;
}
.box_description {
width: 75%;
text-align: left;
}
.box_description p {
font-size: 18px;
line-height: 2.286;
}
.box_description_bottom {
margin-top: 8%;
}
.box_price {
display: flex;
}
.box_price_right {
margin-left: 20px;
}
.box_btn {
margin-top: 7%;
}
.box_btn_text {
font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
}
.box_btn a {
width: 80%;
max-width: 423px;
font-size: 20px;
color: #fff;
margin: 10px auto 0;
padding: 10px;
background-color: #EBAEB2;
display: block;
border-radius: 32px;
}
#season .box_person_img img:nth-of-type(2) {
width: 230px;
position: absolute;
bottom: -60px;
left: -90px;
z-index: 1;
}
#season .text_extra {
font-size: clamp(16px, 21 / 1920 * 100vw, 21px);
margin-top: 20px;
}
.oneday_cta {
padding: 90px 0 80px;
background-color: #027D4A;
}
.oneday_cta_inner {
width: fit-content;
margin: auto;
}
.oneday_cta p {
color: #fff;
}
.oneday_cta_lead {
font-size: clamp(16px, 26 / 1920 * 100vw, 26px);
}
.oneday_cta_tel {
margin-top: 20px;
}
.oneday_cta_tel_text {
font-size: clamp(18px, 29 / 1920 * 100vw, 29px);
}
.oneday_cta_tel_num {
font-size: clamp(40px, 60 / 1920 * 100vw, 60px);
position: relative;
}
.oneday_cta_tel_num:before {
content: "";
width: 1em;
height: 1em;
display: block;
background: url(/img/2022new/common/icon_tel03.png) no-repeat center center/cover;
position: absolute;
top: 12%;
left: -22%;
z-index: 1;
}
.oneday_cta_tel_num a {
color: #fff;
}
.card_list_sp {
width: 100%;
max-width: 330px;
margin: 75px auto 0;
}
.card_item_sp:not(:first-of-type) {
margin-top: 34px;
}
.card_item_sp a {
color: #333;
}
.card_content_sp {
position: relative;
}
.card_content_top_sp {
height: 80px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
padding-right: 20px;
box-sizing: border-box;
border-radius: 21px 21px 0 0;
}
.card_content_lead_sp {
font-size: 10px;
}
.card_content_lesson_sp {
font-size: 18px;
font-weight: 700;
margin-top: 5px;
margin-right: 10px;
}
.card_content_bottom_sp {
height: 45px;
background-color: #027D4A;
display: flex;
justify-content: right;
align-items: center;
padding-right: 15px;
box-sizing: border-box;
border-radius: 0 0 21px 21px;
}
.card_content_bottom_sp p {
color: #fff;
}
.card_content_position_sp {
font-size: 11px;
margin-right: 15px;
}
.card_content_name_sp {
font-size: 16px;
font-weight: 700;
}
.card_img_sp {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
z-index: 1;
}
.card_img_sp img {
width: 100%;
}
.card_item01_sp .card_content_top_sp .card_content_lesson_sp span:first-of-type {
margin-right: 2em;
}
.card_item01_sp .card_content_top_sp .card_content_lesson_sp span {
margin-right: 20px;
}
.card_item03_sp .card_content_top_sp .card_content_lesson_sp span:first-of-type {
margin-right: 80px;
}
.card_item04_sp .card_content_top_sp .card_content_lesson_sp span:first-of-type {
margin-right: 60px;
}
.card_item05_sp .card_content_bottom_sp {
flex-direction: column;
justify-content: center;
align-items: end;
}
.card_item05_sp .card_content_bottom_sp .card_content_position {
font-size: 10px;
margin-right: 14px;
}
.card_item05_sp .card_content_bottom_sp .card_content_name_sp span:first-of-type {
font-size: 10px;
font-weight: 500;
margin-right: 10px;
}
@media only screen and (max-width: 1100px) {
.oneday .card_content_top {
height: 80px;
}
.oneday .card_content_bottom {
height: 70px;
}
}
@media only screen and (max-width: 1000px) {
.oneday .card_content_lesson {
font-size: clamp(16px, 20 / 1000 * 100vw, 20px);
}
}
@media only screen and (max-width: 798px) {
.oneday_top {
margin-top: 0;
margin-bottom: 20%;
}
.oneday_top .sec-title-wrap { }
.oneday_top .sec-title-wrap .sec-title:before,
.oneday_top .sec-title-wrap .sec-title:after {
border-top: 6px solid #FFF;
}
.oneday_lecturer {
width: 100%;
padding-top: 15%;
}
#personal {
margin-top: 40px;
}
.oneday_top .text {
width: 90%;
font-size: 14px;
margin-top: 40px;
}
.oneday_title {
font-size: clamp(16px, 20 / 375 * 100vw, 20px);
width: 70%;
width: fit-content;
padding: 1% 30px;
top: -1.5%;
left: 3%;
}
.card_list_pc {
display: none !important;
}
.box {
margin-top: 0;
padding: 50px 8% 20px;
border-radius: 0 29px 29px 29px;
}
.box_media {
flex-direction: column-reverse;
}
.box_youtube {
width: 100%;
margin-left: 0;
}
.box_img {
width: 100%;
margin-top: 10px;
}
.box_content {
flex-direction: column-reverse;
}
.box_description {
width: 100%;
}
.box_description p {
font-size: 14px;
line-height: 1.5;
}
.box_price {
margin-top: 20px;
}
.box_description_bottom {
margin-top: 20px;
font-size: 14px;
text-align: left;
}
.box_description_bottom .box_description_bottom_text:first-of-type {
margin-bottom: 10px;
}
.box_person {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 0;
margin-top: 50px;
margin-bottom: 50px;
}
.box_person_img {
width: 40%;
}
.box_person_img img:nth-of-type(2) {
width: 90px;
bottom: 0;
left: -15px;
}
.box_person_info {
width: 50%;
margin-top: 40px;
}
.box_person_name {
font-size: clamp(14px, 14 / 375 * 100vw, 14px);
font-weight: 500;
}
.box_btn {
margin-top: 15%;
}
.box_person_btn a {
font-size: clamp(10px, 12 / 375 * 100vw, 12px);
}
.box_btn_text {
font-size: clamp(10px, 12 / 375 * 100vw, 12px);
}
.box_btn a {
font-size: clamp(14px, 16 / 375 * 100vw, 16px);
}
.zoom {
font-size: clamp(12px, 14 / 375 * 100vw, 14px);
top: 1.8%;
left: 8%;
}
#season .text_extra {
font-size: 12px;
margin-top: 20px;
}
#season .box_person_img img:nth-of-type(2) {
width: 120px;
bottom: -30px;
left: -45px;
}
.oneday_cta {
width: 90%;
margin: auto;
padding: 30px 0;
background-color: #fff;
border-radius: 13px;
}
.oneday_cta p {
color: #333;
}
.oneday_cta_lead {
font-size: 14px;
}
.oneday_cta_tel_text {
font-size: 16px;
}
.oneday_cta_tel_num {
font-size: 25px;
font-weight: 700;
margin-left: 20px;
}
.oneday_cta_tel_num:before {
background: url(/img/2022new/oneday/oneday_tel01.png) no-repeat center center/cover;
left: -9%;
}
.oneday_cta_tel_num a {
color: #333;
}
} .beginner_top {
margin-top: 10%;
}
.beginner_top .text {
width: 80%; margin: 7% auto 0;
text-align: left;
line-height: 1.773;
}
.beginner_top .card_list {
width: 100%; margin: 9% auto 0;
display: flex;
justify-content: space-between;
}
.beginner_top .card_item {
width: calc((100% - 100px) / 2);
background-color: #fff;
border-radius: 42px;
}
.beginner_top .card_inner {
padding: 20px 7.5% 40px;
}
.beginner_top .card_title {
color: #027D4A;
font-size: clamp(25px, 30 / 1920 * 100vw, 30px);
font-weight: 700;
margin-top: 30px;
}
.beginner_top .card_img {
width: 76%;
margin: 30px auto 0;
}
.beginner_top .card_img a {
pointer-events: none;
}
.beginner_top .card_text {
margin-top: 16%;
text-align: left;
line-height: 1.5;
min-height: 180px;
}
.beginner_top .card_btn a { color: #027D4A;
width: 80%;
margin: auto;
padding: 5px;
display: block;
border: 2px solid #027D4A;
border-radius: 50px;
position: relative;
}
.beginner_top .card_btn a span {
position: relative;
}
.beginner_top .card_btn a span:before {
content: "";
width: 1.2em;
height: 1.2em;
display: block;
background: url(/img/2022new/basic/icon_arrow01.png) no-repeat center center/cover;
position: absolute;
top: 50%;
left: -40%;
transform: translateY(-50%);
z-index: 1;
}
.beginner_flower {
margin-top: 7%;
padding-top: 7%;
background-color: #fff;
}
.beginner_flower_wrap {
width: 90%;
max-width: 1715px;
margin: auto;
}
.beginner_flower .text {
font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
width: 85%;
margin: 10% auto 0;
text-align: left;
line-height: 1.731;
position: relative; } .beginner_flower .media_item {
margin-top: 8%;
padding-bottom: 10%;
border-bottom: 1px dotted #027D4A;
display: flex;
justify-content: space-between;
}
.beginner_flower .media_left {
width: 40%;
margin-top: 70px;
}
.beginner_flower .media_right {
width: 55%;
text-align: left;
}
.beginner_flower .media_right_title {
font-size: clamp(20px, 28 / 1920 * 100vw, 28px);
font-weight: 700;
margin-left: 50px;
}
.beginner_flower .media_right_title .point {
font-size: clamp(25px, 35 / 1920 * 100vw, 35px);
color: #027D4A;
margin-left: 10px;
position: relative;
}
.beginner_flower .media_right_title .point:before {
content: "";
width: 40px;
height: 45px;
display: block;
background: url(/img/2022new/beginner/decoration01.png) no-repeat center center/cover;
position: absolute;
top: -25px;
right: -30px;
z-index: 1;
}
.beginner_flower .media_points {
margin-top: 90px;
}
.beginner_flower .media_point:not(:first-of-type) {
margin-top: 90px;
}
.beginner_flower .media_point_lead {
font-size: clamp(18px, 20 / 1920 * 100vw, 20px);
font-weight: 700;
position: relative;
}
.beginner_flower .media_point_lead span {
margin-left: 75px;
}
.beginner_flower .media_point .media_point_lead:before {
content: "";
width: 71px;
height: 70px;
display: block;
position: absolute;
top: -50px;
left: 10px;
z-index: 1;
}
.beginner_flower .media_point:nth-of-type(1) .media_point_lead:before {
background: url(/img/2022new/beginner/point01.png) no-repeat center center/cover;
}
.beginner_flower .media_point:nth-of-type(2) .media_point_lead:before {
background: url(/img/2022new/beginner/point02.png) no-repeat center center/cover;
}
.beginner_flower .media_point:nth-of-type(3) .media_point_lead:before {
background: url(/img/2022new/beginner/point03.png) no-repeat center center/cover;
}
.beginner_flower .media_point:nth-of-type(4) .media_point_lead:before {
background: url(/img/2022new/beginner/point04.png) no-repeat center center/cover;
}
.beginner_flower .media_point_description {
font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
margin-top: 10px;
margin-left: 50px;
}
.beginner_flower .media_detail {
margin-top: 9%;
padding-bottom: 11%;
border-bottom: 1px dotted #027D4A;
}
.beginner_flower .media_detail_title {
font-size: clamp(20px, 26 / 1920 * 100vw, 26px);
font-weight: 700;
text-align: left;
}
.beginner_flower .media_detail_wrap {
margin-top: 6%;
margin-bottom: 7%;
display: flex;
justify-content: space-between; }
.beginner_flower .media_detail .media_left {
width: 60%;
margin-top: 0;
}
.beginner_flower .media_detail .media_right {
width: 35%;
}
.beginner_flower .media_detail .media_dl {
display: flex;
}
.beginner_flower .media_detail .media_dl:first-of-type .media_dt {
padding-top: 10px;
}
.beginner_flower .media_detail .media_dt {
padding: 25px;
}
.beginner_flower .media_detail .media_dt {
width: 150px;
font-size: clamp(18px, 20 / 1920 * 100vw, 20px);
font-weight: 700;
text-align: right;
padding: 25px 25px 25px 0;
box-sizing: border-box;
position: relative;
}
.beginner_flower .media_detail .media_dt:before {
content: "";
width: 2px;
height: 100%;
background-color: #3F3F3F;
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.beginner_flower .media_detail .media_dd {
width: calc(100% - 170px);
font-size: clamp(16px, 18 / 1920 * 100vw, 18px);
padding: 25px 0 25px 40px;
text-align: left;
}
.beginner_flower .media_detail .media_dl:first-of-type .media_dd {
padding-top: 10px;
}
.beginner_flower .media_detail .media_dl:last-of-type .media_dd {
padding-bottom: 10px;
}
.beginner_flower .media_detail .media_note {
font-size: clamp(14px, 16 / 1920 * 100vw, 16px);
margin-top: 6.3%;
margin-top: 0;
text-align: left;
padding-left: 1em;
text-indent: -1em;
box-sizing: border-box;
}
.beginner_lesson_btn {
padding: 6% 0;
background-color: #fff;
}
.beginner_lesson_btn_text {
font-size: clamp(16px, 20 / 1920 * 100vw, 20px);
}
.beginner_lesson_btn a {
width: 80%;
max-width: 423px;
font-size: clamp(18px, 24 / 1920 * 100vw, 24px);
color: #fff;
margin: 10px auto 0;
padding: 10px;
background-color: #EBAEB2;
display: block;
border-radius: 32px;
}
.media_person {
margin-top: 5%;
padding-bottom: 5%;
border-bottom: 1px dotted #027D4A;
display: flex;
justify-content: space-between;
align-items: center;
}
.beginner_online {
margin-top: 0;
}
.beginner_online .media_left {
margin-top: 70px;
}
.beginner_online .box_person_position {
font-size: clamp(16px, 20 / 1920 * 100vw, 20px);
font-weight: 700;
}
.beginner_online .box_person_name {
font-size: clamp(16px, 22 / 1920 * 100vw, 22px);
font-weight: 700;
margin-top: 5px;
}
.beginner_online .box_person {
width: 45%;
margin: auto;
}
.beginner_online .media_introduction {
font-size: clamp(20px, 28 / 1920 * 100vw, 28px);
font-weight: 700;
}
.box_person_btn {
margin-top: 7%;
margin-left: 12%;
}
.box_person_btn span {
position: relative;
}
.box_person_btn span:before {
content: "";
width: 30px;
height: 30px;
width: 1.2em;
height: 1.2em;
display: block;
background: url(/img/2022new/common/icon_arrow01.png) no-repeat center center/cover;
position: absolute;
top: 50%;
left: -25%;
transform: translateY(-50%);
z-index: 1;
} @media only screen and (max-width: 798px) {
.sec-title-wrap {
position: relative;
z-index: 2;
display: inline-block;
}
.media_img {
position: relative;
z-index: 1;
}
.beginner_top {
margin-top: 0;
}
.beginner_top .card_inner {
padding: 0;
}
.beginner_top .card_title {
font-size: 20px;
margin-top: 0;
}
.beginner_top .card_title_sub {
font-size: 12px;
margin-top: 10px;
}
.beginner_top .text {
width: 90%;
font-size: 14px;
}
.beginner_top .card_img {
width: 100%;
margin: 0;
}
.beginner_top .card_img a {
pointer-events: unset;
}
.beginner_top .card_img img {
width: 100%;
}
.beginner_flower {
margin-top: 30%;
padding-top: 0;
}
.beginner_online {
margin-top: 0;
}
.beginner_flower .text:before {
display: none;
}
.beginner_flower .text {
width: 100%;
font-size: 14px;
padding-left: 0;
}
.beginner_top .card_list {
flex-direction: column;
}
.beginner_top .card_item {
width: 100%;
border-radius: 70px 70px 30px 30px;
display: flex;
flex-direction: column-reverse;
}
.beginner_top .card_item:not(:first-of-type) {
margin-top: 40px;
}
.beginner_flower .media_item {
border-bottom: 2px dotted #027D4A;
}
.beginner_flower .media_left {
display: none;
}
.beginner_flower .media_right {
width: 100%;
}
.beginner_flower .media_img {
width: 100vw;
margin: -70px calc(50% - 50vw) 0;
}
.beginner_flower .media_right_title {
margin-top: 50px;
margin-left: 0;
text-align: center;
}
.beginner_flower .media_points {
margin-top: 60px;
}
.beginner_flower .media_point:not(:first-of-type) {
margin-top: 60px;
}
.beginner_flower .media_point .media_point_lead:before {
width: 43px;
height: 42px;
top: -25px;
left: 0;
}
.beginner_flower .media_point_lead {
font-size: 16px;
}
.beginner_flower .media_point_lead span {
margin-left: 0;
padding-left: 3em;
display: block;
}
.beginner_flower .media_point_description {
margin-left: 35px;
font-size: 14px;
}
.beginner_flower .media_detail_wrap {
flex-direction: column;
margin-bottom: 0;
}
.beginner_flower .media_detail .media_left {
width: 100%;
margin-bottom: 13.8%;
}
.beginner_flower .media_detail .media_right {
width: 100%;
margin-top: 40px;
}
.beginner_flower .media_detail .media_dt {
font-size: 14px;
text-align: left;
width: 100px;
padding: 10px 10px 10px 0;
box-sizing: border-box;
}
.beginner_flower .media_detail .media_dt:before {
width: 1px;
}
.beginner_flower .media_detail .media_dd {
font-size: 14px;
width: calc(100% - 100px);
padding: 10px 0 10px 20px;
box-sizing: border-box;
}
.media_person {
margin-top: 15%;
padding-bottom: 15%;
border-bottom: 2px dotted #027D4A;
}
.beginner_online .box_person {
width: 100%;
flex-direction: column;
}
.media_detail .media_left {
display: block; }
.beginner_lesson_btn {
padding: 19% 15px;
}
.beginner_lesson_btn_text {
font-size: 14px;
}
.beginner_lesson_btn a {
font-size: 16px;
padding: 5px;
}
.beginner_flower .media_right_title_sp {
display: none !important;
}
.beginner_flower .media_right_title .point {
font-size: clamp(22px, 30 / 1920 * 100vw, 30px);
margin-left: 5px;
}
.beginner_flower .media_right_title .point:before {
width: 28px;
height: 33px;
top: -18px;
right: -20px;
}
.beginner_flower .media_detail {
border-bottom: none;
padding-bottom: 0;
}
}
.archive_mv {
width: 100px;
position: absolute;
top: 20px;
left: 20px;
}
.lesson {
margin: 100px 0 60px;
}
.lesson .lesson_type {
font-size: clamp(25px, 30 / 1920 * 100vw, 30px);
font-weight: 700;
color: #027D4A;
}
.lesson .lesson_index {
margin: 60px auto 0;
width: 100%;
max-width: 780px;
}
.lesson .lesson_index_post {
border-bottom: 1px solid #333;
}
.lesson .lesson_index_post:first-of-type {
margin-top: 10px;
border-top: 1px solid #333;
} .lesson .lesson_index_post a {
padding: 10px 0;
display: flex;
align-items: center;
color: #333333;
}
.lesson .lesson_index_date {
flex: 2;
margin-right: 15px;
text-align: left;
}
.lesson .lesson_index_title {
flex: 3;
text-align: left;
}
.lesson .lesson_list {
margin-top: 50px;
}
.lesson .lesson_item {
background-color: #fff;
}
.lesson .lesson_item:not(:last-of-type) {
margin-bottom: 100px;
}
.lesson .lesson_top {
width: 100%;
max-width: 400px;
background-color: #027D4A;
}
.lesson .lesson_date {
color: #fff;
font-size: clamp(18px, 23 / 1920 * 100vw, 23px);
padding: 20px;
display: block;
font-weight: 700;
}
.lesson .lesson_content {
padding: 4%;
}
.lesson .lesson_title {
text-align: left;
font-size: clamp(22px, 25 / 1920 * 100vw, 25px);
font-weight: 700;
padding: 0 10px 5px;
border-bottom: 1px solid #027D4A;
}
.lesson .lesson_wrap {
margin-top: 50px;
margin-bottom: 100px;
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.lesson .lesson_detail { width: 100%;
}
.lesson .lesson_img {
width: 75%;
margin-left: 3%; position: relative;
}
.lesson .lesson_img img { width: 100%; object-fit: cover;
}
.lesson .lesson_dl {
display: flex;
}
.lesson .lesson_dl:not(:last-of-type) {
margin-bottom: 15px;
}
.lesson .lesson_dt {
width: 120px;
text-align: left;
font-weight: 700;
font-size: clamp(14px, 18 / 1920 * 100vw, 18px);
}
.lesson .lesson_dd {
width: calc(100% - 120px);
text-align: left;
font-size: clamp(14px, 18 / 1920 * 100vw, 18px);
}
.lesson .lesson_btn a {
width: 100%;
max-width: 370px;
font-size: clamp(18px, 24 / 1920 * 100vw, 24px);
color: #fff;
margin: auto;
padding: 10px;
background-color: #EBAEB2;
display: block;
border-radius: 32px;
}
.lesson .lesson_contents {
margin-bottom: 30px;
text-align: left;
}
.lesson .lesson_contents p {
font-size: clamp(14px, 18 / 1920 * 100vw, 18px);
line-height: 1.7;
}
@media only screen and (max-width: 798px) {
.lesson {
margin-top: 100px;
}
.lesson .lesson_type {
font-size: clamp(16px, 18 / 375 * 100vw, 18px);
}
.lesson .lesson_index {
margin: 30px auto 0;
}
.lesson .lesson_index_post a {
padding: 5px 0;
flex-direction: column;
align-items: flex-start;
font-size: clamp(14px, 16 / 375 * 100vw, 16px);
}
.lesson .lesson_list {
margin-top: 30px;
}
.lesson .lesson_item:not(:last-of-type) {
margin-bottom: 50px;
}
.lesson .lesson_top {
max-width: unset;
}
.lesson .lesson_date {
font-size: clamp(16px, 18 / 375 * 100vw, 18px);
padding: 10px;
}
.lesson .lesson_content {
padding: 30px 10px;
}
.lesson .lesson_title {
font-size: clamp(16px, 18 / 375 * 100vw, 18px);
padding: 0 10px 5px;
}
.lesson .lesson_wrap {
flex-direction: column-reverse;
margin-top: 20px;
margin-bottom: 50px;
}
.lesson .lesson_detail {
width: 100%;
}
.lesson .lesson_img {
width: 100%;
margin-left: 0; margin-bottom: 20px;
}
.lesson .lesson_img img {
height: 100%;
}
.lesson .lesson_dl {
flex-direction: column;
}
.lesson .lesson_dl:not(:last-of-type) {
margin-bottom: 20px;
}
.lesson .lesson_dt {
width: 100%;
font-size: clamp(12px, 14 / 375 * 100vw, 14px);
}
.lesson .lesson_dd {
width: 100%;
font-size: clamp(12px, 14 / 375 * 100vw, 14px);
margin-top: 5px;
}
.lesson .lesson_btn a {
width: 100%;
max-width: 200px;
font-size: clamp(14px, 16 / 375 * 100vw, 16px);
padding: 10px;
}
.lesson .lesson_contents {
margin-bottom: 20px;
}
.lesson .lesson_contents p {
font-size: clamp(12px, 14 / 375 * 100vw, 14px);
}
}
.top-section.top-lesson {
width: 1200px;  }
.top-section .lesson_list {
margin-top: 50px;
display: flex;
justify-content: space-between;
}
.top-section .lesson_item {
width: calc((100% - 100px) / 3);
background-color: #fff;
padding: 7px 7px 20px;
border-radius: 70px 70px 17px 17px;
box-sizing: border-box;
}
.top-section .lesson_item:nth-of-type(1) .lesson_btn {
margin-top: 55px;
}
.top-section .lesson_item:nth-of-type(3) .lesson_btn {
margin-top: 55px;
}
.top-section .lesson_item .lesson_image {
border-radius: 65px 65px 0 0;
overflow: hidden;
aspect-ratio: 353 / 222;
}
.lesson_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.top-section .lesson_title {
font-size: clamp(20px, 25 / 1920 * 100vw, 25px);
font-weight: 700;
margin-top: 20px;
text-align: center;
}
.top-section .lesson_btn_wrap {
margin-top: 20px;
}
.top-section .lesson_btn {
font-size: clamp(16px, 20 / 1920 * 100vw, 20px);
width: 85%;
margin: auto;
background-color: #36955c;
display: block;
text-align: center;
border-radius: 32px;
}
.top-section .lesson_btn:nth-of-type(2) {
margin-top: 20px;
}
.top-section .lesson_btn a {
color: #fff;
display: block;
padding: 10px;
}
.top-section.top-lesson .taiken-banner {
margin-top: 150px;
}
.top-section.top-lesson .taiken-banner a {
width: 450px;
display: block;
margin: auto;
}
@media only screen and (max-width: 798px) {
.top-section.top-lesson {
width: 100%;
}
.top-section .lesson_list {
width: 90%;
margin: 30px auto 0;
flex-direction: column;
}
.top-section .lesson_item {
width: 100%; }
.top-section .lesson_item:not(:first-of-type) {
margin-top: 30px;
}
.top-section .lesson_item:nth-of-type(1) .lesson_btn {
margin-top: 55px;
}
.top-section .lesson_item:nth-of-type(3) .lesson_btn {
margin-top: 0;
}
.top-section.top-lesson .taiken-banner {
margin-top: 70px;
}
.top-section.top-lesson .taiken-banner a {
width: 90%;
}
} .mobile-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
border-top: 1px solid #ddd;
z-index: 99999;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
} .nav-item {
text-align: center;
color: #333;
text-decoration: none;
font-size: 12px;
flex: 1;
}
.nav-item i {
font-size: 24px;
display: block;
margin-bottom: 5px;
color: #027D4A;
} .u-mobile {
display: flex;
}
@media (min-width: 798px) {
.u-mobile {
display: none !important;
}
} .no-scroll {
overflow: hidden;
height: 100vh;
} .mobile-nav_list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100vh; overflow-y: auto; background: white;
}