body {
margin: 0 auto;
padding: 0;
color: #3c3c3c;
width: 100%;
}
html {
margin: 0 auto;
padding: 0;
font-size: 15px;
letter-spacing: 1px;
line-height: 24px;
font-family: Helvetica, dnp-shuei-gothic-gin-std, Arial, "Hiragino Kaku Gothic Pro", "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
font-weight: 500;
}
* {
margin: 0;
padding: 0;
text-align: left;
}
img {
border: none;
vertical-align: top;
max-width: 100%;
} a img,
a,
.ar01,
#fixbos li,
.navisbox ul li a,
.b_more a .ar02,
.b_more a .ar03,
footer #box01>.wrap>ul>li.first>dl>dd>ol>li,
footer #box02>.wrap>dl>dd>ol>li,
#studio .shop-list .infobox dl {
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ol,
ul {
list-style: none;
}
li img {
vertical-align: top;
}
a {
text-decoration: none;
}
a:hover img,
#fixbos li:hover,
.b_more a:hover,
footer #box01>.wrap>ul>li.first>dl>dd>ol>li a:hover,
footer #box02>.wrap>dl>dd>ol>li a:hover,
#pank ul li a:hover,
footer #box03>.wrap>ul>li a:hover,
header .h_reservbtnbox li a:hover,
.clone-nav_f ol li a:hover,
.handrailbox div a:hover,
slider autoplays_type01 a:hover,
#contents_news div.btn a:hover,
.rankfirstbox dd div a:hover,
#contents_feature_popu .sidebox li div a:hover,
#contents_feature_attention .sidebox li dd div a:hover,
.featbox div a:hover,
.bg_black .right ol li a:hover,
.btn_both_pink a:hover,
.btn_both_gren a:hover,
.btn_both_gray a:hover,
#studio .shop-list .infobox dl:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
border-top: 0.5px solid #ededef;
}
.clear {
zoom: 100%;
}
.clear:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 0;
line-height: 0;
clear: both;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
::selection {
background: #637c95;
color: #fff;
}
::-moz-selection {
background: #637c95;
color: #fff;
}
#sp_gnav {
display: none;
}
.font-dnp {
font-family: dnp-shuei-gothic-gin-std;
}
.mas-fade {
background: #fff;
height: 100%;
width: 100%;
content: '';
z-index: 99999;
position: fixed;
opacity: 1;
}
.type-font {
font-family: bigcity-grotesque-pro;
font-style: normal;
font-weight: 400;
}
.h-no-trans {
transform: translateY(0) !important;
transform: -moz-translateY(0) !important;
transform: -webkit-translateY(0) !important;
}
.inner {
max-width: 1140px;
width: 1140px;
margin: 0 auto;
}
.inner03{
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.inner04{
width: 97%;
margin: auto;
overflow: hidden;
}
.inner05{
max-width: 1100px;
width: 1100px;
margin: 0 auto;
}
.inner06{
max-width: 1100px;
width: 1100px;
margin: 0 auto;
}
.inner_minibox {
max-width: 900px;
width: 900px;
margin: 0 auto;
position: relative;
}
.bg_pingra {
background: linear-gradient(135deg, #F5721A, #FF2C89 70%) !important;
background: -moz-linear-gradient(135deg, #FF2C89, #F5721A 70%) !important;
background: -webkit-linear-gradient(135deg, #FF2C89, #F5721A 70%) !important;
background: -ms-linear-gradient(135deg, #FF2C89, #F5721A 70%) !important;
}
.bg_palgra {
background: linear-gradient(135deg, #3969de, #6A33C1 70%) !important;
background: -moz-linear-gradient(135deg, #6A33C1, #3969de 70%) !important;
background: -webkit-linear-gradient(135deg, #6A33C1, #3969de 70%) !important;
background: -ms-linear-gradient(135deg, #6A33C1, #3969de 70%) !important;
}
.bg_gregra {
background: linear-gradient(170deg, #28c1dc, #01b507 100%) !important;
background: -moz-linear-gradient(170deg, #01b507, #28c1dc 100%) !important;
background: -webkit-linear-gradient(170deg, #01b507, #28c1dc 100%) !important;
background: -ms-linear-gradient(170deg, #01b507, #28c1dc 100%) !important;
}
.btn_arrow {
display: block;
}
.btn_arrow a {
text-decoration: underline;
color: #3c3c3c !important;
}
.btn_arrow a:hover {
color: #67b5bf !important;
}
.btn_arrow::before {
content: "＞";
display: inline-block;
font-size: 15px;
margin-right: 10px;
vertical-align: 2px;
}
.p-top75 {
padding-top: 75px;
}
.m-auto-38 {
margin: -38px auto 0;
}
.m-auto-35 {
margin: -35px auto 0;
}
.top_both_ttl {
margin: 0 auto;
text-align: center;
}
.top_both_ttl span {
font-size: 40px;
line-height: 0;
padding-bottom: 19px;
margin: 35px 0 20px 0;
border-bottom: solid 2px #3c3c3c;
display: inline-block;
}
.btn_both_pink a {
position: relative;
width: 300px;
font-size: 18px !important;
height: 50px;
color: #fff;
background: #ee8081;
box-shadow: 4px 4px #f5bfbf;
-ms-box-shadow: 4px 4px #f5bfbf;
-webkit-box-shadow: 4px 4px #f5bfbf;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin: 0 auto 40px;
}
.btn_both_pink a::after {
content: "＞";
display: inline-block;
font-size: 15px;
margin-left: 5px;
vertical-align: 2px;
}
.btn_both_gren a,
.btn_both_gren .btn_both_gren_btn {
position: relative;
width: 300px;
font-size: 18px !important;
height: 50px;
color: #fff;
background: #67b5bf;
box-shadow: 4px 4px #b2dbdf;
-ms-box-shadow: 4px 4px #b2dbdf;
-webkit-box-shadow: 4px 4px #b2dbdf;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin: 0 auto 40px;
}
.btn_both_gren a::after,
.btn_both_gren .btn_both_gren_btn::after {
content: "＞";
display: inline-block;
font-size: 15px;
margin-left: 5px;
vertical-align: 2px;
}
.btn_both_gray a,
.btn_both_gray .btn_both_gray_btn {
position: relative;
width: 300px;
font-size: 18px !important;
height: 50px;
color: #fff;
background: #aaaaaa;
box-shadow: 4px 4px #cfcfcf;
-ms-box-shadow: 4px 4px #cfcfcf;
-webkit-box-shadow: 4px 4px #cfcfcf;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin: 0 auto 40px;
}
.btn_both_gray a::after,
.btn_both_gray .btn_both_gray_btn::after {
content: "＞";
display: inline-block;
font-size: 15px;
margin-left: 5px;
vertical-align: 2px;
}
.btn_both_pink a:hover,
.btn_both_gren a:hover,
.btn_both_gray a:hover {
text-decoration: none;
}
div.btn {
background: #fff;
width: 300px;
margin: 0 auto;
z-index: 2;
position: relative;
}
div.btn a {
position: relative;
width: 300px;
font-size: 18px !important;
height: 50px;
color: #fff;
box-shadow: 3px 3px 4px #000;
-ms-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin: 0 auto 20px;
z-index: 1;
}
.opgim00 {
-webkit-animation: gim00 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
-moz-animation: gim00 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
animation: gim00 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.opgim01 {
-webkit-animation: gim02 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
-moz-animation: gim02 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
animation: gim02 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.opgim02 {
-webkit-animation: gim02 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
-moz-animation: gim02 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
animation: gim02 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.c-scroll-icon-line-mask {
position: relative;
overflow: hidden;
width: 20px;
height: 100px;
margin: 0 auto;
}
.c-scroll-icon-line {
position: absolute;
display: inline-block;
width: 1px;
height: 150px;
border-left: 1px solid #ffffff;
top: -150px;
left: 10px;
-webkit-animation: scroll-line 3s infinite;
animation: scroll-line 3s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}  .under-pagettlbox {
padding-bottom: 40px;
}
.under-pagettlbox .emphasis {
font-size: 25px;
line-height: 43px;
text-align: center;
margin-bottom: 20px;
font-weight: bold;
letter-spacing: 3px;
}
.under-pagettlbox .description {
font-size: 16px;
line-height: 32px;
margin-bottom: 20px;
}
.under-pagettlbox .description span {
display: block;
text-align: center;
}
.under-pagettlbox .img_illustration {
text-align: center;
margin-bottom: 20px;
}
.under-pagettlbox .img_illustration img {
max-width: 100%;
height: auto;
} #pankuz {
margin: 0 auto 10px;
max-width: 1100px;
width: 1100px;
transform: translateX(-30px);
-moz-transform: translateX(-30px);
opacity: 0;
}
#pankuz ul {
font-size: 14px;
}
#pankuz ul li {
font-weight: normal;
display: inline;
}
#pankuz ul li a {
text-decoration: none;
color: #5f565a;
float: left;
display: inline-block;
}
#pankuz ul li a::after {
content: '>';
display: inline-block;
font-size: 12px;
padding: 0 15px;
}
#pankuz ul li.first a:before {
content: '';
background: url(/images/common/icon-home.png) no-repeat;
display: inline-block;
width: 14px;
height: 14px;
padding: 0 10px 0 0;
background-size: contain;
vertical-align: -2px;
} .under_page .inner {
max-width: 1100px;
width: 1100px;
margin: 0 auto;
padding-bottom: 20px;
}
.under_page .inner02 {
max-width: 1100px;
width: 1100px;
margin: 0 auto;
padding-bottom: 20px;
}
.under_page .inner.type02{
max-width: 520px;
width: 100%;
margin: 0 auto;
}
.under_page #under-searchmap .inner.type03{
max-width: 645px;
width: 100%;
margin: 0 auto;
padding-bottom: 0;
} main.under_page {
padding-top: 80px;
}
#under-mvbox {
margin-bottom: 45px;
overflow: hidden;
}
#under-mvbox dt {
float: right;
width: 660px;
height: 300px;
}
#under-mvbox dd {
float: left;
width: 440px;
height: 300px;
background: #ee8081;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#under-mvbox h1 strong {
font-size: 24px;
line-height: 1.5;
font-weight: bold;
margin-bottom: 10px;
display: block;
text-align: center;
}
#under-mvbox h1 span {
font-size: 20px;
font-weight: bold;
display: block;
text-align: center;
}
.reinb {
font-size: 14px;
background: linear-gradient(to right, #3969de 0%, #6A33C1 14.28%, #3969de 28.56%, #04b615 42.85%, #04b615 57.14%, #6A33C1 71.42%, #3969de 85.71%, #628ef7 100%) 0% center/200% auto;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
animation: example 4s linear infinite;
display: none;
}  header {
width: 100%;
height: 115px;
position: relative;
background: #fff;
z-index: 1;
}
header .logo {
position: absolute;
top: 25px;
left: 0;
margin-left: 70px;
transform: translateY(10%);
opacity: 0;
width: 172px;
}
.sc_logo,
.h_telbox {
display: none;
}
header nav ol {
position: absolute;
top: 75px;
right: 0;
margin-right: 70px;
border-left: #3c3c3c solid 1px;
transform: translateX(-5%);
opacity: 0;
}
header nav ol li a {
color: #3c3c3c;
display: block;
padding: 0 25px;
}
header nav ol li {
display: table-cell;
font-size: 14px;
border-right: #3c3c3c solid 1px;
position: relative;
}
header nav ol li.sp_only {
display: none;
}
header nav ol li a:hover {
color: #67b5bf;
text-decoration: none;
}
header nav ol li a::after {
background: linear-gradient(135deg, #67b5bf, #0e8999 70%) !important;
background: -moz-linear-gradient(135deg, #0e8999, #67b5bf 70%) !important;
background: -webkit-linear-gradient(135deg, #0e8999, #67b5bf 70%) !important;
background: -ms-linear-gradient(135deg, #0e8999, #67b5bf 70%) !important;
bottom: 0;
content: '';
display: block;
height: 1px;
left: 15%;
position: absolute;
transition: .3s all;
width: 0;
}
header nav ol li a:hover::after {
width: 70%;
left: 15%;
}
header nav ol li.nav_pcNone {
display: none;
}
header .h_reservbtnbox {
position: absolute;
top: 0;
right: 0;
margin-right: 70px;
transform: translateX(-5%);
opacity: 0;
}
header .h_reservbtnbox li {
float: left;
margin-left: 10px;
}
header .h_reservbtnbox li a {
position: relative;
width: 190px;
height: 50px;
color: #fff;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
header .h_reservbtnbox li:first-child a {
background: #ee8081;
box-shadow: 4px 4px #f5bfbf;
-ms-box-shadow: 4px 4px #f5bfbf;
-webkit-box-shadow: 4px 4px #f5bfbf;
}
header .h_reservbtnbox li:nth-child(2) a {
background: #67b5bf;
box-shadow: 4px 4px #b2dbdf;
-ms-box-shadow: 4px 4px #b2dbdf;
-webkit-box-shadow: 4px 4px #b2dbdf;
}
header .h_reservbtnbox li.first a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon01.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 20px;
height: 28px;
margin-right: 5px;
}
header .h_reservbtnbox li.last a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon02.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 25px;
height: 30px;
margin-right: 5px;
}
header .h_reservbtnbox li a:hover {
text-decoration: none;
}
header .h_reservbtnbox li {
line-height: 1.2;
}
header .h_reservbtnbox li span {
text-align: center;
}
header nav ol li .navisub {
width: 100%;
position: absolute;
left: 50%;
top: 100%;
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
max-height: 0;
opacity: 0;
transition: .4s;
}
header nav ol li:hover .navisub {
padding: 24px 0 0;
transform: translate3d(-50%, 0, 0);
opacity: 1;
max-height: 99999px;
}
header nav ol li .navisub_inner {
position: absolute;
background: #5dacb7;
top: 24px;
left: 50%;
display: none;
transform: translate3d(-50%, 0, 0);
padding: 20px 30px 30px;
box-sizing: border-box;
min-width: 290px;
}
header nav ol li:hover .navisub_inner {
display: block;
}
header nav ol li .navisub_inner::after {
content: '';
border-style: solid;
border-width: 0 8px 10px 8px;
border-color: transparent transparent #5dacb7 transparent;
position: absolute;
left: 50%;
bottom: 100%;
transform: translate3d(-50%, 0, 0);
}
header nav ol li .navisub_inner dt {
margin: 0 0 5px;
border-bottom: 1px solid #fff;
}
header nav ol li .navisub_inner dt a {
display: block;
width: 100%;
font-size: 13px;
font-weight: bold;
position: relative;
color: #fff;
padding: 10px 5px;
white-space: nowrap;
}
header nav ol li .navisub_inner dt a::after {
content: '';
width: 6px;
height: 6px;
border-style: solid;
border-width: 2px;
border-color: #fff #fff transparent transparent;
position: absolute;
right: 10px;
top: 50%;
left: auto;
bottom: auto;
background: none !important;
transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, 45deg);
transform: .4s;
}
header nav ol li .navisub_inner dt a:hover::after {
transform: translate3d(-4px, -50%, 0) rotate3d(0, 0, 1, 45deg);
}
header nav ol li .navisub_inner dd a {
display: block;
font-size: 12px;
color: #fff;
padding: 5px;
white-space: nowrap;
}
header nav ol li .navisub_inner dd a:hover {
text-decoration: underline;
}
.sub-open-btn {
display: none;
}
header .studio,
header .studio.mode_sp{
display: none;
} .clone-nav_h {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
transition: .3s;
transform: translateY(-100%);
background: #fff;
height: 60px;
box-shadow: 1px 0 2px #3c3c3c;
-ms-box-shadow: 1px 0 2px #3c3c3c;
-webkit-box-shadow: 1px 0 2px #3c3c3c;
}
.is-show_h {
transform: translateY(0);
}
.clone-nav_h .logo,
.clone-nav_h h1,
.clone-nav_h .h_reservbtnbox,
.clone-nav_h .blos {
display: none;
}
.clone-nav_h .sc_logo,
.clone-nav_h .h_telbox {
display: block;
}
.clone-nav_h .sc_logo {
position: absolute;
left: 10px;
top: 15px;
width: 74px;
height: 31px;
}
.h-no-trans .sc_logo,
.h-no-trans .h_telbox {
transform: translateX(-30px);
-moz-transform: translateX(-30px);
opacity: 0;
}
.clone-nav_h .h_telbox {
position: absolute;
right: 5px;
top: 15px;
}
.clone-nav_h nav ol {
position: absolute;
top: 17px;
left: 100px;
}
.clone-nav_h nav ol li a {
padding: 0 20px;
}
.clone-nav_h .h_telbox dt {
float: left;
line-height: 30px;
font-size: 12px;
}
.clone-nav_h .h_telbox dd {
margin-left: 130px;
width: 185px;
} #footer_navi {
display: flex;
}
#footer_sns {
width: 25%;
padding: 0 0 0 0;
box-sizing: border-box;
}
#footer_sns dt {
font-size: 15px;
line-height: 1.2;
margin: 0 0 15px;
font-weight: 400;
font-family: bigcity-grotesque-pro;
font-style: normal;
}
#footer_sns .footer_sns-list {
display: flex;
}
#footer_sns .footer_sns-list li {
width: 40px;
margin: 0 12px 0 0;
}
#footer_sitemap {
width: 40%;
padding: 0 10px 0 0;
box-sizing: border-box;
display: flex;
}
#footer_sitemap .footer_sitemap-list {
width: 50%;
}
#footer_sitemap .footer_sitemap-list li {
padding: 0 5px 0 0;
margin: 0 0 5px;
}
#footer_sitemap .footer_sitemap-list li a {
display: inline-block;
position: relative;
line-height: 1.5;
font-size: 14px;
}
#footer_sitemap .footer_sitemap-list li a::after {
content: '';
width: 0;
height: 1px;
background: rgba(255, 255, 255, 0.8);
transition: all .3s;
position: absolute;
left: 0;
bottom: 0;
}
#footer_sitemap .footer_sitemap-list li a:hover {
text-decoration: none;
}
#footer_sitemap .footer_sitemap-list li a:hover::after {
width: 100%;
}
#footer_contact {
width: 35%;
padding: 0 12px 0 0;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
}
#footer_sitemap .footer_sitemap-list .footer_sitemap-list_sub {
margin: 0 0 10px;
}
#footer_sitemap .footer_sitemap-list .footer_sitemap-list_sub li {
margin: 0;
}
#footer_sitemap .footer_sitemap-list .footer_sitemap-list_sub a {
font-size: 12px;
}
#footer_contact #footer_contact_inner {
width: 360px;
}
.footer_contact-list {
display: flex;
flex-wrap: wrap;
}
.footer_contact-list li {
width: 50%;
padding: 0 3px 3px 0;
box-sizing: border-box;
}
.footer_contact-list li a {
display: flex;
background: #fff;
color: #3c3c3c;
height: 100%;
min-height: 50px;
text-align: center;
align-items: center;
justify-content: center;
line-height: 1.2;
font-weight: 600;
font-size: 14px;
position: relative;
}
.footer_contact-list li a .sub {
text-align: center;
font-size: 12px;
}
.footer_contact-list li a:hover {
text-decoration: none;
opacity: .8;
}
.footer_contact-list li a::before {
content: '';
display: inline-block;
background: url(/images/common/btn-icon01.png) center center no-repeat;
background-size: contain;
width: 20px;
height: 28px;
margin: 0 5px 0 0;
}
.footer_contact-list li#footer_contact-contact a::before {
display: none;
}
.footer_contact-list .footer_contact-inner {
display: inline-block;
text-align: center;
}
#footer_contact-demo a {
background: #e67f7f;
color: #fff;
}
#footer_contact-demo a::before {
display: inline-block;
background-image: url(/images/common/btn-icon01.png);
width: 20px;
height: 28px;
}
#footer_contact-login a {
background: #72b5c0;
color: #fff;
}
#footer_contact-login a::before {
display: inline-block;
background-image: url(/images/common/btn-icon02.png);
width: 25px;
height: 28px;
}
#footer_contact-faq a::before {
display: inline-block;
background-image: url(/images/common/btn-icon03.png);
width: 19px;
height: 22px;
}
.footer_contact-callcenter {
padding: 20px 3px 0 0;
}
.footer_contact-callcenter dt,
.footer_contact-callcenter dd {
text-align: center;
line-height: 1.5;
}
.footer_contact-callcenter dt .sub {
font-size: 13px;
display: inline-block;
margin: 0 10px 0 0;
}
.footer_contact-callcenter dt a {
display: inline-block;
font-weight: 700;
font-size: 16px;
letter-spacing: .1em;
position: relative;
padding: 0 0 0 20px;
}
.footer_contact-callcenter dt a::after {
content: '';
background: url(/images/common/ftr_tel.png) center center no-repeat;
background-size: cover;
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.footer_contact-callcenter dd {
font-size: 12px;
padding: 0 0 20px;
border-bottom: 1px solid #fff;
}
.bg_black {
background: #3c3c3c;
color: #fff;
padding: 30px 0 20px;
overflow: hidden;
}
.bg_black a {
color: #fff;
}
.bg_black a:hover {
text-decoration: underline;
}
.bg_black .left {
float: left;
width: 803px;
}
.bg_black .left li.box01 {
width: 290px;
float: left;
}
.bg_black .left li.box01 h6 {
font-size: 15px;
margin-bottom: 10px;
font-weight: 400;
}
.bg_black .left li.box01 ul li {
display: inline-block;
padding-right: 10px;
width: 40px;
}
.bg_black .left li.box02 {
width: 215px;
float: left;
}
.bg_black .left li.box03 {
width: 175px;
float: left;
}
.bg_black .left li.box02 ul li,
.bg_black .left li.box03 ul li {
margin-bottom: 8px;
font-size: 14px;
}
.bg_black .right {
float: left;
width: 332px;
}
.bg_black .right ol {
margin-bottom: 5px;
}
.bg_black .right ol li {
background: #fff;
}
.bg_black .right ol li a {
position: relative;
color: #fff;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.bg_black .right ol li.first a {
width: 180px;
height: 50px;
background: #ee8081;
}
.bg_black .right ol li.last a {
width: 150px;
height: 50px;
background: #67b5bf;
}
.bg_black .right ol li.first {
float: left;
}
.bg_black .right ol li.last {
float: right;
}
.bg_black .right ol li.first a:hover,
.bg_black .right ol li.last a:hover {
text-decoration: none;
}
.bg_black .right ol li.first a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon01.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 20px;
height: 28px;
margin-right: 5px;
}
.bg_black .right ol li.last a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon02.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 25px;
height: 28px;
margin-right: 5px;
}
.bg_black .right .addressbox {
background: #fff;
padding: 10px 5px;
color: #000;
}
.bg_black .right .addressbox dt {
text-align: center;
font-size: 14px;
}
.bg_black .right .addressbox dd {
margin: 0 auto;
width: 260px;
}
.bg_black .right .addressbox span {
font-size: 15px;
letter-spacing: -1px;
display: block;
text-align: center;
}
.bg_black .right ul.pc_both {
border-bottom: #fff solid 1px;
padding: 4px 0 4px;
}
.bg_black .right ul.sp_both {
display: none;
}
.bg_black .right ul.pc_both li {
width: 165px;
height: 40px;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
.bg_black .right ul li:first-child {
border-right: #fff solid 1px;
}
.bg_black .right ol li {
line-height: 1.2;
}
.bg_black .right ol li span {
text-align: center;
}
.copybox {
padding: 15px 0;
background: #fff;
}
.copybox .in_sidebox {
text-align: center;
margin-bottom: 5px;
}
.copybox .in_sidebox li {
display: inline-block;
padding: 0 10px;
}
.copybox .in_sidebox li a {
color: #3c3c3c;
font-size: 12px;
}
.copybox .in_sidebox li a:hover {
text-decoration: underline;
}
.copybox address {
text-align: center;
font-size: 8px;
font-style: normal;
} .clone-nav_f {
position: fixed;
bottom: 0;
right: 5%;
z-index: 2;
width: 100%;
transition: .3s;
transform: translateY(0);
}
.is-show_f {
transform: translateY(0);
}
.is-hide,
.is-hide_t {
transform: translateY(100%);
}
.clone-nav_f {
width: 332px;
background: #3c3c3c;
padding: 4px;
}
.clone-nav_f ol {
margin-bottom: 5px;
}
.clone-nav_f ol li a {
position: relative;
color: #fff;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.clone-nav_f ol li.first a {
width: 180px;
height: 50px;
}
.clone-nav_f ol li.last a {
width: 150px;
height: 50px;
}
.clone-nav_f ol li.first {
float: left;
background: #fff;
}
.clone-nav_f ol li.last {
float: right;
background: #fff;
}
.clone-nav_f ol li.first a:hover,
.clone-nav_f ol li.last a:hover {
text-decoration: none;
}
.clone-nav_f ol li.first a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon01.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 20px;
height: 30px;
margin-right: 5px;
}
.clone-nav_f ol li:first-child a {
background: #ee8081;
}
.clone-nav_f ol li:last-child a {
background: #67b5bf;
}
.clone-nav_f ol li.last a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon02.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 25px;
height: 30px;
margin-right: 5px;
}
.clone-nav_f .addressbox {
display: none;
}
.clone-nav_f ul.pc_both {
display: none;
}
.clone-nav_f ul.sp_both {
display: block;
}
.clone-nav_f ul.sp_both li {
width: auto;
padding: 0 15px;
height: 35px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
float: left;
border-right: #fff solid 1px;
}
.clone-nav_f ul.sp_both li a {
color: #fff;
}
.clone-nav_f ul.sp_both li a:hover {
text-decoration: underline;
}
.clone-nav_f ul li:last-child {
border-right: none;
}
.clone-nav_f ol li {
line-height: 1.2;
}
.clone-nav_f ol li span {
text-align: center;
}
.studio-list {
border-top: 1px solid #d9d9d9;
}
#ftr_studio-btn {
display: block;
text-align: center;
padding: 35px 10px;
cursor: pointer;
}
#ftr_studio-btn .ftr_studio-btn_inner {
position: relative;
display: inline-block;
font-size: 16px;
line-height: 1.5;
color: #3C3C3C;
padding: 0 30px;
}
#ftr_studio-btn .ftr_studio-btn_inner::before,
#ftr_studio-btn .ftr_studio-btn_inner::after {
content: '';
width: 13px;
height: 1px;
position: absolute;
background: #3C3C3C;
left: 0;
top: 50%;
transition: all .4s;
}
#ftr_studio-btn .ftr_studio-btn_inner::after {
transform: rotate3d(0, 0, 1, 90deg);
}
#ftr_studio-btn.open .ftr_studio-btn_inner::after {
transform: rotate3d(0, 0, 0, 0);
}
.studio-list_inner {
display: none;
padding: 0 0 20px;
}
.studio-list_box {
max-width: 1140px;
margin: 0 auto;
}
.studio-list_box .studio-list_area {
padding: 15px 0;
font-weight: bold;
border-bottom: 1px solid #d9d9d9;
}
.studio-list_box .studio-list_shop-list {
padding: 7px 0;
}
.studio-list_shop {
display: flex;
flex-wrap: wrap;
}
.studio-list_shop li {
width: calc(100% / 5);
}
.studio-list_shop li a {
display: block;
font-size: 14px;
line-height: 1.5;
padding: 8px 0;
color: #3C3C3C;
}
.studio-list_shop li a:hover .studio-list_link::after {
width: 100%;
}
.studio-list_shop li .studio-list_link {
display: inline-block;
position: relative;
}
.studio-list_shop li .studio-list_link::after {
content: '';
width: 0;
height: 1px;
background: #3C3C3C;
position: absolute;
left: 0;
bottom: 0;
transition: all .4s;
} .fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fs-14 {
font-size: 14px;
line-height: 30px;
}
.fs-15 {
font-size: 15px;
line-height: 30px;
}
.fs-16 {
font-size: 16px;
line-height: 32px;
}
.fs-18 {
font-size: 18px;
line-height: 32px;
}
.fs-20 {
font-size: 20px;
line-height: 35px;
}
.fs-24 {
font-size: 24px;
line-height: 44px;
}
.txt-center {
text-align: center !important;
}
.txt-left {
text-align: left;
}
.txt-right {
text-align: right;
}
.m-b5 {
margin-bottom: 5px !important;
}
.m-b10 {
margin-bottom: 10px !important;
}
.m-b15 {
margin-bottom: 15px !important;
}
.m-b20 {
margin-bottom: 20px !important;
}
.m-b25 {
margin-bottom: 25px !important;
}
.m-b30 {
margin-bottom: 30px !important;
}
.m-b35 {
margin-bottom: 35px !important;
}
.m-b40 {
margin-bottom: 40px !important;
}
.m-b45 {
margin-bottom: 45px !important;
}
.m-b50 {
margin-bottom: 50px !important;
}
.m-b55 {
margin-bottom: 55px !important;
}
.m-b60 {
margin-bottom: 60px !important;
}
p img {
text-align: center;
margin: 0 auto; }
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w70 {
width: 70%;
}
.w77 {
width: 77%;
}
.w80 {
width: 80%;
}
.w85 {
width: 85%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.pc-none {
display: none;
}
.sp-none {
display: block;
}
.fw-bold {
font-weight: bold;
}
.fw-500 {
font-weight: 500;
}
.m-b5 {
margin-bottom: 5px !important;
}
.m-b10 {
margin-bottom: 10px !important;
}
.m-b15 {
margin-bottom: 15px !important;
}
.m-b20 {
margin-bottom: 20px !important;
}
.m-b25 {
margin-bottom: 25px !important;
}
.m-b30 {
margin-bottom: 30px !important;
}
.m-b35 {
margin-bottom: 35px !important;
}
.m-b40 {
margin-bottom: 40px !important;
}
.m-b45 {
margin-bottom: 45px !important;
}
.m-b50 {
margin-bottom: 50px !important;
}
.m-b55 {
margin-bottom: 55px !important;
}
.m-b60 {
margin-bottom: 60px !important;
} .before_border {
font-size: 14px;
display: none;
position: relative;
text-align: center;
padding-left: 75px;
height: 45px;
margin: 20px 0 40px;
line-height: 15px;
overflow: hidden;
opacity: 0;
}
.before_border::before {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 260px;
position: absolute;
top: -110px;
left: 50%;
-webkit-animation: scroll-line_ty03 5.5s infinite;
animation: scroll-line_ty03 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_handrail dl dt {
padding: 0 0 35px;
}
#com_cv_banner {
margin-bottom: 50px;
} .acod-int {
margin-bottom: 20px;
background: #fff;
border: #eaeaea 1px solid;
}
.accordion_icon_sp {
display: none;
}
.accordion_icon,
.accordion_icon span,
.accordion_icon-up,
.accordion_icon-up span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon,
.accordion_icon-up {
position: absolute;
width: 30px;
height: 30px;
float: right;
margin-right: 5px;
right: 3%;
}
.accordion_icon span,
.accordion_icon-up span {
position: absolute;
left: 7px;
width: 100%;
height: 2px;
background-color: #000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1),
.accordion_icon-up span:nth-of-type(1) {
top: 14px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 14px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.acod {
padding: 20px;
font-size: 20px;
line-height: 35px;
font-weight: bold;
cursor: pointer;
}
.acod.active .accordion_icon span:nth-of-type(1) {
display: none;
}
.acod.active .accordion_icon span:nth-of-type(2) {
top: 13px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.acod-in {
display: none;
padding: 0 15px 0 15px;
}
.acod-in .prisec-list {
border-bottom: #f0f0f0 solid 1px;
overflow: hidden;
padding-bottom: 20px;
margin-bottom: 20px;
}
.acod-in .prisec-list dt {
float: left;
max-width: 800px;
}
.acod-in .prisec-list dt::before {
content: "・";
display: block;
float: left;
font-size: 20px;
vertical-align: -1px;
color: #000;
padding: 0 10px 0 20px;
}
.acod-in .prisec-list dt span {
display: table;
}
.acod-in .prisec-list dd {
float: right;
padding-right: 20px;
} #workshop div.btn {
background: #ffb40a;
}
#workshop div.btn a {
box-shadow: none;
-webkit-box-shadow: none;
}
#workshop div.btn a {
margin-bottom: 0;
} .common-slide .slick-slide {
margin: 0 35px;
}
.common-slide .slick-prev,
.common-slide .slick-next {
top: 44%;
width: 22px;
height: 43px;
}
.common-slide .slick-prev {
left: 230px;
}
.common-slide .slick-next {
right: 228px;
}
.common-slide .slick-dots {
position: static;
margin: 20px 0 30px;
}
.common-slide .slick-dots li {
margin: 0 10px;
} .tabs {
display: flex;
justify-content: center;
}
.tab {
flex-grow: 1;
padding: 12px 0;
font-size: 18px;
font-weight: bold;
list-style: none;
text-align: center;
cursor: pointer;
}
.panel {
display: none;
}
.tab.is-active {
color: #fff;
background: #3c3c3c;
transition: all 0.2s ease-out;
}
.panel.is-show {
display: block;
}
.outside-icon::after {
content: '';
background: url(/images/common/outside-icon.png) no-repeat;
display: inline-block;
width: 13px;
height: 13px;
background-size: contain;
}/*/*//**//*/*//**//*/*//**//*/*//**/body.compensate-for-scrollbar {
overflow: hidden;
}
.fancybox-active {
height: auto;
}
.fancybox-is-hidden {
left: -9999px;
margin: 0;
position: absolute !important;
top: -9999px;
visibility: hidden;
}
.fancybox-container {
-webkit-backface-visibility: hidden;
height: 100%;
left: 0;
outline: none;
position: fixed;
-webkit-tap-highlight-color: transparent;
top: 0;
-ms-touch-action: manipulation;
touch-action: manipulation;
transform: translateZ(0);
width: 100%;
z-index: 99992;
}
.fancybox-container * {
box-sizing: border-box;
}
.fancybox-outer,
.fancybox-inner,
.fancybox-bg,
.fancybox-stage {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.fancybox-outer {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
.fancybox-bg {
background: #1e1e1e;
opacity: 0;
transition-duration: inherit;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
}
.fancybox-is-open .fancybox-bg {
opacity: .9;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fancybox-infobar,
.fancybox-toolbar,
.fancybox-caption,
.fancybox-navigation .fancybox-button {
direction: ltr;
opacity: 0;
position: absolute;
transition: opacity .25s ease, visibility 0s ease .25s;
visibility: hidden;
z-index: 99997;
}
.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-toolbar .fancybox-toolbar,
.fancybox-show-caption .fancybox-caption,
.fancybox-show-nav .fancybox-navigation .fancybox-button {
opacity: 1;
transition: opacity .25s ease 0s, visibility 0s ease 0s;
visibility: visible;
}
.fancybox-infobar {
color: #ccc;
font-size: 13px;
-webkit-font-smoothing: subpixel-antialiased;
height: 44px;
left: 0;
line-height: 44px;
min-width: 44px;
mix-blend-mode: difference;
padding: 0 10px;
pointer-events: none;
top: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fancybox-toolbar {
right: 0;
top: 0;
}
.fancybox-stage {
direction: ltr;
overflow: visible;
transform: translateZ(0);
z-index: 99994;
}
.fancybox-is-open .fancybox-stage {
overflow: hidden;
}
.fancybox-slide {
-webkit-backface-visibility: hidden; display: none;
height: 100%;
left: 0;
outline: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 44px;
position: absolute;
text-align: center;
top: 0;
transition-property: transform, opacity;
white-space: normal;
width: 100%;
z-index: 99994;
}
.fancybox-slide::before {
content: '';
display: inline-block;
font-size: 0;
height: 100%;
vertical-align: middle;
width: 0;
}
.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--previous,
.fancybox-slide--current,
.fancybox-slide--next {
display: block;
}
.fancybox-slide--image {
overflow: hidden;
padding: 44px 0;
}
.fancybox-slide--image::before {
display: none;
}
.fancybox-slide--html {
padding: 6px;
}
.fancybox-content {
background: #fff;
display: inline-block;
margin: 0;
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 44px;
position: relative;
text-align: left;
vertical-align: middle;
}
.fancybox-slide--image .fancybox-content {
animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
-webkit-backface-visibility: hidden;
background: transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
left: 0;
max-width: none;
overflow: visible;
padding: 0;
position: absolute;
top: 0;
-ms-transform-origin: top left;
transform-origin: top left;
transition-property: transform, opacity;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 99995;
}
.fancybox-can-zoomOut .fancybox-content {
cursor: zoom-out;
}
.fancybox-can-zoomIn .fancybox-content {
cursor: zoom-in;
}
.fancybox-can-swipe .fancybox-content,
.fancybox-can-pan .fancybox-content {
cursor: -webkit-grab;
cursor: grab;
}
.fancybox-is-grabbing .fancybox-content {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.fancybox-container [data-selectable='true'] {
cursor: text;
}
.fancybox-image,
.fancybox-spaceball {
background: transparent;
border: 0;
height: 100%;
left: 0;
margin: 0;
max-height: none;
max-width: none;
padding: 0;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
}
.fancybox-spaceball {
z-index: 1;
}
.fancybox-slide--video .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--pdf .fancybox-content,
.fancybox-slide--iframe .fancybox-content {
height: 100%;
overflow: visible;
padding: 0;
width: 100%;
}
.fancybox-slide--video .fancybox-content {
background: #000;
}
.fancybox-slide--map .fancybox-content {
background: #e5e3df;
}
.fancybox-slide--iframe .fancybox-content {
background: #fff;
}
.fancybox-video,
.fancybox-iframe {
background: transparent;
border: 0;
display: block;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
} .fancybox-iframe {
left: 0;
position: absolute;
top: 0;
}
.fancybox-error {
background: #fff;
cursor: default;
max-width: 400px;
padding: 40px;
width: 100%;
}
.fancybox-error p {
color: #444;
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 0;
} .fancybox-button {
background: rgba(30, 30, 30, 0.6);
border: 0;
border-radius: 0;
box-shadow: none;
cursor: pointer;
display: inline-block;
height: 44px;
margin: 0;
padding: 10px;
position: relative;
transition: color .2s;
vertical-align: top;
visibility: inherit;
width: 44px;
}
.fancybox-button,
.fancybox-button:visited,
.fancybox-button:link {
color: #ccc;
}
.fancybox-button:hover {
color: #fff;
}
.fancybox-button:focus {
outline: none;
}
.fancybox-button.fancybox-focus {
outline: 1px dotted;
}
.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
color: #888;
cursor: default;
outline: none;
} .fancybox-button div {
height: 100%;
}
.fancybox-button svg {
display: block;
height: 100%;
overflow: visible;
position: relative;
width: 100%;
}
.fancybox-button svg path {
fill: currentColor;
stroke-width: 0;
}
.fancybox-button--play svg:nth-child(2),
.fancybox-button--fsenter svg:nth-child(2) {
display: none;
}
.fancybox-button--pause svg:nth-child(1),
.fancybox-button--fsexit svg:nth-child(1) {
display: none;
}
.fancybox-progress {
background: #ff5268;
height: 2px;
left: 0;
position: absolute;
right: 0;
top: 0;
-ms-transform: scaleX(0);
transform: scaleX(0);
-ms-transform-origin: 0;
transform-origin: 0;
transition-property: transform;
transition-timing-function: linear;
z-index: 99998;
} .fancybox-close-small {
background: transparent;
border: 0;
border-radius: 0;
color: #ccc;
cursor: pointer;
opacity: .8;
padding: 8px;
position: absolute;
right: -12px;
top: -44px;
z-index: 401;
}
.fancybox-close-small:hover {
color: #fff;
opacity: 1;
}
.fancybox-slide--html .fancybox-close-small {
color: currentColor;
padding: 10px;
right: 0;
top: 0;
}
.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
overflow: hidden;
}
.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
display: none;
} .fancybox-navigation .fancybox-button {
background-clip: content-box;
height: 100px;
opacity: 0;
position: absolute;
top: calc(50% - 50px);
width: 70px;
}
.fancybox-navigation .fancybox-button div {
padding: 7px;
}
.fancybox-navigation .fancybox-button--arrow_left {
left: 0;
left: env(safe-area-inset-left);
padding: 31px 26px 31px 6px;
}
.fancybox-navigation .fancybox-button--arrow_right {
padding: 31px 6px 31px 26px;
right: 0;
right: env(safe-area-inset-right);
} .fancybox-caption {
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, rgba(0, 0, 0, 0) 100%);
bottom: 0;
color: #eee;
font-size: 14px;
font-weight: 400;
left: 0;
line-height: 1.5;
padding: 75px 44px 25px 44px;
pointer-events: none;
right: 0;
text-align: center;
z-index: 99996;
}
.fancybox-caption--separate {
margin-top: -50px;
}
.fancybox-caption__body {
max-height: 50vh;
overflow: auto;
pointer-events: all;
}
.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited {
color: #ccc;
text-decoration: none;
}
.fancybox-caption a:hover {
color: #fff;
text-decoration: underline;
} .fancybox-loading {
animation: fancybox-rotate 1s linear infinite;
background: transparent;
border: 4px solid #888;
border-bottom-color: #fff;
border-radius: 50%;
height: 50px;
left: 50%;
margin: -25px 0 0 -25px;
opacity: .7;
padding: 0;
position: absolute;
top: 50%;
width: 50px;
z-index: 99999;
} .fancybox-animated {
transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
} .fancybox-fx-slide.fancybox-slide--previous {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.fancybox-fx-slide.fancybox-slide--next {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.fancybox-fx-slide.fancybox-slide--current {
opacity: 1;
transform: translate3d(0, 0, 0);
} .fancybox-fx-fade.fancybox-slide--previous,
.fancybox-fx-fade.fancybox-slide--next {
opacity: 0;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.fancybox-fx-fade.fancybox-slide--current {
opacity: 1;
} .fancybox-fx-zoom-in-out.fancybox-slide--previous {
opacity: 0;
transform: scale3d(1.5, 1.5, 1.5);
}
.fancybox-fx-zoom-in-out.fancybox-slide--next {
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
}
.fancybox-fx-zoom-in-out.fancybox-slide--current {
opacity: 1;
transform: scale3d(1, 1, 1);
} .fancybox-fx-rotate.fancybox-slide--previous {
opacity: 0;
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.fancybox-fx-rotate.fancybox-slide--next {
opacity: 0;
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.fancybox-fx-rotate.fancybox-slide--current {
opacity: 1;
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} .fancybox-fx-circular.fancybox-slide--previous {
opacity: 0;
transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
}
.fancybox-fx-circular.fancybox-slide--next {
opacity: 0;
transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
}
.fancybox-fx-circular.fancybox-slide--current {
opacity: 1;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
} .fancybox-fx-tube.fancybox-slide--previous {
transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
}
.fancybox-fx-tube.fancybox-slide--next {
transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
}
.fancybox-fx-tube.fancybox-slide--current {
transform: translate3d(0, 0, 0) scale(1);
}  .fancybox-share {
background: #f4f4f4;
border-radius: 3px;
max-width: 90%;
padding: 30px;
text-align: center;
}
.fancybox-share h1 {
color: #222;
font-size: 35px;
font-weight: 700;
margin: 0 0 20px 0;
}
.fancybox-share p {
margin: 0;
padding: 0;
}
.fancybox-share__button {
border: 0;
border-radius: 3px;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 40px;
margin: 0 5px 10px 5px;
min-width: 130px;
padding: 0 15px;
text-decoration: none;
transition: all .2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.fancybox-share__button:visited,
.fancybox-share__button:link {
color: #fff;
}
.fancybox-share__button:hover {
text-decoration: none;
}
.fancybox-share__button--fb {
background: #3b5998;
}
.fancybox-share__button--fb:hover {
background: #344e86;
}
.fancybox-share__button--pt {
background: #bd081d;
}
.fancybox-share__button--pt:hover {
background: #aa0719;
}
.fancybox-share__button--tw {
background: #1da1f2;
}
.fancybox-share__button--tw:hover {
background: #0d95e8;
}
.fancybox-share__button svg {
height: 25px;
margin-right: 7px;
position: relative;
top: -1px;
vertical-align: middle;
width: 25px;
}
.fancybox-share__button svg path {
fill: #fff;
}
.fancybox-share__input {
background: transparent;
border: 0;
border-bottom: 1px solid #d7d7d7;
border-radius: 0;
color: #5d5b5b;
font-size: 14px;
margin: 10px 0 0 0;
outline: none;
padding: 10px 15px;
width: 100%;
} .fancybox-thumbs {
background: #ddd;
bottom: 0;
display: none;
margin: 0;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding: 2px 2px 4px 2px;
position: absolute;
right: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
width: 212px;
z-index: 99995;
}
.fancybox-thumbs-x {
overflow-x: auto;
overflow-y: hidden;
}
.fancybox-show-thumbs .fancybox-thumbs {
display: block;
}
.fancybox-show-thumbs .fancybox-inner {
right: 212px;
}
.fancybox-thumbs__list {
font-size: 0;
height: 100%;
list-style: none;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
position: absolute;
position: relative;
white-space: nowrap;
width: 100%;
}
.fancybox-thumbs-x .fancybox-thumbs__list {
overflow: hidden;
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
width: 7px;
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
background: #2a2a2a;
border-radius: 10px;
}
.fancybox-thumbs__list a {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: rgba(0, 0, 0, 0.1);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
float: left;
height: 75px;
margin: 2px;
max-height: calc(100% - 8px);
max-width: calc(50% - 4px);
outline: none;
overflow: hidden;
padding: 0;
position: relative;
-webkit-tap-highlight-color: transparent;
width: 100px;
}
.fancybox-thumbs__list a::before {
border: 6px solid #ff5268;
bottom: 0;
content: '';
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 99991;
}
.fancybox-thumbs__list a:focus::before {
opacity: .5;
}
.fancybox-thumbs__list a.fancybox-thumbs-active::before {
opacity: 1;
}  .title_border {
text-align: center;
padding: 0 0 60px;
}
.title_border-inner {
display: inline-block;
font-family: yu-mincho-pr6, sans-serif;
font-weight: 500;
font-size: 26px;
line-height: 1.6;
text-align: center;
padding: 25px 0;
border-top: 1px solid #3C3C3C;
border-bottom: 1px solid #3C3C3C;
min-width: 400px;
} .title_pagetitle {
text-align: center;
padding: 30px 0 50px;
}
.title_pagetitle-main {
font-size: 24px;
line-height: 1.6;
text-align: center;
}
.title_pagetitle-sub {
font-size: 20px;
line-height: 1.6;
text-align: center;
color: #ED8080;
}
.title_pagetitle-sub.green {
color: #67b5bf;
} .title_underline {
font-size: 20px;
line-height: 1.2;
text-align: center;
margin: 0 0 25px;
}
.title_underline .title_underline-inner {
display: inline-block;
padding: 0 0 10px;
border-bottom: 2px solid #ED8080;
} .title_band {
font-size: 20px;
line-height: 1.75;
text-align: center;
padding: 20px 0;
border-top: 1px solid #3C3C3C;
border-bottom: 1px solid #3C3C3C;
font-weight: 700;
} .title_bar {
margin: 0 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: #ED8080;
color: #fff;
}
.title_bar .title_bar-ja {
padding: 10px 20px;
font-size: 20px;
line-height: 1.2;
}
.title_bar .title_bar-en {
padding: 10px 20px;
font-size: 16px;
line-height: 1.2;
color: #f4acad;
} .link_backarchive {
padding: 60px 0;
text-align: center;
}
.link_backarchive a {
display: inline-block;
text-align: center;
color: #3C3C3C;
padding: 0 0 35px;
font-size: 15px;
line-height: 1.6;
background: url(/images/common/lnk_backarchive.png) center bottom no-repeat;
}
.link_backarchive a:hover {
opacity: .8;
} .link_text-arw {
display: inline-block;
position: relative;
padding: 0 0 0 1em;
color: #3C3C3C;
line-height: 1.1;
}
.link_text-arw:hover {
color: #ee8081;
}
.link_text-arw:hover::before {
background: #ee8081;
}
.link_text-arw:hover::after {
color: #ee8081;
}
.link_text-arw::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
width: 100%;
height: 1px;
background: #3C3C3C;
transition: all .2s;
}
.link_text-arw::after {
content: '>';
position: absolute;
left: 0;
top: 50%;
transform: translate3d(0, -50%, 0);
} .lst_linkarw li {
border-bottom: 1px solid #F0F0F0;
}
.lst_linkarw li a {
display: block;
font-size: 18px;
line-height: 1.8;
padding: 15px 30px 15px 15px;
color: #3C3C3C;
position: relative;
}
.lst_linkarw li a::before {
content: '';
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 1px;
background: #ED8080;
transition: all .3s;
}
.lst_linkarw li a:hover {
color: #ED8080;
}
.lst_linkarw li a:hover::before {
width: 100%;
transition: all .7s;
}
.lst_linkarw li a::after {
content: '';
display: block;
width: 12px;
height: 13px;
background: url(/images/common/lst_linkarw_black.svg) center center no-repeat;
background-size: cover;
position: absolute;
right: 10px;
top: 50%;
transform: translate3d(0, -50%, 0);
} .form-style input[type="text"],
.form-style input[type="tel"],
.form-style input[type="email"],
.form-style input[type="date"],
.form-style input[type="number"],
.form-style textarea {
display: inline-block;
width: 100%;
color: #3C3C3C;
padding: 10px;
font-size: 16px;
line-height: 1.7;
background: #FFF;
border: 1px solid #D0D0D0;
outline: none;
box-sizing: border-box;
}
.form-style input[type="text"]:focus,
.form-style input[type="tel"]:focus,
.form-style input[type="email"]:focus,
.form-style input[type="date"]:focus,
.form-style input[type="number"]:focus,
.form-style textarea:focus {
border-color: #ED8080;
}
.form-style.small input[type="text"],
.form-style.small input[type="tel"],
.form-style.small input[type="email"],
.form-style.small input[type="date"],
.form-style.small input[type="number"],
.form-style.small textarea {
display: inline-block;
width: 43%;
}
.form-style textarea {
min-height: 130px;
}
.form-style_select {
position: relative;
display: inline-block;
background: #FFF;
min-width: 43%;
box-sizing: border-box;
}
.form-style_select select {
width: 100%;
display: inline-block;
min-width: 43%;
color: #3C3C3C;
box-sizing: border-box;
padding: 10px 40px 10px 10px;
font-size: 16px;
line-height: 1.7;
background: #FFF;
border: 1px solid #D0D0D0;
outline: none;
outline: none;
text-overflow: '';
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
position: relative;
z-index: 1;
}
.form-style_select select:focus {
border-color: #ED8080;
}
.form-style_select select option {
font-size: 16px;
line-height: 2;
color: #3C3C3C;
}
.form-style_select::after {
content: '';
border-width: 12px 7px 0 7px;
border-style: solid;
border-color: #3C3C3C transparent transparent transparent;
position: absolute;
right: 10px;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 0;
transition: all .3s;
}
.form-style_radio label {
position: relative;
display: inline-block;
box-sizing: border-box;
margin: 5px 10px 5px 0;
padding: 5px 0 5px 35px;
font-size: 16px;
cursor: pointer;
box-sizing: border-box;
}
.form-style_radio label input {
opacity: 0;
position: absolute;
}
.form-style_radio label::before {
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
border: 1px solid #D0D0D0;
position: absolute;
font-size: 0;
left: 0;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.form-style_radio label::after {
border-color: #bad856;
}
.form-style_radio label:hover::after,
.form-style_radio label.checked::after {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: #B2B2B2;
position: absolute;
font-size: 0;
left: 7px;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.form-style_radio label.checked::after {
background: #767676;
}
.form-style_checkbox label {
position: relative;
display: inline-block;
box-sizing: border-box;
margin: 5px 10px 5px 0;
padding: 5px 0 5px 35px;
font-size: 16px;
cursor: pointer;
box-sizing: border-box;
}
.form-style_checkbox label input {
opacity: 0;
position: absolute;
}
.form-style_checkbox label::before {
content: '';
width: 24px;
height: 24px;
border-radius: 4px;
background: #fff;
border: 1px solid #D0D0D0;
position: absolute;
font-size: 0;
left: 0;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.form-style_checkbox label:hover::after,
.form-style_checkbox label.checked::after {
content: '';
width: 16px;
height: 16px;
border-radius: 3px;
background: url(/images/common/checkbox_arw_gray.png) center center no-repeat;
background-size: cover;
position: absolute;
font-size: 0;
left: 5px;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.form-style_checkbox label.checked::after {
background-image: url(/images/common/checkbox_arw_pink.png);
}
.form-style_btn {
max-width: 300px;
margin: 0 auto;
background: #ee8081;
position: relative;
}
.form-style_btn input {
width: 100%;
display: block;
position: relative;
box-sizing: border-box;
font-size: 18px;
height: 50px;
color: #fff;
border: none;
background: none;
box-shadow: 4px 4px #f5bfbf;
-ms-box-shadow: 4px 4px #f5bfbf;
-webkit-box-shadow: 4px 4px #f5bfbf;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
margin: 0 auto;
cursor: pointer;
outline: none;
letter-spacing: .1em;
appearance: none;
}
.form-style_btn.green {
background: #67b5bf;
}
.form-style_btn.green input {
box-shadow: 4px 4px #b2dbdf;
-ms-box-shadow: 4px 4px #b2dbdf;
-webkit-box-shadow: 4px 4px #b2dbdf;
}
.form-style_btn::after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
right: 50%;
color: #fff;
z-index: 1;
width: 10px;
height: 12px;
background: url(/images/common/lst_linkarw_white.svg) center center no-repeat;
background-size: cover;
transform: translate3d(6.5em, -50%, 0);
}
.form-style_btn.text_2em::after {
transform: translate3d(2.5em, -50%, 0);
}
.form-style_btn.text_3em::after {
transform: translate3d(3.5em, -50%, 0);
}
.form-style_btn.text_4em::after {
transform: translate3d(4.5em, -50%, 0);
}
.form-style_btn.text_5em::after {
transform: translate3d(5.5em, -50%, 0);
}
.form-style_btn.text_6em::after {
transform: translate3d(6.5em, -50%, 0);
}
.form-style_btn.text_7em::after {
transform: translate3d(7.5em, -50%, 0);
}
.form-style_btn.text_8em::after {
transform: translate3d(8.5em, -50%, 0);
}
.form-style_btn.text_none::after {
display: none;
}
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop,
html {
font-family: Arial, Helvetica, "Hiragino Kaku Gothic Pro", "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
}
*::-ms-backdrop,
main {
display: block;
}
*::-ms-backdrop,
.reinb {
font-family: schoolbook;
font-style: italic;
font-size: 13px;
background: #fff;
color: #000;
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
header .inner {
position: relative;
}
header .logo {
margin-left: 10px;
width: 130px;
}
header h1 {
margin-left: 160px;
}
header nav ol {
margin-right: 10px;
}
header .h_reservbtnbox {
margin-right: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
body {
min-width: 1140px;
}
}
@media screen and (max-width: 767px) { .under-pagettlbox {
padding-bottom: 10vw;
}
#program .under-pagettlbox{
padding-bottom: 10px;
}
.under-pagettlbox .emphasis {
font-size: 4.5vw;
line-height: 7vw;
margin-bottom: 5vw;
letter-spacing: 1px;
font-weight: bold;
}
.under-pagettlbox .description {
font-size: 3.8vw;
line-height: 7vw;
letter-spacing: 0;
margin-bottom: 1.5vw;
}
.under-pagettlbox .description span {
display: block;
}
.under-pagettlbox .img_illustration {
margin-bottom: 1.5vw;
}
#pankuz {
display: none;
}
main,
main.under_page {
margin-top: 50px;
}
main.under_page {
padding-top: 35px;
}
#under-mvbox {
margin-bottom: 10%;
overflow: hidden;
}
#under-mvbox dt {
float: none;
width: 100%;
height: auto;
}
#under-mvbox dd {
float: none;
width: 100%;
height: auto;
text-align: center;
padding: 4% 0;
}
#under-mvbox h1 strong {
font-size: 5vw;
margin-bottom: 0;
}
#under-mvbox h1 span {
font-size: 3.5vw;
line-height: 4.5vw;
} .clone-nav_h nav ol,
.clone-nav_h .h_telbox {
position: static;
}
.clone-nav_h .h_telbox dt {
float: none;
font-size: 4vw;
line-height: 6vw;
}
.clone-nav_h .h_telbox dd {
margin: 0 auto;
width: 80%;
}
header {
width: 100%;
height: 50px !important;
background: #fff;
z-index: 9998;
position: fixed;
top: 0;
box-shadow: 0 0 3px #c5c4c4;
-ms-box-shadow: 0 0 3px #c5c4c4;
-webkit-box-shadow: 0 0 3px #c5c4c4;
}
header .logo {
display: none;
}
header h1 {
display: none;
}
header .sc_logo,
header .h-no-trans .sc_logo {
display: none;
top: 20% !important;
position: absolute;
left: 3% !important; z-index: 9999;
width: 80px !important;
}
.sc_logo,
.h_telbox {
display: block;
}
header nav ol {
position: static;
margin: 50px auto 0;
padding: 4vw 4vw 0;
display: block;
border: none;
}
header nav ol li a {
color: #000;
display: block;
padding: 0;
text-align: center;
font-size: 4vw;
}
header nav ol li {
display: block;
border: none;
border-bottom: 1px solid #000;
}
header nav ol li.sp_only {
display: block;
}
header nav ol li>a,
.clone-nav_h nav ol li a {
display: block;
padding: 4vw 0;
text-align: left;
line-height: 3.5vw;
}
header nav ol li:last-child {
margin: 0;
}
header nav ol li.nav_pcNone {
display: block;
}
header .h_reservbtnbox {
display: none;
}
header .h_telbox {
width: 80%;
padding: 3vw 2vw;
margin: 0 auto;
text-align: center;
border-top: #3c3c3c solid 1px;
border-bottom: #3c3c3c solid 1px;
}
header .h_telbox dt {
text-align: center;
margin-bottom: 1.5vw;
}
header .h_telbox dd {
width: 80%;
margin: 0 auto;
}
header nav ol li .navisub {
position: relative;
left: auto;
top: auto;
transform: none;
padding: 0;
opacity: 1;
max-height: inherit;
max-height: auto;
min-width: inherit;
min-width: auto;
display: none;
transition: none;
}
header nav ol li:hover .navisub {
transform: none;
max-height: auto;
transform: none;
padding: 0;
}
header nav ol li .navisub_inner {
display: block;
background: none;
padding: 0 4vw 4vw;
position: relative;
top: auto;
left: 0;
transform: none;
min-width: auto;
}
header nav ol li .navisub_inner::after {
display: none;
}
header nav ol li .navisub_inner dt {
display: none;
}
header nav ol li .navisub_inner dd a {
display: block;
font-size: 4vw;
color: #000;
padding: 2.5vw 0;
text-align: left;
}
header nav ol li .navisub_inner dd a:hover {
text-decoration: underline;
}
.sub-open-btn {
display: block;
cursor: pointer;
position: absolute;
width: 10vw;
height: 10vw;
right: 0;
top: 6vw;
transform: translate3d(0, -50%, 0);
}
.sub-open-btn::before,
.sub-open-btn::after {
content: '';
width: 4vw;
height: 1px;
position: absolute;
right: 0;
top: 5vw;
background: #000;
transition: .4s;
transform: translate3d(-50%, 0, 0);
}
.sub-open-btn::after {
transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, 90deg);
}
.sub-open-btn.is-open::after {
transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, 0);
}
#footer_navi {
flex-wrap: wrap;
flex-direction: column-reverse;
}
#footer_sns {
width: 100%;
padding: 5vw 0 0;
}
#footer_sns dt {
font-size: 5vw;
margin: 0 0 3vw;
text-align: center;
font-weight: 100;
}
#footer_sns .footer_sns-list {
justify-content: center;
}
#footer_sns .footer_sns-list li {
width: 14%;
margin: 0 2.5%;
}
#footer_sitemap {
width: 100%;
padding: 0;
}
#footer_sitemap .footer_sitemap-list {
width: 50%;
}
#footer_sitemap .footer_sitemap-list li {
padding: 0;
margin: 0 0 1.5vw;
}
#footer_sitemap .footer_sitemap-list li a {
font-size: 3.5vw;
}
#footer_sitemap .footer_sitemap-list .footer_sitemap-list_sub a {
font-size: 3vw;
font-weight: 400;
}
#footer_contact {
display: none;
} .bg_black {
padding: 5% 5% 7% 5%;
}
.bg_black a:hover {
text-decoration: none;
}
.bg_black .left {
float: none;
width: 100%;
margin-bottom: 8%;
}
li.box01 {
width: 100%;
float: left;
list-style: none;
}
li.box01 h6 {
font-size: 5vw;
text-align: center;
margin-bottom: 3vw;
font-weight: 100;
}
li.box01 ul {
text-align: center;
}
li.box01 ul li {
display: inline-block;
padding: 0 2.5% 0;
width: 14%;
}
.bg_black .left li.box02 {
width: 50%;
float: left;
}
.bg_black .left li.box03 {
width: 50%;
float: right;
}
.bg_black .left li.box02 ul li,
.bg_black .left li.box03 ul li {
margin-bottom: 2vw;
font-size: 3.5vw;
}
.bg_black .right {
display: none;
}
.copybox {
padding: 2% 0;
}
.copybox .in_sidebox {
margin-bottom: 1%;
}
.copybox .in_sidebox li {
display: inline-block;
padding: 0 2%;
}
.copybox .in_sidebox li a {
color: #000;
font-size: 3.5vw;
line-height: 4vw;
}
.copybox .in_sidebox li a:hover {
text-decoration: none;
}
.copybox address {
font-size: 2.5vw;
} .top .clone-nav_f {
z-index: 1;
}
.clone-nav_f {
bottom: 0;
right: 0;
width: 100%;
}
.clone-nav_f {
width: 98%;
background: #3c3c3c;
padding: 1%;
z-index: 100;
}
.clone-nav_f ol {
margin-bottom: 0;
}
.clone-nav_f ol li a {
position: relative;
color: #fff;
font-size: 3.5vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.clone-nav_f ol li.first a {
width: auto;
height: 50px;
}
.clone-nav_f ol li.last a {
width: auto;
height: 50px;
}
.clone-nav_f ol li.first {
float: left;
background: #fff;
width: 58%;
}
.clone-nav_f ol li.last {
float: right;
background: #fff;
width: 41%;
}
.clone-nav_f ol li.first a:hover,
.clone-nav_f ol li.last a:hover {
text-decoration: none;
}
.clone-nav_f ol li.first a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon01.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 20px;
height: 30px;
margin-right: 5px;
}
.clone-nav_f ol li.last a::before {
content: " ";
display: inline-block;
background: url(/images/common/btn-icon02.png) no-repeat;
background-size: 100%;
vertical-align: middle;
width: 25px;
height: 30px;
margin-right: 5px;
}
.clone-nav_f .addressbox {
display: none;
}
.clone-nav_f ul.pc_both {
display: none;
}
.clone-nav_f ul.sp_both {
display: none;
}
.clone-nav_f ul.sp_both li {
width: auto;
padding: 0 15px;
height: 35px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
float: left;
border-right: #fff solid 1px;
}
.clone-nav_f ul.sp_both li a {
color: #fff;
}
.clone-nav_f ul.sp_both li a:hover {
text-decoration: underline;
}
.clone-nav_f ul li:last-child {
border-right: none;
}
#ftr-studio-list {
display: none;
}
.m-b20 {
margin-bottom: 4% !important;
}
.m-b25 {
margin-bottom: 4.5% !important;
}
.m-b30 {
margin-bottom: 7.5% !important;
}
.m-b50 {
margin-bottom: 7.5% !important;
}
.fs-16 {
font-size: 4.1vw;
line-height: 7.3vw;
}
.fs-18 {
font-size: 2.6vh;
line-height: 3.5vh;
}
.fs-20 {
font-size: 2.9vh;
line-height: 4.6vh;
}
.fs-24 {
font-size: 4.7vw;
line-height: 8vw;
}
.pc-none {
display: block;
}
.sp-none {
display: none;
}
.p-top75 {
padding-top: 10%;
}
.m-auto-38 {
margin: -38px auto 0;
}
.m-auto-35 {
margin: -35px auto 0;
}
.fw-bold-sp {
font-weight: bold;
} #contents_handrail {
width: 100%;
margin: 0 auto;
}
.before_border {
padding-left: 65px;
height: 45px;
margin: 0;
}
.before_border::before {
height: 105px;
top: -30px;
width: 1px;
-webkit-animation: scroll-line_ty07 5.5s infinite;
animation: scroll-line_ty07 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.before_border .reinb {
display: none;
}
.handrailbox {
padding: 11% 0 8%;
margin-top: -15px;
}
.handrailbox>dt {
display: none;
}
.handrailbox>dd {
margin-left: 0;
position: relative;
}
.onecoin_icon_box {
margin-bottom: 5%;
padding: 0 0 0 8%;
background: url(/images/top/beginner_img01.jpg) no-repeat;
background-size: 55%;
background-position: top right;
}
.onecoin_icon_box span.def-min img {
width: 80%;
}
.onecoin_icon_box span {
display: block;
margin-right: 0;
text-align: center;
width: 34%;
margin-bottom: 3%;
}
.begi_txt {
width: 88%;
margin: 0 auto;
}
.begi_txt>dt {
font-weight: bold;
font-size: 3.6vh;
line-height: 5vh;
margin-bottom: 2%;
}
.begi_txt>dd {
font-size: 2.5vh;
line-height: 3.5vh;
margin-bottom: 5%;
}
.handrailbox>dd>span {
display: none;
}
.handrailbox div.btn {
background: none;
width: 86%;
margin: 0 auto;
}
.handrailbox div a {
width: 100%;
font-size: 2.9vh !important;
height: auto;
padding: 4% 0;
}
.h-no-trans .sc_logo {
display: none; }
#page_top .btn_both_pink a,
#page_top .btn_both_gren a,
#page_top .btn_both_gray a {
width: 90%;
height: auto;
padding: 5% 0;
}
.btn_both_pink a,
.btn_both_gren a,
.btn_both_gray a {
width: 100%;
}
div.btn,
div.btn a {
width: 100%;
}
div.btn {
background: none;
}  .under_page .inner {
max-width: 88% !important;
width: 88% !important;
margin: 0 auto;
}
.under_page .inner02 {
max-width: 88% !important;
width: 88% !important;
margin: 0 auto;
padding-bottom: 0;
}
.under_page #under-searchmap .inner.type03{
max-width: 80% !important;
width: 80% !important;
} html {
margin: 0 auto;
padding: 0;
font-size: 4vw;
letter-spacing: 1px;
line-height: 6vw;
}
a:hover img,
#fixbos li:hover,
.b_more a:hover,
footer #box01>.wrap>ul>li.first>dl>dd>ol>li a:hover,
footer #box02>.wrap>dl>dd>ol>li a:hover,
#pank ul li a:hover,
footer #box03>.wrap>ul>li a:hover,
header .h_reservbtnbox li a:hover,
.clone-nav_f ol li a:hover,
.handrailbox div a:hover,
slider autoplays_type01 a:hover,
#contents_news div.btn a:hover,
.rankfirstbox dd div a:hover,
#contents_feature_popu .sidebox li div a:hover,
#contents_feature_attention .sidebox li dd div a:hover,
.featbox div a:hover,
.bg_black .right ol li a:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.inner {
max-width: 100%;
width: 100%;
}
.inner04{
width: 100%;
}
.inner05{
width: 88%;
margin: 0 auto;
}
.inner06{
max-width: 100%;
width: 100%;
}
.inner_minibox {
max-width: 100%;
width: 100%;
}
.btn_arrow a:hover {
color: #000 !important;
}
.btn_arrow::before {
content: "＞";
display: inline-block;
font-size: 15px;
margin-right: 10px;
vertical-align: 2px;
}
.btn_both_gren.type01 a{
margin-top: 15px;
margin-bottom: 10px;
}
.btn_both_gren.type01 a::before{
content: "";
display: inline-block;
background-image: url(//www.hotyoga-loive.com/images/studio/tel_icon.png);
width: 23px;
height: 23px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
}
.btn_both_gren.type01 a:after{
display: none;
}
.btn_both_gren.type01 a span{
font-size: 19px !important;
}
.btn_both_gren.type01 a span span{
display: block;
font-size: 11px !important;
line-height: 1;
}
.sec_ttlbox {
width: 85%;
height: auto;
padding: 3.5% 0;
border: 3px #000 solid;
}
.sec_ttlbox p {
position: absolute;
top: -20px;
left: -15px;
}
.sec_ttlbox p img {
width: 45%;
height: auto;
}
.sec_ttlbox h3 {
font-size: 3.3vh;
}
.top_both_ttl span {
font-size: 8vw;
line-height: 10.5vw;
padding-bottom: 0;
margin: 13vw 0 7vw 0;
border-bottom: solid 2px #3c3c3c;
display: inline-block;
} #sp_gnav {
position: absolute;
top: 0;
right: 0;
padding: 5px;
display: block;
height: 50px;
width: 50px;
display: none;
}
#sp_gnav>.sp_tgr,
#sp_gnav>.sp_tgr span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
#sp_gnav>.sp_tgr {
position: fixed;
width: 25px;
height: 16px;
top: 17px;
right: 12px;
z-index: 9999;
}
#sp_gnav>.sp_tgr span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #000;
}
#sp_gnav>.sp_tgr span:nth-of-type(1) {
top: 8px;
}
#sp_gnav>.sp_tgr span:nth-of-type(2) {
top: 14px;
}
#sp_gnav>.sp_tgr span:nth-of-type(3) {
bottom: -5px;
}
#sp_gnav>.sp_tgr.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);
background: #000;
height: 1px;
}
#sp_gnav>.sp_tgr.active span:nth-of-type(2) {
opacity: 0;
}
#sp_gnav>.sp_tgr.active span:nth-of-type(3) {
-webkit-transform: translateY(-10px) rotate(45deg);
transform: translateY(-5px) rotate(45deg);
background: #000;
height: 1px;
}
.m_modal {
width: 100%;
height: auto;
display: block !important;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
overflow-y: scroll;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
height: 110vh !important;
overflow-x: scroll;
display: block !important;
z-index: 9998;
}
#firing {
opacity: 0;
}
.seamenu_opsp #firing {
opacity: 1;
display: block;
}
#navi { z-index: 11;
display: block;
width: 100%;
min-width: 100%;
padding: 0;
margin: 0 auto !important;
position: fixed;
left: 0;
}
#navi .navisbox {
width: 100%;
max-width: 100%;
display: none;
background: #fff;
opacity: 0.90;
}
#navi .navisbox ul {
position: static;
top: 0;
left: 0;
margin-left: 0;
width: 100%;
height: 100vh;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
overflow: auto;
overflow-y: scroll;
z-index: 9999;
padding: 100px 0 0 0;
}
#navi .navisbox ul li div {
width: 75px;
margin: 0 auto;
}
#navi .navisbox ul span {
margin-right: 10px;
}
#navi .navisbox ul li {
margin: 0;
padding: 5% 0 5%;
font-size: 100%;
text-align: center;
letter-spacing: 1px;
display: block;
float: none;
}
#navi .navisbox ul li a {
text-decoration: none;
color: #fff;
text-align: center;
}
#navi .navisbox ul li.last {
display: none;
}
#com_cv_banner {
margin: 0 auto 20vw;
width: 94%;
} .acod {
padding: 0 10px 10px 10px;
font-size: 4vw;
line-height: 7vw;
font-weight: bold;
cursor: pointer;
margin-top: -15px;
width: 80%;
}
.accordion_icon {
display: none;
}
.accordion_icon_sp,
.accordion_icon_sp span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon_sp {
position: relative;
width: 25px;
height: 25px;
left: 86%;
top: 10px;
}
.accordion_icon_sp span {
position: absolute;
left: 7px;
width: 100%;
height: 2px;
background-color: #000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.accordion_icon_sp span:nth-of-type(1) {
top: 14px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.accordion_icon_sp span:nth-of-type(2) {
top: 14px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.prisec_acdbody li.active .accordion_icon_sp span:nth-of-type(1) {
display: none;
}
.prisec_acdbody li.active .accordion_icon_sp span:nth-of-type(2) {
top: 12px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.acod-in .prisec-list {
padding-bottom: 3vw;
margin-bottom: 3vw;
}
.acod-in .prisec-list dd {
padding-right: 0;
}
.acod-in .prisec-list dt::before {
color: #000;
padding: 0;
}
.acod-in {
display: none;
padding: 0 4% 0;
}
.common-slide .slick-slide {
margin: 0;
}
.common-slide .slick-prev,
.common-slide .slick-next {
display: none;
}
.common-slide {
margin-top: -75px;
}
.common-slide .slick-dots {
position: static;
margin: 20px 0 10px 0;
font-size: 0;
}
.common-slide .slick-dots li {
margin: 0 5px;
}
.common-slide .slick-dots li img {
width: 50px;
height: 50px;
border: #fff solid 3px;
}
.common-slide .slick-dots li.slick-active img {
border: #000 solid 3px;
} .tab {
padding: 3% 0; font-size: 3.4vw;;
}
.title_border {
padding: 0 0 30px;
}
.title_border-inner {
font-size: 5vw;
padding: 20px 0;
min-width: inherit;
min-width: auto;
}
.title_pagetitle {
text-align: center;
padding: 2vw 0 7vw;
}
.title_pagetitle-main {
font-size: 5vw;
}
.title_pagetitle-sub {
font-size: 4.5vw;
}
.title_underline {
font-size: 4vw;
margin: 0 0 4vw;
}
.title_underline .title_underline-inner {
padding: 0 0 2vw;
}
.title_band {
font-size: 4vw;
padding: 4vw 0;
}
.title_bar {
margin: 0 0 5vw;
}
.title_bar .title_bar-ja {
padding: 2vw 3vw;
font-size: 4vw;
}
.title_bar .title_bar-en {
padding: 2vw 3vw;
}
.link_backarchive {
padding: 5.5vw 0;
}
.link_backarchive a {
font-size: 3vw;
}
.link_backarchive {
padding: 5.5vw 0;
}
.link_backarchive a {
font-size: 3vw;
}
.lst_linkarw li a {
font-size: 3.5vw;
padding: 2vw 4vw 2vw 2vw;
}
.lst_linkarw li a::after {
content: '';
display: block;
width: 3.5vw;
height: 3.5vw;
right: 1.5vw;
}
.form-style input[type="text"],
.form-style input[type="tel"],
.form-style input[type="email"],
.form-style input[type="date"],
.form-style input[type="number"],
.form-style textarea {
padding: 2vw;
font-size: 3vw;
}
.form-style.small input[type="text"],
.form-style.small input[type="tel"],
.form-style.small input[type="email"],
.form-style.small input[type="date"],
.form-style.small input[type="number"],
.form-style.small textarea {
width: 60%;
}
.form-style_select {
min-width: 60%;
}
.form-style_select select {
min-width: 60%;
padding: 2vw 6vw 2vw 2vw;
font-size: 3vw;
}
.form-style_select select option {
font-size: 3vw;
}
.form-style_select::after {
content: '';
border-width: 2vw 1vw 0 1vw;
right: 2vw;
top: 50%;
}
.form-style_radio label {
margin: 1vw 2vw 1vw 0;
padding: 1vw 0 1vw 7vw;
font-size: 3vw;
}
.form-style_radio label::before {
content: '';
width: 4vw;
height: 4vw;
}
.form-style_radio label:hover::after,
.form-style_radio label.checked::after {
content: '';
width: 2vw;
height: 2vw;
left: 1vw;
}
.form-style_checkbox label {
margin: 1vw 2vw 1vw 0;
padding: 1vw 0 1vw 7vw;
font-size: 3vw;
}
.form-style_checkbox label::before {
content: '';
width: 4vw;
height: 4vw;
}
.form-style_checkbox label:hover::after,
.form-style_checkbox label.checked::after {
content: '';
width: 3vw;
height: 3vw;
left: .5vw;
}
.form-style_btn {
width: 80%;
max-width: inherit;
max-width: auto;
}
.form-style_btn input {
font-size: 4vw;
padding: 2vw 0;
height: auto;
color: #fff;
box-shadow: 1vw 1vw #f5bfbf;
}
.form-style_btn::after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
right: 2vw;
color: #fff;
z-index: 1;
width: 2vw;
height: 2vw;
background: url(/images/common/lst_linkarw_white.svg) center center no-repeat;
background-size: cover;
transform: translate3d(0, -50%, 0);
}
.form-style_btn.text_2em::after,
.form-style_btn.text_3em::after,
.form-style_btn.text_4em::after,
.form-style_btn.text_5em::after,
.form-style_btn.text_6em::after,
.form-style_btn.text_7em::after,
.form-style_btn.text_8em::after {
transform: translate3d(0, -50%, 0);
}
}
@media all and (max-width: 576px) {
.fancybox-thumbs {
width: 110px;
}
.fancybox-show-thumbs .fancybox-inner {
right: 110px;
}
.fancybox-thumbs__list a {
max-width: calc(100% - 10px);
}
}
@media screen and (max-width: 375px) {
.common-slide .slick-dots li {
width: 25px !important;
height: 25px !important;
margin: 0 !important;
}
.common-slide .slick-dots li img {
width: 40px;
height: 40px;
}
}
@media all and (max-height: 576px) {
.fancybox-slide {
padding-left: 6px;
padding-right: 6px;
}
.fancybox-slide--image {
padding: 6px 0;
}
.fancybox-close-small {
right: -6px;
}
.fancybox-slide--image .fancybox-close-small {
background: #4e4e4e;
color: #f2f4f6;
height: 36px;
opacity: 1;
padding: 6px;
right: 0;
top: 0;
width: 36px;
}
.fancybox-caption {
padding-left: 12px;
padding-right: 12px;
}
}
@keyframes gim00 {
100% {
opacity: 0;
z-index: -1;
}
}
@keyframes gim01 {
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes gim02 {
100% {
transform: translateY(0);
opacity: 1;
filter: blur(0px);
}
}
@keyframes scrollUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
8.1081081% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
16.2162162% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
83.7837838% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
97.1428571% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes playscroll {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
20% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
73.5% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes playscroll_ty02 {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
12.5% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
77% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
93% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@-webkit-keyframes scroll-line {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 150px, 0);
transform: translate3d(0, 150px, 0);
}
75% {
-webkit-transform: translate3d(0, 135px, 0);
transform: translate3d(0, 135px, 0);
}
100% {
-webkit-transform: translate3d(0, 260px, 0);
transform: translate3d(0, 260px, 0);
}
}
@keyframes scroll-line {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 150px, 0);
transform: translate3d(0, 150px, 0);
}
75% {
-webkit-transform: translate3d(0, 135px, 0);
transform: translate3d(0, 135px, 0);
}
100% {
-webkit-transform: translate3d(0, 260px, 0);
transform: translate3d(0, 260px, 0);
}
}
@-webkit-keyframes scroll-line02 {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 180px, 0);
transform: translate3d(0, 180px, 0);
}
75% {
-webkit-transform: translate3d(0, 165px, 0);
transform: translate3d(0, 165px, 0);
}
100% {
-webkit-transform: translate3d(0, 260px, 0);
transform: translate3d(0, 260px, 0);
}
}
@keyframes scroll-line02 {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 180px, 0);
transform: translate3d(0, 180px, 0);
}
75% {
-webkit-transform: translate3d(0, 165px, 0);
transform: translate3d(0, 165px, 0);
}
100% {
-webkit-transform: translate3d(0, 260px, 0);
transform: translate3d(0, 260px, 0);
}
}
@keyframes scroll-line_ty02 {
0% {
-webkit-transform: translate3d(0, -260px, 0);
transform: translate3d(0, -260px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 180px, 0);
transform: translate3d(0, 180px, 0);
}
65% {
-webkit-transform: translate3d(0, 165px, 0);
transform: translate3d(0, 165px, 0);
}
100% {
-webkit-transform: translate3d(0, 250px, 0);
transform: translate3d(0, 250px, 0);
}
}
@-webkit-keyframes scroll-line_ty02 {
0% {
-webkit-transform: translate3d(0, -260px, 0);
transform: translate3d(0, -260px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 180px, 0);
transform: translate3d(0, 180px, 0);
}
65% {
-webkit-transform: translate3d(0, 165px, 0);
transform: translate3d(0, 165px, 0);
}
100% {
-webkit-transform: translate3d(0, 250px, 0);
transform: translate3d(0, 250px, 0);
}
}
@keyframes scroll-line_ty03 {
0% {
-webkit-transform: translate3d(0, -260px, 0);
transform: translate3d(0, -260px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 190px, 0);
transform: translate3d(0, 190px, 0);
}
65% {
-webkit-transform: translate3d(0, 175px, 0);
transform: translate3d(0, 175px, 0);
}
100% {
-webkit-transform: translate3d(0, 260px, 0);
transform: translate3d(0, 260px, 0);
}
}
@keyframes scroll-line_ty04 {
0% {
-webkit-transform: translate3d(0, -105px, 0);
transform: translate3d(0, -105px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 75px, 0);
transform: translate3d(0, 75px, 0);
}
65% {
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);
}
100% {
-webkit-transform: translate3d(0, 105px, 0);
transform: translate3d(0, 105px, 0);
}
}
@keyframes scroll-line_ty05 {
0% {
-webkit-transform: translate3d(0, -65px, 0);
transform: translate3d(0, -65px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 35px, 0);
transform: translate3d(0, 35px, 0);
}
65% {
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
100% {
-webkit-transform: translate3d(0, 65px, 0);
transform: translate3d(0, 65px, 0);
}
}
@keyframes scroll-line_ty06 {
0% {
-webkit-transform: translate3d(0, -85px, 0);
transform: translate3d(0, -85px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);
}
65% {
-webkit-transform: translate3d(0, 45px, 0);
transform: translate3d(0, 45px, 0);
}
100% {
-webkit-transform: translate3d(0, 85px, 0);
transform: translate3d(0, 85px, 0);
}
}
@keyframes scroll-line_ty07 {
0% {
-webkit-transform: translate3d(0, -105px, 0);
transform: translate3d(0, -105px, 0);
}
14% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
35% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
65% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 105px, 0);
transform: translate3d(0, 105px, 0);
}
}
@keyframes example {
to {
background-position-x: 200%;
}
}
@keyframes fancybox-rotate {
100% {
transform: rotate(360deg);
}
} .mode_pc{
display:block;
}
.mode_sp{
display:none;
}
@media screen and (max-width: 768px){
.mode_pc{
display:none;
}
.mode_sp{
display:block;
}
}
.h-text{
display: none;
} @media screen and (max-width: 768px){
#search_btn{
display: none;
}
.search_btn .mode_sp p{
font-size: 13px;
}
header .search_btn a{
background: #ee8081;
padding: 14px 10px;
color: #ffffff;
font-size: 13px;
position: relative;
}
header .search_btn p{
margin-left: 20px;
}
header .search_btn p::before{
content: '';
display: inline-block;
position: absolute;
left: 10px;
background-image: url(//www.hotyoga-loive.com/images/common/point_icon.png);
background-size: contain;
background-repeat: no-repeat;
width: 15px;
height: 15px;
background-position: center;
top: 50%;
transform: translateY(-50%);
}
.search_btn.mode_sp{
display: flex;
justify-content: flex-end;
margin-right: 50px;
margin-top: 12px;
line-height: 0;
}
header .search_btn.mode_sp a{
background: transparent;
border: 2px solid #333;
color: #333;
padding: 13px 7px;
}
header .search_btn.mode_sp p{
margin-left: 0;
}
header .search_btn.mode_sp p::before{
display: none;
} .h-text {
display:block;
font-size:	10px;
transform: scale(0.8);
transform-origin:0 0;
margin-top:	7px;
margin-left: 18px;
color:		#333;
text-align:center;
line-height: 1.2;
}
} .title_area{
text-align: center;
}
.title_area.type02{
text-align: left;
border-left: 4px solid #ee8081;
padding: 4px 0 0 30px;
display: inline-block;
}
.title_area.type02 h2,
.title_area h3{
font-size: 38px;
letter-spacing: 0.09em;
line-height: 1.15;
display: inline-block;
vertical-align: text-top;
}
.title_area h4{
display: inline-block;
font-size: 24px;
letter-spacing: 0.09em;
font-weight: bold;
}
.title_area h5{
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 22px;
}
@media screen and (max-width: 767px) {
.title_area.type02{
padding-left: 12px;
border-left: 2px solid #ee8081;
}
.title_area.type02 h2,
.title_area h3{
font-size: 19px;
}
.title_area h4{
font-size: 19px;
}
.title_area h5{
font-size: 19px;
margin-bottom: 8px;
}
.title_inner{
width: 88%;
margin: auto;
}
} #column{
margin-bottom: 96px;
}
.column_area{
display: flex;
flex-wrap: wrap;
margin: 40px 0 0;
}
.under_page #column .inner{
padding-bottom: 0;
}
.column_area .column{
width: 48%;
padding-bottom: 28px;
border-bottom: 1px solid #eaeaea;
margin:0 0 30px 0;
}
.column_area .column:nth-of-type(even){
margin-left: 40px;
}
.column_area .column .flex_box{
display: flex;
}
.column_area .column .img{
max-width: 180px;
width: 100%;
margin-right: 30px;
}
.column_area .column p{
color: #3c3c3c;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.09em;
line-height: 1.44;
}
@media screen and (max-width: 767px) {
#column{
margin-bottom: 75px;
}
.column_area{
margin: 20px 0 0;
}
.column_area .column{
width: 100%;
padding-bottom: 15px;
margin: 0 0 15px 0;
}
.column_area .column:nth-of-type(even) {
margin-left: 0;
}
.column_area .column .img {
max-width: 126px;
margin-right: 15px;
}
.column_area .column p{
font-size: 13px;
}
} .quest_box{
background: #f0f0f0;
padding: 90px 0 44px;
margin-bottom: 90px;
}
.quest_box ol {
margin-top: 40px;
}
.quest_box ol li {
overflow: hidden;
background: #fff;
padding: 15px;
margin-bottom: 25px;
position: relative;
}
.quest_box ol li:last-child{
margin-bottom: 40px;
}
.accordion_icon_sp {
display: none;
}
.acod {
padding: 20px 20px 20px 28px;
font-size: 20px;
line-height: 35px;
font-weight: bold;
cursor: pointer;
}
.quest_box ol li .acod {
font-size: 18px;
line-height: 35px;
font-weight: bold;
cursor: pointer;
}
.accordion_icon,
.accordion_icon span,
.accordion_icon-up,
.accordion_icon-up span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon,
.accordion_icon-up {
position: absolute;
width: 30px;
height: 30px;
float: right;
margin-right: 5px;
right: 3%;
}
.accordion_icon,
.accordion_icon span,
.accordion_icon-up,
.accordion_icon-up span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon span,
.accordion_icon-up span {
position: absolute;
left: 7px;
width: 100%;
height: 2px;
background-color: #000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1),
.accordion_icon-up span:nth-of-type(1) {
top: 14px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 14px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.acod-in {
display: none;
padding: 0 15px 0 15px;
}
.quest_box ol li .acod-in {
padding: 30px 30px 30px 60px;
font-size: 18px;
line-height: 26px;
overflow: hidden;
width: 90%;
}
.quest_box ol li .acod-in span {
display: block;
}
@media screen and (max-width: 767px) {
.quest_box{
padding: 40px 0 34px;
margin-bottom: 70px;
}
.quest_box ol{
margin-top: 17px;
margin-bottom: 30px;
}
.quest_box ol li { padding: 0;
margin-bottom: 22px;
position: relative;
}
.acod {
padding: 0 10px 10px 10px;
font-size: 4vw;
line-height: 7vw;
font-weight: bold;
cursor: pointer;
margin-top: -15px;
width: 80%;
}
.quest_box ol li .acod { font-size: 3.8vw;
line-height: 7vw;
width: 100%;
margin-top: 0;
padding: 15px 14% 12px 7%;
position: relative;
box-sizing: border-box;
min-height: 61px;
display: flex;
align-items: center;
}
.accordion_icon {
display: none;
}
.accordion_icon_sp,
.accordion_icon_sp span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon_sp {
position: relative;
width: 20px;
height: 20px;
left: 86%;
top: 10px;
}
.accordion_icon_sp span {
position: absolute;
left: 7px;
width: 100%;
height: 2px;
background-color: #000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
bottom: 0;
margin: auto;
}
.accordion_icon_sp span:nth-of-type(1) {
top: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.accordion_icon_sp span:nth-of-type(2) {
top: 0;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.quest_box .accordion_icon_sp {
left: inherit;
right: 15px;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
}
.quest_box .active .accordion_icon_sp span:nth-of-type(1) {
display: none;
}
.quest_box .active .accordion_icon_sp span:nth-of-type(2) {
top: 0;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.prisec_acdbody li.active .accordion_icon_sp span:nth-of-type(1) {
display: none;
}
.prisec_acdbody li.active .accordion_icon_sp span:nth-of-type(2) {
top: 0;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.quest_box ol li:last-child{
margin-bottom: 0;
}
.quest_box ol li .acod-in{
padding: 0 0 4%;
margin: auto; font-size: 3.8vw;
line-height: 7vw;
}
} .studio_voice {
margin-bottom: 32px;
}
.studio_voice h3 {
font-size: 24px;
line-height: 1.6;
text-align: center;
margin: 0 0 30px;
}
.studio_voice_area {
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.studio_voice_box {
display: block;
width: calc((100% - 40px) / 2);
border: 1px solid #67b5bf;
padding: 39px;
margin: 0 40px 47px 0;
box-sizing: border-box;
color: #3c3c3c;
max-height: 363px;
}
.studio_voice_box:nth-child(2n) {
margin: 0 0 40px;
}
.studio_voice_box:hover {
border-color: #0e8999;
}
.studio_voice_head {
display: flex;
padding: 0 0 30px;
box-sizing: border-box;
}
.studio_voice_photo {
width: 120px;
padding: 0 20px 0 0;
box-sizing: border-box;
}
.studio_voice_photo img {
border-radius: 50%;
height: auto;
}
.studio_voice_comment {
width: calc(100% - 120px);
padding: 30px;
background: #f0f0f0;
position: relative;
box-sizing: border-box;
align-self: center;
}
.studio_voice_comment::after {
content: '';
border-width: 9px 8px 9px 0;
border-style: solid;
border-color: transparent #f0f0f0 transparent transparent;
position: absolute;
right: 100%;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.studio_voice_comment h3,
.studio_voice_comment h4 {
font-size: 18px;
text-align: left; }
.studio_voice_comment h3{
margin-bottom: 0;
}
.studio_voice_ex p {
font-size: 18px;
line-height: 1.4;
}
.studio_voice_more{
text-decoration: underline;
}
@media screen and (max-width: 767px) {
.studio_voice h3 {
font-size: 5vw;
margin: 0 0 15px;
}
.studio_voice_box:nth-child(1n) {
width: 100%;
padding: 19px 19px 15px;
margin: 0 0 20px;
}
.studio_voice_box{
max-height: inherit;
}
.studio_voice_head {
padding: 0 0 15px;
}
.studio_voice_photo {
width: 80px;
padding: 0 20px 0 0;
}
.studio_voice_comment {
width: calc(100% - 80px);
padding: 15px;
}
.studio_voice_comment::after {
border-width: 7px 6px 7px 0;
top: 23px;
transform: none;
}
.studio_voice_comment h3,
.studio_voice_comment h4 { font-size: 3.8vw;
line-height: 7vw;
}
.studio_voice_comment h3{
margin-bottom: 0;
}
.studio_voice_ex p { font-size: 3.8vw;
line-height: 7vw;
}
} #lesson_program  {
margin-bottom: 52px;
}
#lesson_program .contents-enttl {
margin-bottom: 0;
}
#lesson_program .lesson_program {
margin: 40px 0 20px;
}
#lesson_program .lesson_program p,
#lesson_program .lesson_program span{
text-align: center;
}
#lesson_program .lesson_program span{
font-size: 14px;
letter-spacing: 0.09em;
display: block;
margin-top: 8px;
}
#lesson_program ol li {
margin-bottom: 3px;
position: relative;
border: none;
}
#lesson_program ol li .acod {
background-color: #67b5bf;
padding: 11px 22px;
color: #fff;
}
#lesson_program ol li .acod-in {
padding: 19px 0;
}
#lesson_program .accordion_icon span,
#lesson_program .accordion_icon-up span {
background-color: #fff;
}
.program_slider {
padding: 0 0 60px;
}
.program_slider-item {
width: 100%;
max-width: 980px;
padding: 0 30px;
float: left;
outline: none;
}
.program_slider-inner {
display: flex;
background: #fff;
align-items: center;
padding: 10px;
}
.program_slider-photo {
width: 55%;
}
.program_slider-photo img {
max-width: 100%;
height: auto;
}
.program_slider-content {
width: 50%;
box-sizing: border-box;
padding: 0 0 0 60px;
}
.program_slider-content .btn_both_pink a {
margin: 0;
font-size: 3vw;
}
.program_slider-title {
font-size: 27px;
line-height: 1.5;
margin: 0 0 25px;
letter-spacing: .1em;
}
.program_slider-description {
font-size: 14px;
line-height: 1.8;
letter-spacing: .05em;
margin: 0 0 20px;
}
.program_recommend{
background: #f0f0f0;
padding: 40px 0 20px;
margin-bottom: 83px;
}
.program_recommend .slick-slider {
background: none;
}
.program_recommend .slick-slider .slick-list,
.program_recommend .slick-slider .slick-track {
background: none;
}
#studio .program_recommend .slick-prev,
#studio .program_recommend .slick-next{
display: block !important;
}
.program_recommend .slick-next,
.program_recommend .slick-prev {
width: 24px;
height: 46px;
transition: all .3s;
}
.program_recommend .slick-next::before,
.program_recommend .slick-prev::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
background: url(//www.hotyoga-loive.com/images/program/sld_arw.png) center center no-repeat;
background-size: contain;
}
.program_recommend .slick-next:hover,
.program_recommend .slick-prev:hover {
opacity: .8;
}
.program_recommend .slick-next {
right: auto;
left: 46%;
transform: translate3d(565px, -100%, 0);
}
.program_recommend .slick-prev {
left: auto;
right: 46%;
transform: translate3d(-565px, -100%, 0) rotate3d(0, 0, 1, 180deg);
}
.program_slider-item a.mover:hover .program_slider-content{
opacity: 0.6;
}
.program_slider-content .program_slider-title{
font-size: 20px;
font-weight: bold;
letter-spacing: 0.09em;
color: #3c3c3c;
margin: 0 0 15px;
}
.program_slider-content li{
margin-top: 5px;
}
.program_slider-content li p{
color: #3c3c3c;
font-size: 16px;
letter-spacing: 0.09em;
position: relative;
padding-left: 25px;
}
.program_slider-content li p::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
top: 0;
margin: auto;
width: 16px;
height: 16px;
background-image: url(//www.hotyoga-loive.com/images/studio/pdf_btn_icon01.png);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(90deg);
}  @media screen and (max-width: 767px) {
#lesson_program{
margin-bottom: 75px;
}
.program_slider-item{
padding: 0 20px;
}
.program_slider-photo{
width: 100%;
}
.program_slider-content{
width: 100%;
padding: 10px 0 0;
}
.program_slider-inner{
flex-direction: column;
padding: 10px 10px 30px;
}
.program_slider-content li{ margin-top: 0;
}
.program_slider-content li p::before{
width: 14px;
height: 14px;
}
.program_slider-content .program_slider-title{
font-size: 17px;
margin-bottom: 15px;
text-align: center;
line-height: 1.2;
}
.program_recommend {
padding: 5vw 0 0;
margin: 0 0 1vw;
width: 100%;
overflow: hidden;
}
.program_recommend .slick-next,
.program_recommend .slick-prev {
width: 5vw;
height: 5vw;
}
.program_recommend .slick-next {
right: 3vw;
left: auto;
transform: translate3d(0, -50%, 0);
}
.program_recommend .slick-prev {
left: 3vw;
right: auto;
transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 	180deg);
}
.program_slider-content li p{
font-size: 13px;
} }