/* Theme Name: Original Theme Theme URI: Author: the WordPress team Author URI: Description: Version: 1.0 Tags: */ /* -------------------------------------------------- reset -------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } img{ vertical-align: bottom;} ul{ list-style: none;} ul li{ list-style-type: none;} figure { margin: 0;} /* ============================================================================= Forms ========================================================================== */ form { margin: 0;} fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend { border: 0;} button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline;} button, input { line-height: normal;} button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0;} input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top;} input[type="search"]:focus { outline: none;} table { border-collapse: collapse; border-spacing: 0; } /* font-style -------------------------------------------------- */ body { font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; /* font-family: "游ゴシック","Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",sans-serif;*/ font-size: 16px; *font-size:small; *font:x-small; line-height: 1.6; } input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;} .min {font-family: "游明朝", "Yu Mincho", "YuMincho", serif;} ::selection{ background: #feffaf; color: #000;} ::-moz-selection{ background: #feffaf; color: #000;} a { color:#002159; text-decoration: underline;} a:link { color:#002159;} a:visited{ color:#002159;} a:hover { color:#002159;} a:active { color:#002159;} em{ font-style: normal;} /* utility -------------------------------------------------- */ .cf{ clear: both;} .cf:after{ content: ''; display: block; clear: both;} @media (max-width: 641px) { } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus { outline: none;} .slick-list.dragging{ cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block;} .slick-track:before, .slick-track:after { display: table; content: '';} .slick-track:after { clear: both;} .slick-loading .slick-track { visibility: hidden;} .slick-slide { display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide { float: right;} .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none;} .slick-slide.dragging img { pointer-events: none;} .slick-initialized .slick-slide { display: block; outline: none;} .slick-loading .slick-slide { visibility: hidden;} .slick-vertical .slick-slide{ display: block; height: auto;} .slick-arrow.slick-hidden { display: none;} .slick-arrow{ width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); background: #000; border: none; border-radius: 50%; z-index: 100; text-indent: -9999em; outline: none; } .slick-prev { left: 0px;} .slick-next { right: 0px;} .slick-arrow:before{ position: absolute; content: ''; display: block; width: 0px; height: 0px; top: 50%; transform: translateY(-50%);} .slick-prev:before { left: 30%; border: solid 9px transparent; border-right: solid 16px #fff; border-left: 0;} .slick-next:before { right: 30%; border: solid 9px transparent; border-left: solid 16px #fff; border-right: 0;} /** Dots */ .slick-dotted.slick-slider{ margin-bottom: 30px;} .slick-dots { position: absolute; display: block; width: 100%; padding: 0; margin: 0; text-align: center;} .slick-dots li { position: relative; display: inline-block; width: 20px; height: 12px; margin: 0 auto; padding: 0; cursor: pointer;} .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; margin: 0 auto; cursor: pointer; border-radius: 50%; color: transparent; border: 0; outline: none; background: #d2d2d3; } .slick-dots li button:hover, .slick-dots li button:focus{ outline: none;} .slick-dots li button:hover:before, .slick-dots li button:focus:before, .slick-dots li.slick-active button { background: #dab300;} @media (max-width: 481px) { } #hd { width: 100%; position: fixed; left: 0; top: 0; background: #fff; box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%); z-index: 200;} #hd .inner-hd { position: relative; display: flex; justify-content: space-between; align-items: center; width: 94%; min-height: 60px; max-width: 1000px; margin: 0 auto; padding: 10px; padding-right: 200px;} #hd .logo { width: 20%;} #hd .logo h1 { line-height: 1; text-align: center; } #hd .logo h1 a { display: block; width: 100%; max-width: 150px;} #hd .logo h1 a img { width: 100%;} #hd .logo-school { width: 100%;} #hd .logo-school h1 { font-weight: 400; line-height: 1.2;} #hd .logo-school h1 br { display: none;} #hd .logo-school h1 a { display: inline-block; margin-right: 20px; vertical-align: middle;} #hd .logo-school h1 a img.rect { width: 80px; margin-right: 15px; vertical-align: middle;} #hd .logo-school h1 a img.text { width: 120px; vertical-align: middle;} #hd .logo-school h1 span { display: inline-block; vertical-align: middle;} #hd .gNav { width: 80%;} #hd .gNav ul { margin: 0; padding: 0; font-size: 0;} #hd .gNav ul li { display: inline-block; padding: 10px 15px;} #hd .gNav ul li a { position: relative; display: block; padding-bottom: 5px; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", Meiryo, メイリオ, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2rem; text-decoration: none;align-content; } #hd .gNav ul li a:after { content: ''; display: block; width: 0; height: 1px; background: #000; transition: 0.3s ease;} #hd .gNav ul li a:hover { color: #000; text-decoration: none;} #hd .gNav ul li a:hover:after { width: 100%;} #hd .subNav { position: absolute; right: 0; top: 0;} #hd .subNav.has-menu { padding-right: 60px;} #hd .subNav .mypage { width: 40px; text-align: center;} #hd .subNav .mypage { display: inline-block; width: 52px; padding-top: 8px; vertical-align: middle;} #hd .subNav .mypage a { position: relative; display: block; padding-top: 15px; color: #000; line-height: 1.2; text-align: center;} #hd .subNav .mypage a svg { width: 25px; margin: 0 auto;} #hd .subNav .mypage a svg path {fill: transparent; stroke: #424242; stroke-width: 2px;} #hd .subNav .mypage a svg polygon { fill: #424242;} #hd .subNav .mypage a span { position: absolute; left: 0; top: 0; display: block; width: 100%; font-size: 10px; font-weight: 700; text-align: center; transform: scale(0.85);} #hd .hd-trial { position: absolute; top: 0px; right: 0; width: 65px;} #hd .hd-trial.r80 { right: 80px;} #hd .hd-trial.r120 { right: 120px;} #hd .hd-trial.r140 { right: 140px;} #hd .hd-trial.r240 { right: 240px;} #hd .hd-trial a { position: relative; display: block; padding: 15px 0 5px; background: #c5a600; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.2; text-align: center; text-decoration: none; } #hd .hd-trial a:before, #hd .hd-trial a:after { content: ''; display: block; width: 0px; height: 0px; border: solid 15px transparent; position: absolute; bottom: -18px; z-index: 1;} #hd .hd-trial a:before{ left: 0; border-left: solid 35px #c5a600; border-top: solid 15px #c5a600;} #hd .hd-trial a:after { right: 0; border-right: solid 35px #c5a600; border-top: solid 15px #c5a600;} #hd .hd-trial a span { position: relative; z-index: 2;} #hd .hd-trial a:hover { opacity: 0.8;} #hd .hd-reserve { position: absolute; top: 0px; right: 0; width: 65px;} #hd .hd-reserve.r60 { right: 60px;} #hd .hd-reserve.r120 { right: 120px;} #hd .hd-reserve.r240 { right: 240px;} #hd .hd-reserve.sp-r80 { right: 0px;} #hd .hd-reserve a { position: relative; display: block; padding: 15px 0 5px; background: #6a876f; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.2; text-align: center; text-decoration: none; } #hd .hd-reserve a:before, #hd .hd-reserve a:after { content: ''; display: block; width: 0px; height: 0px; border: solid 15px transparent; position: absolute; bottom: -18px; z-index: 1;} #hd .hd-reserve a:before{ left: 0; border-left: solid 35px #6a876f; border-top: solid 15px #6a876f;} #hd .hd-reserve a:after { right: 0; border-right: solid 35px #6a876f; border-top: solid 15px #6a876f;} #hd .hd-reserve a span { position: relative; z-index: 2;} #hd .hd-reserve a:hover { opacity: 0.8;} #hd .hd-contact { position: absolute; top: 0px; right: 0; width: 120px;} #hd .hd-contact.r60 { right: 60px;} #hd .hd-contact a { position: relative; display: block; padding: 15px 0 5px; background: #c5a600; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.2; text-align: center; text-decoration: none; } #hd .hd-contact a:before, #hd .hd-contact a:after { content: ''; display: block; width: 0px; height: 0px; border: solid 15px transparent; position: absolute; bottom: -18px; z-index: 1;} #hd .hd-contact a:before{ left: 0; border-left: solid 60px #c5a600; border-top: solid 15px #c5a600;} #hd .hd-contact a:after { right: 0; border-right: solid 60px #c5a600; border-top: solid 15px #c5a600;} #hd .hd-contact a span { position: relative; z-index: 2;} #hd .hd-contact a:hover { opacity: 0.8;} #hd .menu-btn { position: absolute; right: 0; top: 16px; width: 40px;} #hd .menu-btn.sp-menu { display: none;} #hd .menu-btn.has-menu { top: 25px;} #hd .menu-btn div { position: relative; width: 100%; height: 40px; cursor: pointer;} #hd .menu-btn.has-menu div { height: 50px;} #hd .menu-btn.has-menu div:after { content: 'MENU'; width: 100%; position: absolute; left: 0px; bottom: 0px; font-size: 10px; text-align: center;} #hd .menu-btn div span { display: block; width: 85%; height: 1px; background: #000; position: absolute; left: 50%;} #hd .menu-btn div span:nth-of-type(1) { top: 6px; transform: translate(-50%,0);} #hd .menu-btn div span:nth-of-type(2) { top: 14px;transform: translate(-50%,0);} #hd .menu-btn div span:nth-of-type(3) { top: 22px;transform: translate(-50%,0);} #hd .subNav .trig { display: inline-block; width: 24px; margin-left: 10px; vertical-align: middle;} #hd .subNav .trig .navbar-toggler{ display: block; position: relative; width: 24px; height: 24px; margin: 0 auto;} #hd .subNav .trig .navbar-toggler span{ display: block; width: 100%; height: 1px; position: absolute; left: 0;} #hd .subNav .trig .navbar-toggler span { left: 0; background: #000;} #hd .subNav .trig .navbar-toggler span:nth-child(1){ top: 0;} #hd .subNav .trig .navbar-toggler span:nth-child(2){ top: 8px;} #hd .subNav .trig .navbar-toggler span:nth-child(3){ top: 16px;} @media (max-width: 801px) { #hd .inner-hd { min-height: auto; padding: 6px;} #hd .logo { width: 120px; margin: 0 auto;} #hd .gNav { display: none;} #hd .hd-trial { right: auto; left: 12px;} #hd .hd-trial.r80 { right: auto; left: 12px;} #hd .hd-trial.r120 { right: auto; left: 12px;} #hd .hd-trial.r240 { right: auto; left: 12px;} #hd .logo-school h1 { font-size: 15px;} #hd .logo-school h1 br { display: block;} #hd .logo-school h1 a img.rect { width: 60px;} #hd .logo-school h1 a img.text { width: 100px;} #hd .hd-reserve.sp-r55 { right: 55px;} #hd .menu-btn.sp-menu { display: block;} #hd .menu-btn { top: 9px;} #hd .menu-btn.has-menu { top: 15px;} } @media (max-width: 481px) { #hd .inner-hd { width: 100%;} #hd .subNav .mypage { padding-top: 4px;} #hd .subNav .mypage a { padding-top: 12px;} #hd .subNav .mypage a span { transform: scale(0.5);} #hd .hd-trial { width: 50px;} #hd .hd-trial a { padding: 12px 0 2px; font-size: 15px;} #hd .hd-reserve { right: 50px; width: 50px;} #hd .hd-reserve a { padding: 12px 0 2px; font-size: 15px;} #hd .logo-school h1 { font-size: 10px;} #hd .logo-school h1 a { margin-right: 10px;} #hd .logo-school h1 a img.rect { width: 40px; margin-right: 5px;} #hd .logo-school h1 a img.text { width: 80px;} #hd .hd-contact { width: 80px;} #hd .hd-contact.r60 { right: 60px;} #hd .hd-contact a { font-size: 12px; letter-spacing: 0.075rem;} #hd .menu-btn { top: 10px; right: 12px; width: 32px;} #hd .menu-btn div { height: 32px;} #hd .menu-btn.has-menu { top: 6px;} #hd .menu-btn.has-menu div { height: 40px;} } .open-nav { position: fixed; left: 0; top: -800px; width: 100%; background: rgba(60,60,60,0); z-index: -1;} .open-nav .inner { position: relative; width: 94%; max-width: 1000px; margin: 0 auto; padding: 50px 0 60px; padding-right: 60px; transition: 0.6s ease 0.2s; opacity: 0; transform: translateY(-40px);} .open-nav .nav-flex { display: flex; justify-content: space-between;} .open-nav .logo-yoga { width: 15%} .open-nav .box-yoga:nth-child(2) { width: 30%;} .open-nav .box-yoga:nth-child(3) { width: 37%;} .open-nav .box-yoga:nth-child(4) { width: 18%;} .open-nav .logo-yoga h2 a { display: block; width: 86%; max-width: 180px;} .open-nav .logo-yoga h2 a img { width: 100%;} .open-nav .logo-pilates h2 a { display: block; width: 86%; max-width: 180px;} .open-nav .logo-pilates h2 a img { width: 100%;} .open-nav .box-pilates dl dt { font-size: 16px; font-weight: 700;} .open-nav .box-pilates dl dd { font-size: 14px;} .open-nav .logo-esthe { width: 20%} .open-nav .box-esthe:nth-child(2) { width: 80%;} .open-nav .logo-esthe h2 a { display: block; width: 86%; max-width: 180px;} .open-nav .logo-esthe h2 a img { width: 100%;} .open-nav .logo-school { width: 15%} .open-nav .box-school:nth-child(2) { width: 30%;} .open-nav .box-school:nth-child(3) { width: 37%;} .open-nav .box-school:nth-child(4) { width: 18%;} .open-nav .logo-school h2 a { display: block; width: 86%; max-width: 180px;} .open-nav .logo-school h2 a img { width: 100%;} .open-nav .box ul { font-size: 0px;} .open-nav .box ul.sublink { padding-left: 10px;} .open-nav .box ul.sublink li { display: inline-block; width: 50%; margin-bottom: 8px; font-size: 16px; font-weight: 700;} .open-nav .box ul.sublink2 { margin-bottom: 30px;} .open-nav .box ul.sublink2 li { margin-bottom: 8px; font-size: 16px; font-weight: 700;} .open-nav .box ul.sublink2 li:last-child { margin-bottom: 0px;} .open-nav .box a.txtlink { position: relative; display: inline-block; color: #fff; text-decoration: none; letter-spacing: 0.1rem;} .open-nav .box a.txtlink:after { content: ''; display: block; width: 0%; height: 1px; background: #fff; position: absolute; left: 0px; bottom: 0px; transition: .3s ease;} .open-nav .box a.txtlink:hover:after{ width: 100%;} .open-nav .box a.studios { font-size: 16px; font-weight: 700;} .open-nav .box ul { font-size: 0px;} .open-nav .box ul.studiolink { padding-top: 10px;} .open-nav .box ul.studiolink li { display: inline-block; width: 50%; margin-bottom: 8px; font-size: 15px; vertical-align: top;} .open-nav .box ul.studiolink li dl dt { margin-bottom: 8px; color: #fff; font-size: 15px; font-weight: 700;} .open-nav .box ul.studiolink li dl dd { margin-bottom: 8px; font-size: 14px;} .open-nav .box ul.studiolink li dl dd:last-child { margin-bottom: 0px;} .open-nav .box dl.course dt { margin-bottom: 8px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem;} .open-nav .box dl.course dd { position: relative; margin-bottom: 8px; padding-left: 15px; font-size: 14px;} .open-nav .box dl.course dd:last-child { margin-bottom: 0px;} .open-nav .box dl.course dd:before { content: ''; display: block; width: 6px; height: 2px; background: #fff; position: absolute; left: 0px; top: 0.65em;} .open-nav .box ul.sns { margin-bottom: 40px;} .open-nav .box ul.sns li { display: inline-block; width: 30%; padding: 0 10px;} .open-nav .box ul.sns li a { display: block; width: auto; height: 24px;} .open-nav .box ul.sns li a svg { width: auto; height: 24px; fill: #fff;} .open-nav .box .btn-entry { width: 100%; max-width: 300px; margin: 0 auto;} .open-nav .box .btn-entry a { display: block; padding: 8px 0; background: #c5a600; border-radius: 50px; transition: .3s ease; color: #fff; font-size: 14px; text-align: center; text-decoration: none; } .open-nav .box .btn-entry a:hover { background: #fff; color: #3c3c3c;} .open-nav .close-btn { position: absolute; right: 0; top: 25px; width: 40px;} .open-nav .close-btn div { position: relative; width: 100%; height: 50px; cursor: pointer;} .open-nav .close-btn div:after { content: 'CLOSE'; width: 100%; position: absolute; left: 0px; bottom: 0px; color: #fff; font-size: 10px; text-align: center;} .open-nav .close-btn div span { display: block; width: 100%; height: 1px; background: #fff; position: absolute; left: 50%;} .open-nav .close-btn div span:nth-of-type(1) { top: 15px; transform: translate(-50%,0) rotate(35deg);} .open-nav .close-btn div span:nth-of-type(2) { top: 15px;transform: translate(-50%,0) rotate(-35deg);} .open-nav.open { top: 0px; background: rgba(60,60,60,1); z-index: 200;} .open-nav.open .inner{ opacity: 1;transform: translateY(0px);} @media (max-width: 1001px) { .open-nav .logo-school { width: 20%} .open-nav .box-school:nth-child(2) { width: 34%;} .open-nav .box-school:nth-child(3) { width: 26%;} .open-nav .box-school:nth-child(4) { width: 20%;} .open-nav .box dl.course dt { font-size: 16px;} .open-nav .box dl.course dd a { letter-spacing: 0rem;} .open-nav .box ul.sublink li { display: block; width: 100%; font-size: 14px;} .open-nav .box .btn-entry a { font-size: 12px;} } @media (max-width: 641px) { .open-nav .inner { padding: 40px 20px;} .open-nav .nav-flex { display: block;} .open-nav .logo-pilates { width: 100%; margin: 0 auto 20px;} .open-nav .logo-pilates h2 a { max-width: 150px;} .open-nav .box-pilates dl dt a, .open-nav .box-pilates dl dd a { display: block; padding: 4px 8px; color: #fff; letter-spacing: 0.05rem; text-decoration: none;} .open-nav .box-pilates dl dt { font-size: 14px;} .open-nav .box-pilates dl dd { padding-left: 10px; font-size: 13px;} .open-nav .box-pilates dl dd a { font-weight: 400 !important;} .open-nav .box-pilates ul.sublink { margin-bottom: 30px;} .open-nav .logo-esthe { width: 100%; margin: 0 auto 20px;} .open-nav .logo-esthe h2 a { max-width: 150px;} .open-nav .logo-school { width: 100%; margin: 0 auto 20px;} .open-nav .box-school:nth-child(2) { width: 100%;} .open-nav .box-school:nth-child(3) { width: 100%; margin: 0 auto 20px;} .open-nav .box-school:nth-child(4) { width: 100%;} .open-nav .logo-school h2 a { max-width: 150px;} .open-nav .box a.txtlink { display: block; padding: 4px 8px; font-weight: 700; letter-spacing: 0.05rem;} .open-nav .box a.txtlink:after { content: none;} .open-nav .box a.txtlink:hover { background: #eee; color: #dab300;} .open-nav .box dl.course dd:before { top: 0.95em;} .open-nav .box ul.sublink { padding: 0; padding-top: 10px;} .open-nav .box ul.sns { width: 200px; margin: 0 auto 30px; text-align: center;} .open-nav .box .btn-entry a { font-size: 16px;} } @media (max-width: 481px) { .open-nav .inner { padding: 20px 20px 40px;} .open-nav .logo-yoga h2 a { width: 120px;} .open-nav .logo-pilates h2 a { max-width: 120px;} .open-nav .logo-esthe h2 a { max-width: 120px;} .open-nav .logo-school h2 a { width: 120px;} .open-nav .close-btn { top: 10px; width: 32px;} } .pagetop { position: fixed; left: 4%; bottom: 40px; z-index: 100; width: 40px; } .pagetop a { position: relative; display: block; width: 100%; color: #000; text-align: center; text-decoration: none;} .pagetop a:after { content: ''; position: relative; display: block; width: 20px; height: 20px; margin: auto; border-top: solid 3px #dab300; border-right: solid 3px #dab300; transform: rotate(-45deg); } .pagetop a span { display: block; margin-bottom: 5px; font-weight: 700;} .pagetop a:hover{ opacity: 0.8; color: #666;} @media (max-width: 481px) { .pagetop { left: 10px;} .pagetop a:after { width: 12px; height: 12px; border-width: 2px;} .pagetop a span { font-size: 10px;} } /* footer */ #ft {} #ft .ft-ctn-1 { position: relative; background: #3c3c3c;} #ft .ft-yoga { width: 94%; max-width: 1080px; margin: 0 auto; padding: 50px 0 10px;} #ft .ft-yoga .ft-nav-flex { display: flex; width: 100%; justify-content: space-between;} #ft .ft-yoga .box:nth-of-type(1) { width: 35%;} #ft .ft-yoga .box:nth-of-type(2) { width: 40%; padding-left: 20px;} #ft .ft-yoga .box:nth-of-type(3) { width: 25%;} #ft .ft-yoga .box ul { font-size: 0px;} #ft .ft-yoga .box ul li { font-size: 16px;} #ft .ft-yoga .box ul.txt3 { padding-left: 0px;} #ft .ft-yoga .box ul.txt3 li { display: inline-block; margin-right: 10%; font-weight: 700;} #ft .ft-yoga .box ul.txt3 li:last-child {margin-right: 0px;} #ft .ft-yoga .box ul.txt1{ margin-bottom: 20px;} #ft .ft-yoga .box ul.txt1 li { display: block; margin-bottom: 8px; font-weight: 700;} #ft .ft-yoga .box ul.txt1 li:last-child { margin-bottom: 0px;} #ft .ft-yoga .box ul.area {} #ft .ft-yoga .box ul.area li { display: inline-block; width: 50%; vertical-align: top;} #ft .ft-yoga .box ul li a { position: relative; display: inline-block; color: #fff; text-decoration: none; letter-spacing: 0.2rem;} #ft .ft-yoga .box ul li a:after { content: ''; display: block; width: 0%; height: 1px; background: #fff; position: absolute; left: 0px; bottom: 0px; transition: .3s ease;} #ft .ft-yoga .box ul li a:hover:after{ width: 100%;} #ft .ft-yoga .box dl dt { margin-bottom: 8px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.2rem;} #ft .ft-yoga .box dl dd { position: relative; margin-bottom: 8px; font-size: 13px;} #ft .ft-yoga .box dl dd:last-child { margin-bottom: 0px;} #ft .ft-yoga .box dl dd a { position: relative; display: inline-block; color: #fff; text-decoration: none; letter-spacing: 0.1rem;} #ft .ft-yoga .box dl dd a:after { content: ''; display: block; width: 0%; height: 1px; background: #fff; position: absolute; left: 0px; bottom: 0px; transition: .3s ease;} #ft .ft-yoga .box dl dd a:hover:after{ width: 100%;} #ft .ft-yoga .box .btn-entry { width: 100%; max-width: 240px;} #ft .ft-yoga .box .btn-entry a { display: block; padding: 8px 0; background: #c5a600; transition: .3s ease; color: #fff; font-size: 16px; text-align: center; text-decoration: none; } #ft .ft-yoga .box .btn-entry a:hover { background: #fff; color: #3c3c3c;} #ft .ft-school { width: 94%; max-width: 1080px; margin: 0 auto; padding: 50px 0 10px;} #ft .ft-school .ft-nav-flex { display: flex; width: 100%; justify-content: space-between;} #ft .ft-school .box:nth-of-type(1) { width: 35%;} #ft .ft-school .box:nth-of-type(2) { width: 45%;} #ft .ft-school .box:nth-of-type(3) { width: 20%;} #ft .ft-school .box dl dt { margin-bottom: 8px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem;} #ft .ft-school .box dl dd { position: relative; margin-bottom: 8px; padding-left: 15px; font-size: 14px;} #ft .ft-school .box dl dd:last-child { margin-bottom: 0px;} #ft .ft-school .box dl dd:before { content: ''; display: block; width: 6px; height: 2px; background: #fff; position: absolute; left: 0px; top: 0.65em;} #ft .ft-school .box dl dd a { position: relative; display: inline-block; color: #fff; text-decoration: none; letter-spacing: 0.1rem;} #ft .ft-school .box dl dd a:after { content: ''; display: block; width: 0%; height: 1px; background: #fff; position: absolute; left: 0px; bottom: 0px; transition: .3s ease;} #ft .ft-school .box dl dd a:hover:after{ width: 100%;} #ft .ft-school .box ul { padding-left: 20px; font-size: 0px;} #ft .ft-school .box ul li { display: inline-block; width: 50%; margin-bottom: 8px; font-size: 16px; font-weight: 700;} #ft .ft-school .box ul li a { position: relative; display: inline-block; color: #fff; text-decoration: none; letter-spacing: 0.2rem;} #ft .ft-school .box ul li a:after { content: ''; display: block; width: 0%; height: 1px; background: #fff; position: absolute; left: 0px; bottom: 0px; transition: .3s ease;} #ft .ft-school .box ul li a:hover:after{ width: 100%;} #ft .ft-school .box .btn-entry {} #ft .ft-school .box .btn-entry a { display: block; padding: 8px 0; background: #c5a600; border-radius: 50px; transition: .3s ease; color: #fff; font-size: 16px; text-align: center; text-decoration: none; } #ft .ft-school .box .btn-entry a:hover { background: #fff; color: #3c3c3c;} #ft .ft-follow { padding: 25px 0;} #ft .ft-follow p { color: #fff; text-align: center;} #ft .ft-follow p span { display: inline-block; margin-right: 20px; font-family: 'Lexend Peta', sans-serif; font-size: 20px; font-weight: 700; vertical-align: middle;} #ft .ft-follow p a { display: inline-block; margin: 0 8px; vertical-align: middle;} #ft .ft-follow p a img { height: 27px; vertical-align: bottom;} #ft .ft-follow p a svg { width: auto; height: 27px; fill: #fff; vertical-align: bottom;} #ft .ft-follow p a:hover { opacity: 0.8;} #ft .ft-ctn-2 { padding: 50px 0 30px;} #ft .ft-ctn-2 .ft-inner { position: relative; width: 90%; max-width: 450px; margin: 0 auto 30px; padding: 30px 0; padding-left: 100px;} #ft .ft-ctn-2 .ft-logo { position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 85px;} #ft .ft-ctn-2 .ft-logo h3 { margin: 0;} #ft .ft-ctn-2 .ft-logo h3 a { display: block; } #ft .ft-ctn-2 .ft-logo h3 a img { width: 100%; vertical-align: bottom;} #ft .ft-ctn-2 ul { margin: 0; padding: 0; font-size: 0; text-align: center;} #ft .ft-ctn-2 ul li { display: inline-block; padding: 4px 18px; border-right: solid 1px #000; font-size: 12px;} #ft .ft-ctn-2 ul li a { color: #000; text-decoration: none;} #ft .cr { text-align: center;} #ft .cr p { margin: 0; font-size: 12px; line-height: 1;} #ft .cr p a { color: #000; text-decoration: none;} #ft .cr p a:hover { text-decoration: underline;} @media (max-width: 801px) { #ft .ft-yoga .box:nth-of-type(1) { width: 20%;} #ft .ft-yoga .box:nth-of-type(2) { width: 55%;} #ft .ft-yoga .box ul.txt3 li { display: block; width: 100%;} #ft .ft-school .box:nth-of-type(1) { width: 40%;} #ft .ft-school .box:nth-of-type(2) { width: 40%;} #ft .ft-school .box ul li { display: block; width: 100%;} #ft .ft-school .box .btn-entry a { font-size: 14px;} } @media (max-width: 641px) { #ft .ft-yoga { display: none;} #ft .ft-school { display: none;} } @media (max-width: 481px) { #ft .ft-follow { padding: 12px 0 15px;} #ft .ft-follow p span { display: block; margin: 0 auto 5px; font-size: 18px;} #ft .ft-ctn-2 { padding: 30px 0 20px;} #ft .ft-ctn-2 .ft-inner { margin: 0 auto 20px; padding-left: 0px;} #ft .ft-ctn-2 .ft-logo { position: relative; left: auto; top: auto; transform: translate(0,0); margin: 0 auto 10px;} #ft .ft-ctn-2 ul li { padding: 2px 12px;} #ft .ft-ctn-2 ul li:last-child{ border-right: none;} #ft .cr p { font-size: 10px;} } /* other-brands */ #other-brands .inner-sct{ padding: 80px 0 120px;} #other-brands h3 { margin-bottom: 12px; text-align: center;} #other-brands h3 img { width: 80%; max-width: 540px;} #other-brands .ctn { width: 92%; max-width: 1080px; margin: 0 auto;} #other-brands .ctn ul { width: 100%; font-size: 0; padding-left: 0; text-align: center;} #other-brands .ctn ul li { display: inline-block; width: 25%; vertical-align: top; padding: 10px;} #other-brands .ctn ul li a { display: block; width: 100%; max-width: 320px; margin: 0 auto; background: #fff; color: #000; text-decoration: none; height: 100%;} #other-brands .ctn ul li.ob_yoga a { border: 3px solid #c4ac52;} #other-brands .ctn ul li.ob_yoga dt { background-color: #c4ac52;} #other-brands .ctn ul li.ob_school a { border: 3px solid #98b7d3;} #other-brands .ctn ul li.ob_school dt { background-color: #98b7d3;} #other-brands .ctn ul li.ob_pilates a { border: 3px solid #889d8c;} #other-brands .ctn ul li.ob_pilates dt { background-color: #889d8c;} #other-brands .ctn ul li.ob_esthe a { border: 3px solid #e198a1;} #other-brands .ctn ul li.ob_esthe dt { background-color: #e198a1;} #other-brands .ctn ul li.ob_fit a { border: 3px solid #787878;} #other-brands .ctn ul li.ob_fit dt { background-color: #787878;} #other-brands .ctn ul li a:hover { opacity: 0.8;} #other-brands .ctn ul li dl dt { padding: 25px 10px; text-align: center;} #other-brands .ctn ul li dl dt img { width: 75%;} #other-brands .ctn ul li dl dd.pht img { width: 100%;} #other-brands .ctn ul li dl dd.txt { min-height: 250px; padding: 15px 16px 10px; font-size: 15px; line-height: 1.6; letter-spacing: 0.075rem; text-align: left;} #other-brands .ctn ul li dl dd.txt span { display: block; margin-bottom: 12px; color: #e59097; font-size: 22px; font-weight: 700; text-align: center;} @media (max-width: 1001px) { #other-brands .ctn ul li dl dd.txt { min-height: 220px; padding: 8px 12px; font-size: 18px;} #other-brands .ctn ul li dl dd.txt span { font-size: 24px;} } @media (max-width: 801px) { #other-brands .inner-sct { padding: 40px 0;} #other-brands .ctn ul li { width: 50%; padding: 8px;} #other-brands .ctn ul li dl dt { padding: 15px 0px 8px;} #other-brands .ctn ul li dl dd.pht { padding: 10px 20px;} #other-brands .ctn ul li dl dd.txt { min-height: 135px; padding: 10px 20px; font-size: 13px; line-height: 1.6; letter-spacing: 0.025rem;} #other-brands .ctn ul li dl dd.txt span { font-size: 18px;} } @media (max-width: 481px) { #other-brands { margin-bottom: 60px;} #other-brands .inner-sct { padding: 30px 0;} #other-brands .ctn ul li dl dt { padding: 8px 0px 10px;} #other-brands .ctn ul li dl dt img { width: 55%;} #other-brands .ctn ul li dl dd.pht { padding: 10px;} #other-brands .ctn ul li dl dd.txt { min-height: 160px; padding: 5px 12px 10px; font-size: 11px; line-height: 1.4;} #other-brands .ctn ul li dl dd.txt span { margin-bottom: 8px; font-size: 15px;} } .breadlist { padding: 30px;} .breadlist ul { width: 100%; max-width: 1100px; margin: 0 auto; font-size: 0;} .breadlist ul li { position: relative; display: inline-block; padding-left: 30px; font-size: 15px;} .breadlist ul li:first-child { padding-left: 0px;} .breadlist ul li:before { content: ''; width: 8px; height: 8px; border-top: solid 1px #000; border-right: solid 1px #000; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(45deg); } .breadlist ul li:first-child:before { content: none;} .breadlist ul li a { color: #000; text-decoration: none;} .breadlist ul li a:hover { text-decoration: underline;} @media (max-width: 641px) { .breadlist { display: none;} } .blank-kv { height: 50px;} .coupon { background-image: repeating-linear-gradient(-45deg, #424242, #424242 9px, #666 0, #666 10px); background-size: 14px 14px;} .coupon .inner { padding: 40px 0;} @media (max-width: 641px) { .coupon {background-image: repeating-linear-gradient(-45deg, #424242, #424242 5px, #666 0, #666 6px); background-size: 9px 9px;} } /* Studio -------------------------------------------------- */ #studios-kv { background: url('/home/wp-content/themes/lalaaasha/assets/images/common/bg-kv-studios.jpg') no-repeat 50% 50% / cover;} #studios-kv .inner-kv { position: relative; width: 92%; max-width: 1200px; margin: 0 auto; padding: 180px 0;} #studios-kv h2 { color: #fff; font-size: 24px; font-weight: 400;} #studios-kv h2 img { width: 60%; max-width: 400px;} #studios-kv h2 span { display: block; letter-spacing: 0.2rem;} #studios-kv .sp-lead { display: none; width: 100%;} @media (max-width: 641px) { #studios-kv { background: url('/home/wp-content/themes/lalaaasha/assets/images/common/bg-kv-studios-sp.jpg') no-repeat 50% 50% / cover;} #studios-kv .inner-kv { height: 85vh; padding: 140px 0;} #studios-kv h2 { font-size: 18px;} #studios-kv h2 img { margin-bottom: 10px;} #studios-kv .sp-lead { display: block; position: absolute; top: 50%;} #studios-kv .sp-lead p { margin: 0; color: #fff; font-size: 15px; letter-spacing: 0.25rem; line-height: 2; text-align: center;} #studios-kv .sp-lead p span { display: block;} .pc-lead { display: none;} } @media (max-width: 481px) { #studios-kv ..sp-lead p { font-size: 14px;} } #studios-link { margin-bottom: 120px;} #studios-link .inner-sct { width: 92%; max-width: 1024px; margin: 0 auto; padding-top: 60px;} #studios-link .tit { max-width: 620px; margin: 0 auto 60px;} #studios-link .tit h2 { padding-bottom: 10px; border-bottom: solid 1px #6a876f; text-align: center;} #studios-link .tit h2 img { width: 88%;} #studios-link .ctn-flex { display: flex; width: 100%;} #studios-link .box { width: 50%;} #studios-link .box h3 { margin-bottom: 10px;} #studios-link .box h3 img { width: 100%;} #studios-link ul { width: 100%; max-width: 800px; margin: 0 auto; text-align: center;} #studios-link .box ul { border-top: solid 1px #6a876f; text-align: left;} #studios-link ul li { border-bottom: solid 1px #6a876f; background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #dab300 8px, #dab300 10px);} #studios-link ul li a { display: block; background: rgba(255,255,255,1); color: #000; text-decoration: none; transition: 0.4s linear;} #studios-link ul li a dl { padding: 25px 10px 20px;} #studios-link ul li a dl dt { margin-bottom: 5px;} #studios-link ul li a dl dt img { width: 100%; max-width: 380px; vertical-align: bottom;} #studios-link ul li a dl dd { font-size: 20px; font-weight: 700; letter-spacing: 0.2rem;} #studios-link ul li a:hover { background: rgba(255,255,255,0.4); color: #000; text-decoration: none;} @media (max-width: 641px) { #studios-link .inner-sct { padding-top: 60px;} #studios-link ul { border-top: solid 1px #6a876f; border-left: solid 1px #6a876f; border-right: solid 1px #6a876f;} #studios-link ul li a dl { padding: 15px 0;} #studios-link ul li a dl dt{ display: none;} #studios-link ul li a dl dd { font-size: 18px; text-align: center;} } @media (max-width: 481px) { #studios-link { margin-bottom: 60px;} #studios-link .stl { margin-bottom: 30px;} #studios-link ul li a dl dd { font-size: 14px; letter-spacing: 0.075rem;} } #studios-amanity {} #studios-amanity .inner-sct { width: 92%; max-width: 1024px; margin: 0 auto; padding: 60px 0 100px;} #studios-amanity .tit { max-width: 620px; margin: 0 auto 20px;} #studios-amanity .tit h2 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: solid 1px #6a876f; text-align: center;} #studios-amanity .tit h2 img { width: 88%;} #studios-amanity p { text-align: center;} #studios-amanity ul { width: 100%; margin: 0 auto; padding-top: 40px; font-size: 0; text-align: center;} #studios-amanity ul.amanity-4 { max-width: 640px; } #studios-amanity ul.amanity-5 {} #studios-amanity ul li { position: relative; display: inline-block; max-width: 320px; padding: 10px 0;} #studios-amanity ul.amanity-4 li { width: 50%; } #studios-amanity ul.amanity-5 li { width: 32%; } #studios-amanity ul li:after { content: ''; display: block; width: 90%; padding-top: 90%; margin: 0 auto; border-radius: 50%; opacity: 0.6; background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #dab300 8px, #dab300 10px); z-index: 1; } #studios-amanity ul li dl { position: absolute; width: 100%; top: 50%; transform: translate(0,-55%); z-index: 2;} #studios-amanity ul li dl dt {} #studios-amanity ul li dl dt img { width: 100%; max-width: 100px;} #studios-amanity ul li dl dd { font-size: 16px;} #studios-amanity ul li dl dd span.tips { display: block; width: 60%; margin: 0 auto 8px; padding-bottom: 8px; border-bottom: solid 1px #a6a6a6; color: #d26a73; font-size: 18px; font-weight: 700; line-height: 1.2; } #studios-amanity ul li dl dd span.br { display: block;} @media (max-width: 801px) { #studios-amanity ul { text-align: left;} #studios-amanity ul.amanity-4 { width: 90%; max-width: 400px; } #studios-amanity ul.amanity-5 { width: 90%; max-width: 400px; } #studios-amanity ul li { display: block; max-width: 100%; margin: 0 auto 20px; padding: 0px;} #studios-amanity ul.amanity-4 li { width: 100%; } #studios-amanity ul.amanity-5 li { width: 100%; } #studios-amanity ul li:last-child { margin: 0 auto;} #studios-amanity ul li:after { content: none;} #studios-amanity ul li dl { position: relative; display: table; width: 100%; top: auto; transform: translate(0,0);} #studios-amanity ul li dl dt, #studios-amanity ul li dl dd { display: table-cell; vertical-align: middle;} #studios-amanity ul li dl dt { width: 80px;} #studios-amanity ul li dl dt span { display: block; padding: 15px; border-radius: 50%; background: repeating-linear-gradient(-45deg, #fff, #fff 4.2px, #dab300 4.2px, #dab300 5px); } #studios-amanity ul li dl dd { width: auto; padding-left: 20px;} #studios-amanity ul li dl dd span.tips { width: 100%; padding-bottom: 0; border: none;} #studios-amanity ul li dl dd span.tips br { display: none;} #studios-amanity ul li dl dd span.br { display: inline;} } @media (max-width: 481px) { #studios-amanity .inner-sct { padding: 40px 0 80px;} #studios-amanity p span { display: block;} #studios-amanity ul li dl dd { padding-left: 12px; font-size: 13px;} #studios-amanity ul li dl dd span.tips { font-size: 16px;} } .trial-code { background: url('/home/wp-content/themes/lalaaasha/assets/images/common/bg-ptn-1.jpg');} .trial-code .inner-sct { width: 100%; max-width: 1300px; margin: 0 auto; padding: 60px 0;} .trial-code .tit { margin-bottom: 30px;} .trial-code .tit h2 { color: #333; font-size: 30px; font-weight: 700; text-align: center;} .trial-code .tit h2 span { display: inline-block; padding-bottom: 4px; border-bottom: solid 2px #333;} .trial-code .tit h2 br { display: none;} .trial-code h3 { margin-bottom: 20px; text-align: center;} .trial-code h3 img { width: 90%; max-width: 900px;} .trial-code h3 img.sp { display: none;} .trial-code p.first { margin-bottom: 30px; text-align: center;} .trial-code p.first img { width: 80%; max-width: 488px;} .trial-code .code-txt { display: flex; flex-direction: row-reverse; align-items: flex-end; width: 100%; max-width: 860px; margin: 0 auto 40px;} .trial-code .code-txt .code { width: 50%; padding: 0 40px;} .trial-code .code-txt .code.mini { max-width: 420px; margin: 0 0 0 auto;} .trial-code .code-txt .date { width: 50%; padding-top: 0.6em;} .trial-code .code-txt .code div { position: relative; width: 100%; padding: 10px; background: #fff; border: solid 2px #eb2328;} .trial-code .code-txt .code div:before, .trial-code .code-txt .code div:after { content: ''; display: block; width: 0; height: 0px; position: absolute; border: solid 15px transparent;} .trial-code .code-txt .code div:before{ top: -16px; right: 15%; border-bottom: solid 16px #eb2328; border-top: 0px;} .trial-code .code-txt .code div:after { top: -13px; right: 15%; border-bottom: solid 16px #fff; border-top: 0px;} .trial-code .code-txt .code div p { color: #eb2328; font-size: 21px; font-weight: 700; text-align: center;} .trial-code .code-txt .code p.note { font-size: 14px; text-align: center;} .trial-code .code-txt .code p.note span { display: none; color: #eb2328;} .trial-code .code-txt .date p { /* color: #eb2328; */ font-size: 14px; font-weight: 700; text-align: right;} .trial-code .coupon-txt { margin-bottom: 20px; text-align: center;} .trial-code .coupon-txt:before, .trial-code .coupon-txt:after { content: ''; position: relative; display: inline-block; width: 1px; height: 30px; background: #333; vertical-align: middle;} .trial-code .coupon-txt:before{ transform: rotate(-20deg);} .trial-code .coupon-txt:after { transform: rotate(20deg);} .trial-code .coupon-txt p { display: inline-block; margin: 0 20px; font-size: 26px; font-weight: 700; text-align: center; vertical-align: middle;} .trial-code .coupon-txt p span { color: #ec2328; font-size: 36px;} .trial-code .coupon-txt p br { display: none;} .trial-code .btn-flex { width: 88%; max-width: 860px; margin: 0 auto 40px;} .trial-code .btn-flex ul { display: flex; justify-content: space-between;} .trial-code .btn-flex ul li { width: 48.5%; font-size: 24px;} .trial-code .btn-flex ul li a { display: block; width: 100%; padding: 30px 0; background: #c5a600; color: #fff; font-weight: 700; letter-spacing: 0.075rem; text-align: center; text-decoration: none; } .trial-code .btn-flex ul li a:hover { text-decoration: none; opacity: 0.8;} .trial-code figure { margin-bottom: 30px; text-align: center;} .trial-code figure img { width: 88%; max-width: 810px;} .trial-code ul.otoku { width: 90%; max-width: 870px; margin: 0 auto 30px; font-size: 0; text-align: center;} .trial-code ul.otoku li { display: inline-block; width: 50%;} .trial-code ul.otoku li img { width: 90%;} .trial-code p.txt { font-size: 20px; line-height: 1.5; text-align: center;} .trial-code .btn-check { width: 80%; max-width: 600px; margin: 30px auto 0;} .trial-code .btn-check a { display: block; width: 100%; padding: 30px 0; background: #c5a600; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 0.075rem; text-align: center; text-decoration: none; } .trial-code .btn-check a:hover { text-decoration: none; opacity: 0.8;} @media (max-width: 801px){ .trial-code .tit h2 { font-size: 4.0vw;} .trial-code .code-txt .code div p { font-size: 2.8vw;} .trial-code .code-txt .code p.note { font-size: 12px;} .trial-code .code-txt .date p { font-size: 2.4vw;} .trial-code .coupon-txt p { font-size: 3.2vw;} .trial-code .coupon-txt p span { font-size: 3.8vw;} .trial-code .btn-flex ul li { font-size: 2.4vw;} .trial-code .btn-flex ul li a { padding: 20px 0;} .trial-code p.txt { font-size: 18px;} .trial-code .btn-check a { padding: 20px 0; font-size: 21px;} } @media (max-width: 641px){ .trial-code .code-txt { display: block; width: 82%; margin: 0 auto;} .trial-code .code-txt .code { width: 100%; margin: 0 auto; padding: 0px;} .trial-code .code-txt .code.mini { max-width: 84%;} .trial-code .code-txt .date { display: block; width: 80%; margin: 0 0 0 auto;} .trial-code .code-txt .date p { text-align: center;} .trial-code .code-txt .code div p { font-size: 20px;} .trial-code .code-txt .code p.note span { display: block; padding: 10px 0 6px; font-size: 18px; font-weight: 700;} .trial-code .code-txt .code div { padding: 10px; border-width: 1px;} .trial-code .code-txt .code div:before, .trial-code .code-txt .code div:after { border: solid 10px transparent;} .trial-code .code-txt .code div:before{ top: -14px; right: 6.5%; border-bottom: solid 14px #eb2328; border-top: 0px;} .trial-code .code-txt .code div:after { top: -12px; right: 6.5%; border-bottom: solid 14px #fff; border-top: 0px;} .trial-code figure { margin-bottom: 20px;} .trial-code p.txt { font-size: 16px;} .trial-code p.txt span { display: block;} .trial-code .btn-check { margin-top: 20px;} .trial-code .btn-check a { font-size: 18px;} } @media (max-width: 481px){ .trial-code .inner-sct { padding: 40px 0;} .trial-code .tit { margin-bottom: 20px;} .trial-code .tit h2 { font-size: 18px;} .trial-code .tit h2 span { padding-bottom: 3px; border-width: 1px;} .trial-code .tit h2 span.mb { margin-bottom: 8px;} .trial-code .tit h2 br { display: none;} .trial-code h3 { margin-bottom: 10px;} .trial-code h3 img.pc { display: none;} .trial-code h3 img.sp { display: block; margin: 0 auto;} .trial-code p.first { margin-bottom: 20px;} .trial-code .code-txt { margin: 0 auto 30px;} .trial-code .code-txt .code div { padding: 6px; padding-left: 25px;} .trial-code .code-txt .code div:before, .trial-code .code-txt .code div:after { border: solid 8px transparent;} .trial-code .code-txt .code div:before{ top: -10px; right: 6.5%; border-bottom: solid 10px #eb2328; border-top: 0px;} .trial-code .code-txt .code div:after { top: -8px; right: 6.5%; border-bottom: solid 10px #fff; border-top: 0px;} .trial-code .code-txt .code div p { font-size: 16px; text-align: left;} .trial-code .code-txt .code div p span { display: block;} .trial-code .code-txt .code p.note { font-size: 10px;} .trial-code .code-txt .code p.note span { padding: 8px 0 4px; font-size: 15px;} .trial-code .coupon-txt { margin: 0 auto 12px;} .trial-code .coupon-txt p { margin: 0 8px; font-size: 16px; line-height: 1.4;} .trial-code .coupon-txt p span { font-size: 20px;} .trial-code .btn-flex ul { display: block;} .trial-code .btn-flex ul li { width: 100%; padding: 8px 0; font-size: 16px;} .trial-code .btn-flex ul li a { padding: 15px 0;} .trial-code ul.otoku { width: 70%; margin: 0 auto 10px;} .trial-code ul.otoku li { display: block; width: 100%; padding: 10px 0;} .trial-code p.txt { font-size: 15px;} .trial-code .btn-check a { padding: 12px 0; font-size: 16px;} .trial-code .btn-check a span { display: block;} }