@charset "utf-8"; /*===============================================================================================================================================*/ /* Default font(s) and text size /*===============================================================================================================================================*/ html { font-size: 14px; line-height: 1.6em; overflow-x: hidden; } body { background-color: #FFF; width: 100%; min-width: 320px; margin: 0 auto; padding: 0; position: relative; color: #222; font-size: inherit; line-height: inherit; font-weight: normal; font-style: normal; text-align: justify; word-wrap: break-word; overflow-x: hidden; } html[lang=en] body { text-align: left; } body, .sans-serif, .gothic { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Helvetica, "MS Pゴシック", "MS P Gothic", sans-serif; } .serif, .mincho { font-family: "ヒラギノ明朝 Pro W4","Hiragino Mincho Pro","HGS明朝B","MingLiU","SimSun","MS P明朝",serif; } .c-defult, .c-defult { color: #222; } .none { display: none; } strong { font-weight: normal; } footer div { display: block; padding: 5px 0; background-color: #f6f6f6; } /* English */ .eng-sans { font-family: Verdana, Geneva, Arial, sans-serif; } .times { font-family: "Times New Roman", Times, serif; } /* a[href*="/luana-chapel/"] img{ border-radius: 60px; border: 4px solid #e52129; box-sizing: border-box; } a[href*="/luana-chapel/"]:hover img{ border: 4px solid #5a5; } */ .site_banner{ margin: 30px 0 10px; background: #fd8988; padding: 1px 0 0; } .site_banner a{ display: block; max-width: 1080px; margin: auto; } .site_banner a img.pc{ display: block; margin-top: -2.87%; } .site_banner a img.smt{ display: none; } .site_banner_words{ margin: 10px 0 60px; text-align: center; font-weight: bold; } @media screen and (max-width: 799px) { footer div { padding-bottom: 48px; } .site_banner{ margin: 0 0 10px; background: transparent; } .site_banner a img.pc{ display: none; } .site_banner a img.smt{ display: block; } .site_banner_words{ margin: 0 0 40px; } } @media screen and (max-width: 599px) { html { font-size: 13px; } a[href*="/luana-chapel/"] img, a[href*="/luana-chapel/"]:hover img{ border-width: 2px; } } @media screen and (max-width: 399px) { html { font-size: 12px; } } /*==========================================================================================================================================================*/ /* Base tags - Redefinition */ /*==========================================================================================================================================================*/ h1, h2, h3, h4, h5, h6, p, div, img, a, ol, ul, li, dl, dt, dd, table, tbody, tfoot, thead, tr, th, td, span, small, strong, em, b, i, u, var, del, ins, iframe, object, button, fieldset, legend, input[type=text], input[type=password], input[type=number], textarea, select, option, form, sub, sup, address, blockquote, time { margin: 0; padding: 0; border: 0; font-size: 1em; line-height: 1.6em; color: inherit; font-weight: inherit; font-style: inherit; font-family: inherit; text-indent: 0; } a, span, small, strong, em, b, i, u { line-height: inherit; } ::before, ::after { text-indent: 0; } /* HTML5 resets */ /*===============================================================================================================================================*/ header, main, footer, nav, aside, figure, figcaption, section, article, address { display: block; padding: 0; margin: 0; } del, ins { text-decoration: none; } /*==========================================================================================================================================================*/ /* Tag-specific */ /*==========================================================================================================================================================*/ /* Links - may or may not want to define default colors depending on design */ /*==========================================================================================================================================================*/ a, button, label, input[type=checkbox], input[type=radio], input[type=submit], input[type=reset], [onclick] { cursor: pointer; } a:not([href]):not([onclick]), button:not([onclick]) { cursor: default; } input[type=text][onclick], input[type=password][onclick] { cursor: text; } button, input[type=submit], input[type=reset] { -webkit-appearance: none; -webkit-border-radius: 0; } /* Give links no special treatment by default */ a { color: inherit; color: #7af; text-decoration: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } a:hover { text-decoration: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } a img{ -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } a:hover img { opacity: 0.7; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* In general, links in a P tag should look a different color than text. For other tags, use .text-link */ p a, .text-link a, a.text-link { color: #0071BC; } p a:hover, .text-link a:hover, a.text-link:hover, label:hover { color: #0091DC; text-decoration: underline; } /* For some links (e.g. images), this will provide a simple hover animation */ .img-link a:hover, a.img-link:hover { opacity: 0.75; } /* Images - these settings are suitale for responsive design and scaling. Emoji should still be inline, however. /*==========================================================================================================================================================*/ img { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; } .emoji img, img.emoji { display: inline; } /* Lists */ /*==========================================================================================================================================================*/ ol, ul, li, dl, dt, dd { list-style: none; list-style-type: none; } /* Tables */ /*==========================================================================================================================================================*/ table { border-spacing: 0; empty-cells: show; border-collapse: collapse; table-layout: fixed; width: 100%; } table tr th, table tr td { word-wrap: break-word; vertical-align: top; } /*===============================================================================================================================================*/ /* Dynamic pages and inputs */ /*==========================================================================================================================================================*/ input[type=text], input[type=password], input[type=number], textarea, select { box-sizing: border-box; border: 1px solid; font-size: 16px; /* Done to ensure no auto zooming on iPhones */ } input[type=checkbox], input[type=radio] { margin-top: 0; margin-bottom: 0; padding: 0; } textarea { max-width: 100%; resize: vertical; } .tr{ text-align: right !important; } .tc{ text-align: center !important; } /* This class (generally used on a div) forces an input, select, or textarea to be the full size of its parent. /* To control specific widths, resize the parent tag (or its parent tag). /* Such sizing is FAR more reliable than sizing the bare input and gives much better control maintaining a uniform appearance. */ .input-holder { overflow: hidden; padding: 1px; box-sizing: border-box; } .input-holder > input, .input-holder > textarea, .input-holder > select { width: 100%; display: block; } /* Captions placed beside text inputs (e.g. "First Name"). /* This is generally a parent of an .input-holder and allows a caption to be on either side of the input. /* Needs an accompanying .fr (right side) or .fl (left side) for the caption itself. */ .input-holder-caption { position: relative; overflow: hidden; text-align: left; } .input-holder-caption > .fr { padding-left: 0.5em; } .input-holder-caption > .fl { padding-right: 0.5em; } /* For phone numbers, this will put 3 boxes of equal width complete with dashes in the middle. /* FORMAT: Main tag is .phone-inputs-wrap, next is .phone-inputs, then div children containing text inputs. /* (Should generally only use 3 total divs) */ .phone-inputs-wrap { overflow: hidden; } /* Children divs have padding on either side, but this will extend them to the edge for perfect, equal width. */ .phone-inputs { margin-left: -0.5em; margin-right: -0.5em; } .phone-inputs > div { display: inline-block; vertical-align: top; width: 6em; max-width: 33.3333%; max-width: calc(100% / 3); box-sizing: border-box; position: relative; padding-right: 0.5em; padding-left: 0.5em; } .phone-inputs > div::after { content: "-"; line-height: 1.2em; width: 1em; right: -0.5em; top: 50%; margin-top: -0.6em; position: absolute; text-align: center; } .phone-inputs > div:nth-child(3n)::after, .phone-inputs > div:last-child::after { content: none; } .phone-inputs > div > input { width: 100%; display: block; } /* For dates, this will assume the format of: (Jan, 01, 2XXX) /* FORMAT: Main tag is .date-inputs-wrap, next is .date-inputs, then div children containing selects. */ .date-inputs-wrap { overflow: hidden; } /* Children divs have padding on either side, but this will extend them to the edge for perfect, equal width. */ .date-inputs { margin-left: -0.5em; margin-right: -0.5em; } .date-inputs > div { display: inline-block; vertical-align: top; padding: 0 0.5em; box-sizing: border-box; } .date-inputs > div:nth-child(1) { max-width: 32.5%; } .date-inputs > div:nth-child(2) { max-width: 32.5%; } .date-inputs > div:nth-child(3) { max-width: 35%; } .date-inputs > div > select { display: block; width: 100%; } .date-inputs > div > select option { padding-right: 1em; } /* radio/checkbox */ .multi-inputs {} .multi-inputs > div { display: inline-block; vertical-align: top; } .multi-inputs > div:not(:last-child) { margin-right: 1em; } .multi-inputs > div > label { display: inline-block; } .multi-inputs.use-mt { margin-top: -1em; } .multi-inputs.use-mt > div { margin-top: 1em; } /* Indents checkboxes or radios */ .indent-input { padding-left: 25px; text-indent: -25px; } .indent-input input[type=checkbox], .indent-input input[type=radio] { width: 20px; display: inline-block; margin: 0 5px 0 0; text-indent: 0; } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Other common formatting */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ .items2 > li, .items2 > div, .items3 > li, .items3 > div, .items4 > li, .items4 > div { display: inline-block; vertical-align: top; margin-right: 2%; box-sizing: border-box; } .items2 > li, .items2 > div { width: 49%; } .items2.full-width > li, .items2.full-width > div { width: 50%; margin-right: 0; } .items3 > li, .items3 > div { width: 32%; } .items3.full-width > li, .items3.full-width > div { width: 33.3333%; width: calc(100% / 3); margin-right: 0; } .items4 > li, .items4 > div { width: 23.5%; } .items2 > li:nth-child(2n), .items2 > div:nth-child(2n), .items3 > li:nth-child(3n), .items3 > div:nth-child(3n), .items4 > li:nth-child(4n), .items4 > div:nth-child(4n) { margin-right: 0; } .items2:not(.no-margin) > li:nth-child(n+3), .items2:not(.no-margin) > div:nth-child(n+3), .items3:not(.no-margin) > li:nth-child(n+4), .items3:not(.no-margin) > div:nth-child(n+4), .items4:not(.no-margin) > li:nth-child(n+5), .items4:not(.no-margin) > div:nth-child(n+5) { margin-top: 2%; } @media screen and (max-width: 799px) { .items2:not(.leave) > li, .items2:not(.leave) > div, .items2.full-width:not(.leave) > li, .items2.full-width:not(.leave) > div, .items3:not(.leave) > li, .items3:not(.leave) > div, .items3.full-width:not(.leave) > li, .items3.full-width:not(.leave) > div, .items4:not(.leave) > li, .items4:not(.leave) > div { display: block; vertical-align: baseline; margin-right: auto; margin-left: auto; width: auto; } .items2:not(.leave) > li:nth-child(n+3), .items2:not(.leave) > div:nth-child(n+3), .items3:not(.leave) > li:nth-child(n+4), .items3:not(.leave) > div:nth-child(n+4), .items4:not(.leave) > li:nth-child(n+5), .items4:not(.leave) > div:nth-child(n+5) { margin-top: 0; } .items2:not(.no-margin):not(.leave) > li:not(:last-child), .items2:not(.no-margin):not(.leave) > div:not(:last-child), .items3:not(.no-margin):not(.leave) > li:not(:last-child), .items3:not(.no-margin):not(.leave) > div:not(:last-child), .items4:not(.no-margin):not(.leave) > li:not(:last-child), .items4:not(.no-margin):not(.leave) > div:not(:last-child) { margin-bottom: 20px; } .items4.leave.leave2 > li, .items4.leave.leave2 > div { width: 49%; } .items4.leave.leave2 > li:nth-child(4n), .items4.leave.leave2 > div:nth-child(4n) { margin-right: 2%; } .items4.leave.leave2 > li:nth-child(2n), .items4.leave.leave2 > div:nth-child(2n) { margin-right: 0; } .items4.leave.leave2:not(.no-margin) > li:nth-child(n+3), .items4.leave.leave2:not(.no-margin) > div:nth-child(n+3) { margin-top: 2%; } } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Bullet lists */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ ul.bullet-list-text:not(:last-child), ul.bullet-list-link:not(:last-child), ul.triangle-list-text:not(:last-child), ul.triangle-list-link:not(:last-child), ul.arrow-list-text:not(:last-child), ul.arrow-list-link:not(:last-child) { margin-bottom: 20px; } ul.bullet-list-text > li, ul.bullet-list-link > li > a { padding-left: 1em; text-indent: -1em; box-sizing: border-box; } ul.bullet-list-text.use-margin > li:not(:last-child) { margin-bottom: 20px; } ul.bullet-list-text.same-line > li { display: inline-block; vertical-align: top; } ul.bullet-list-text.same-line > li:not(:last-child) { margin-right: 1em; } ul.bullet-list-link > li > a { display: block; } ul.bullet-list-text > li::before, ul.bullet-list-link > li > a::before { background-color: currentColor; content: ""; width: 0.6em; height: 0.6em; margin: 0 0.2em; display: inline-block; border-radius: 50%; } ul.bullet-list-text.no-icon > li::before, ul.bullet-list-link.no-icon > li > a::before, ul.bullet-list-text > li.no-icon::before, ul.bullet-list-link > li.no-icon > a::before { content: none; } /* dots */ ul.bullet-list-text.gold-dot > li::before, ul.bullet-list-link.gold-dot > li > a::before, ul.bullet-list-text > li.gold-dot::before, ul.bullet-list-link > li.gold-dot > a::before { background-color: #B09B7C; } ul.bullet-list-text.pink-dot > li::before, ul.bullet-list-link.pink-dot > li > a::before, ul.bullet-list-text > li.pink-dot::before, ul.bullet-list-link > li.pink-dot > a::before { background-color: #FFB8B8; } /* triangle */ /* ================================= */ ul.triangle-list-text > li, ul.triangle-list-link > li > a { padding-left: 1em; text-indent: -1em; box-sizing: border-box; } ul.triangle-list-link > li > a { display: block; } ul.triangle-list-text > li::before, ul.triangle-list-link > li > a::before { content: ""; border-left: 0.5em solid currentColor; border-top: 0.4em solid transparent; border-bottom: 0.4em solid transparent; margin-right: 0.25em; margin-left: 0.25em; display: inline-block; vertical-align: 0.1em; box-sizing: border-box; } ul.triangle-list-text > li.no-icon::before, ul.triangle-list-link > li.no-icon > a::before { content: none; } /* arrow */ /* ================================= */ ul.arrow-list-text > li, ul.arrow-list-link > li > a { padding-left: 1em; text-indent: -1em; box-sizing: border-box; } ul.arrow-list-link > li > a { display: block; } ul.arrow-list-text > li::before, ul.arrow-list-link > li > a::before { content: ""; border-top: 2px solid currentColor; border-right: 2px solid currentColor; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0; margin-left: 0; margin-right: 0.5em; width: 0.5em; height: 0.5em; display: inline-block; vertical-align: 0.1em; box-sizing: border-box; } ul.arrow-list-text > li.no-icon::before, ul.arrow-list-link > li.no-icon > a::before { content: none; } /* */ ul.bullet-list-link > li > a:hover, ul.triangle-list-link > li > a:hover, ul.arrow-list-link > li > a:hover { background-color: #EEE; } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Numeric lists */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ ol.numeric-list { counter-reset: counter0; } ol.numeric-list > li { padding-left: 1.5em; text-indent: -1.5em; counter-increment: counter0; } ol.numeric-list > li:not(:last-child) { margin-bottom: 0.8em; } ol.numeric-list > li::before { content: counter(counter0) "."; display: inline-block; min-width: 1.5em; text-align: right; box-sizing: border-box; padding-right: 0.5em; } ol.numeric-list > li:nth-child(1):nth-last-child(n+10), ol.numeric-list > li:nth-child(2):nth-last-child(n+9), ol.numeric-list > li:nth-child(3):nth-last-child(n+8), ol.numeric-list > li:nth-child(4):nth-last-child(n+7), ol.numeric-list > li:nth-child(5):nth-last-child(n+6), ol.numeric-list > li:nth-child(6):nth-last-child(n+5), ol.numeric-list > li:nth-child(7):nth-last-child(n+4), ol.numeric-list > li:nth-child(8):nth-last-child(n+3), ol.numeric-list > li:nth-child(9):nth-last-child(n+2), ol.numeric-list > li:nth-child(n+10) { padding-left: 2em; text-indent: -2em; } ol.numeric-list > li:nth-child(1):nth-last-child(n+10)::before, ol.numeric-list > li:nth-child(2):nth-last-child(n+9)::before, ol.numeric-list > li:nth-child(3):nth-last-child(n+8)::before, ol.numeric-list > li:nth-child(4):nth-last-child(n+7)::before, ol.numeric-list > li:nth-child(5):nth-last-child(n+6)::before, ol.numeric-list > li:nth-child(6):nth-last-child(n+5)::before, ol.numeric-list > li:nth-child(7):nth-last-child(n+4)::before, ol.numeric-list > li:nth-child(8):nth-last-child(n+3)::before, ol.numeric-list > li:nth-child(9):nth-last-child(n+2)::before, ol.numeric-list > li:nth-child(n+10)::before { min-width: 2em; } .l_indent li{ padding-left: 1em; text-indent: -1em; margin: 0 0 5px; } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Pagination (general) */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ .pagination { text-align: center; overflow: hidden; padding: 1px 0; font-size: 1em; line-height: 1.4em; } .pagination a { background-color: #E0E0E0; line-height: inherit; } .pagination a:hover { background-color: #F0F0F0; } .pagination > a, .pagination > ol, .pagination > ol > li { box-sizing: border-box; display: inline-block; vertical-align: top; line-height: inherit; } .pagination > ol > li > a { display: block; } .pagination > ol > li > a.current { background-color: #EEE; } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Buttons (general) */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ .btns { text-align: center; margin: 40px auto 0; } .btns:not(:last-child) { margin-bottom: 20px; } .btns > a, .btns > button { background-color: #E0E0E0; display: inline-block; vertical-align: top; padding: 15px 35px 15px 15px; color: #323644; width: 200px; max-width: 48%; position: relative; box-sizing: border-box; overflow: hidden; } .btns > a:hover, .btns > button:hover { background-color: #F0F0F0; } .btns > a:not(:last-child), .btns > button:not(:last-child) { margin-right: 4%; } .btns > a:only-child, .btns > button:only-child { width: 400px; max-width: 100%; } /* max-size */ .btns.max-size > a, .btns.max-size > button { width: 48%; } .btns.max-size > a:only-child, .btns.max-size > button:only-child { width: 100%; } /* auto-size */ .btns.auto-size > a, .btns.auto-size > button { width: auto; } .btns.auto-size > a:only-child, .btns.auto-size > button:only-child { width: auto; } /* arrow */ .btns > a::after, .btns > button::after { content: ""; border-top: 2px solid currentColor; border-right: 2px solid currentColor; width: 0.5em; height: 0.5em; margin-top: -0.25em; position: absolute; right: 15px; top: 50%; box-sizing: border-box; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; } /* no-icon */ .btns > a.no-icon, .btns > button.no-icon { padding-right: 15px; } .btns > a.no-icon::after, .btns > button.no-icon::after { content: none; } @media screen and (max-width: 799px) { .btns.smt-break > a, .btns.smt-break > button { display: block; width: auto; max-width: none; margin: 0 auto 20px; } .btns.smt-break > a:last-child, .btns.smt-break > button:last-child { margin-bottom: 0; } } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Boxes (general) */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ .box { background-color: #F2F2F2; padding: 15px; } .outline-box { background-color: #FFF; padding: 15px; border: 1px solid currentColor; } .box:not(:last-child), .outline-box:not(:last-child) { margin-bottom: 20px; } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* iframe holders (YT videos, Google Maps, etc.) */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ .iframe-holder { background-color: #AAA; padding-top: 50%; position: relative; } .iframe-holder > iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Other common */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Text alignment (should never be overwritten, thus important) */ .tl { text-align: left !important; } .tc { text-align: center !important; } .tr { text-align: right !important; } .tj { text-align: justify !important; } /* Text appearance */ .bold { font-weight: bold; } .italic { font-style: italic; } .strike { text-decoration: line-through; } .underline { text-decoration: underline; } /* The small tag, by default, should have a set size reduction */ small { font-size: 0.8em; } /*===============================================================================================================================================*/ /* widths */ /*===============================================================================================================================================*/ .w-auto { width: auto !important; } .w100percent { width: 100%; } /* max widths */ .max1200px,.max1100px,.max1000px, .max900px,.max800px,.max700px,.max600px,.max500px, .max400px,.max300px,.max250px,.max200px,.max150px,.max100px, .max75px,.max50px { margin-left: auto; margin-right: auto; } .max1200px { max-width: 1200px; } .max1100px { max-width: 1100px; } .max1000px { max-width: 1000px; } .max900px { max-width: 900px; } .max800px { max-width: 800px; } .max700px { max-width: 700px; } .max600px { max-width: 600px; } .max500px { max-width: 500px; } .max400px { max-width: 400px; } .max300px { max-width: 300px; } .max250px { max-width: 250px; } .max200px { max-width: 200px; } .max150px { max-width: 150px; } .max100px { max-width: 100px; } .max75px { max-width: 75px; } .max50px { max-width: 50px; } /* min-widths */ .min1em, .min2em, .min3em, .min4em, .min5em, .min6em, .min7em, .min8em, .min9em, .min10em { display: inline-block; } .min1em { min-width: 1em; } .min2em { min-width: 2em; } .min3em { min-width: 3em; } .min4em { min-width: 4em; } .min5em { min-width: 5em; } .min6em { min-width: 6em; } .min7em { min-width: 7em; } .min8em { min-width: 8em; } .min9em { min-width: 9em; } .min10em { min-width: 10em; } /*===============================================================================================================================================*/ /* Simple inline block formatting with b tags */ /*===============================================================================================================================================*/ .b-ib b, .b-ib-smt-i b { display: inline-block; font-weight: inherit; } @media screen and (max-width: 799px) { .b-ib-smt-i b { display: inline; } } /*===============================================================================================================================================*/ /* Pre-determined margins settings that do not change with screen size */ /*===============================================================================================================================================*/ /* MLR */ .mlr0,.mrl0 { margin-left: 0 !important; margin-right: 0 !important; } .mlr-auto,.mrl-auto { margin-left: auto !important; margin-right: auto !important; } /* MT */ .mt0 { margin-top: 0 !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } /* MB */ .mb0 { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } /* Give auto bottom margins to the P tags for spacing */ .p-mb p:not(:last-child), .p-mb-direct > p:not(:last-child), .oh-mb > .oh:not(:last-child) { margin-bottom: 20px; } /*===============================================================================================================================================*/ /* Pre-determined padding settings that do not change with screen size */ /*===============================================================================================================================================*/ /* PT */ .pt0 { padding-top: 0 !important; } /* PB */ .pb0 { padding-bottom: 0 !important; } .plr10, .prl10 { padding-left: 10px !important; padding-right: 10px !important; } .plr15, .prl15 { padding-left: 15px !important; padding-right: 15px !important; } /*===============================================================================================================================================*/ /* Floats */ /*===============================================================================================================================================*/ .fl { float: left; } .fr { float: right; } /*===============================================================================================================================================*/ /* Overflow */ /*===============================================================================================================================================*/ .oh { overflow: hidden; } .ov { overflow: visible; } /*===============================================================================================================================================*/ /* Indenting (Generally for easily formatting lists) */ /*===============================================================================================================================================*/ .indent1 { padding-left: 1em; text-indent: -1em; } .indent2 { padding-left: 2em; text-indent: -2em; } .indent3 { padding-left: 3em; text-indent: -3em; } .indent4 { padding-left: 4em; text-indent: -4em; } .indent5 { padding-left: 5em; text-indent: -5em; } .indent6 { padding-left: 5em; text-indent: -5em; } .indent7 { padding-left: 5em; text-indent: -5em; } .indent8 { padding-left: 5em; text-indent: -5em; } .indent9 { padding-left: 5em; text-indent: -5em; } .indent10 { padding-left: 5em; text-indent: -5em; } /*===============================================================================================================================================*/ /* Device display override classes */ /*===============================================================================================================================================*/ .force-display-none { display: none !important; } .force-inline { display: inline; } .force-block { display: block; } .force-inline-block, .ib { display: inline-block; } /* --- */ .pc, .pc-block { display: block; } .pc-inline { display: inline; } .pc-inline-block { display: inline-block; } .smt, .smt-block, .smt-inline, .smt-inline-block { display: none; } @media screen and (max-width: 799px) { .pc, .pc-block, .pc-inline, .pc-inline-block { display: none; } .smt, .smt-block, .smt-force-block { display: block; } .smt-inline, .smt-force-inline { display: inline; } .smt-inline-block, .smt-force-inline-block { display: inline-block; } } /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /* Customized CSS starts here */ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ /*===============================================================================================================================================*/ h1 { background-color: #FFDADA; text-align: center; padding: 5px 10px; margin: 0 auto 30px; } header { margin: 0 auto 30px; } /* ------- */ #header-main-img-wrap { max-width: 1200px; margin: 0 auto 20px; position: relative; padding: 0 30px; } #header-main-img { position: relative; padding-top: 15px; } #header-main-img > div { overflow: hidden; } #header-main-img > div > img { width: 100%; max-width: none; } #header-main-img > figure { position: absolute; top: 0; left: 50px; width: 160px; } #header-main-img > figure img { width: 100%; } #header-main-img > h2 { position: absolute; left: 0; right: 0; bottom: 20px; color: #FFF; font-size: 1.8em; font-weight: bold; text-align: center; visibility: hidden; text-shadow: -1px 1px #600,0px 1px #600,1px 1px #600, -1px 0px #600,1px 0px #600, -1px -1px #600,0px -1px #600,1px -1px #600, 0 0 8px #400; } #header-main-img > h2 span, #header-main-img > h2 .strong { display: block; } #header-main-img > h2 span { line-height: 1.2em; } #header-main-img > h2 .strong { font-size: 2.4em; line-height: 1.2em; } #header-main-img .overlay1 { display: block; left: 0; right: 0; bottom: 20px; position: absolute; padding: 0 15px; } #header-main-img .overlay2 { display: block; right: 0; top: 15px; position: absolute; } /* ------- */ .marriott { width: 90.75%; margin: 0 auto; } /* ------- */ .campaign-pricing-header { text-align: center; } .campaign-pricing-header:not(:last-child) { margin-bottom: 20px; } .campaign-pricing-header > span { display: inline-block; vertical-align: middle; } .campaign-pricing-header > span.limited.smt { display: none; } .campaign-pricing-header > .txt { display: block; margin: 20px 0 20px; line-height: 1.4em; } /* --- */ .campaign-pricing-left { text-align: left; margin-top: 15px; margin-right: 2%; } .campaign-pricing-left.mt0 { margin-top: 0; } .campaign-pricing > b , .campaign-pricing-left > b { display: inline-block; vertical-align: middle; } .campaign-pricing > b:not(:last-child) , .campaign-pricing-left > b:not(:last-child) { margin-bottom: 5px; } .campaign-pricing em, .campaign-pricing .strong, .campaign-pricing del, .campaign-pricing ins , .campaign-pricing-left em, .campaign-pricing-left .strong, .campaign-pricing-left del, .campaign-pricing-left ins { display: inline-block; vertical-align: middle; } .campaign-pricing ins , .campaign-pricing-left ins , .campaign-pricing del , .campaign-pricing-left del { padding: 0; margin: -10px 0 -10px; } /* */ .campaign-pricing em , .campaign-pricing-left em { padding: 2px 0.75em; border: 0 solid currentColor; border-top-width: 1px; border-bottom-width: 1px; margin-right: 1em; } /* */ .campaign-pricing .strong , .campaign-pricing-left .strong { font-size: 1.3em; font-weight: bold; } /* */ .campaign-pricing del , .campaign-pricing-left del { position: relative; padding: 0 0 0.5em; margin-right: 15px; } .campaign-pricing del::before , .campaign-pricing-left del::before { content: ""; border: 0px solid #ff8585; border-top-width: 1px; border-bottom-width: 1px; height: 4px; position: absolute; top: 50%; margin-top: -3px; left: 0; right: 0; } .campaign-pricing del > span , .campaign-pricing-left del > span { font-size: 1.75em; line-height: 1.1em; font-weight: bold; display: inline-block; vertical-align: middle; } .campaign-pricing del > span small , .campaign-pricing-left del > span small { font-size: 0.6em; vertical-align: middle; } /* */ .campaign-pricing ins , .campaign-pricing-left ins { color: #e71c24; /* color: #ff0400; color: #ff8585; */ } .campaign-pricing ins::before, .campaign-pricing-left ins::before { background: url("./img/pink-arrow.svg") no-repeat center center; -webkit-background-size: 100% 100%; background-size: 100% 100%; content: ""; width: 32px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 8px; } .campaign-pricing ins.before-none::before, .campaign-pricing-left ins.before-none::before { content: none; } .campaign-pricing ins > span , .campaign-pricing-left ins > span { font-size: 3em; line-height: 1.4em; font-weight: bold; display: inline-block; vertical-align: middle; } .campaign-pricing ins > span small , .campaign-pricing-left ins > span small { font-size: 0.6em; vertical-align: middle; } .campaign-pricing i , .campaign-pricing-left i { display: inline-block; vertical-align: middle; font-size: 11px; line-height: 1em; padding-left: 5px; } .campaign-pricing i > span , .campaign-pricing-left i > span { display: block; width: 1em; height: 1em; line-height: inherit; } .campaign-pricing i > span:first-child, .campaign-pricing i > span:last-child , .campaign-pricing-left i > span:first-child, .campaign-pricing-left i > span:last-child { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .campaign-pricing small{ display: inline-block; line-height: 1.4em; } .campaign-pricing > b.extend { display: inline-block; padding: 0 0 0 60px; margin-left: 10px; background: url(./img/icon_sarani.png) no-repeat left center; background-size: 50px; vertical-align: top; } a.modal, .campaign-pricing > b.extend a{ display: block; margin: 5px 0 0; background: url(./img/icon_tri.png) no-repeat right center #888; background-size: 16px !important; font-size: 12px; line-height: 1.3em; padding: 5px 10px 5px 0; text-align: center; color: #fff; } .campaign-pricing > b.extend .strong{ display: inline; color: #555; } a.modal.smt, .campaign-pricing > b.extend a.smt{ display: none; } #colorbox button#cboxNext, #colorbox button#cboxPrevious{ /* display: none !important; */ } /* --- */ .campaign-pricing-right { width: 320px; text-align: center; } .lp2019 .campaign-pricing-right { width: 160px; } .campaign-pricing-right .strong, .campaign-pricing-right em { display: inline-block; margin: 0 auto; vertical-align: middle; } /* */ .campaign-pricing-right .strong { color: #ff8585; font-size: 1.65em; font-weight: bold; margin-bottom: 5px; } .campaign-pricing-right .strong small { font-size: 0.825em; display: block; } .campaign-pricing-right img{ width: 165px; } /* */ .campaign-pricing-right em { background-color: #ff8585; color: #FFF; padding: 10px; font-weight: bold; font-size: 1.15em; letter-spacing: 2px; line-height: 1.2em; } .campaign-pricing-right em.circle { position: relative; width: 130px; height: 130px; padding: 0; border-radius: 50%; letter-spacing: 0; font-size: 1.5em; } .campaign-pricing-right em.circle > span { position: absolute; display: block; width: 100%; left: 0; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /* ------- */ main { padding: 0 0 50px; } /* ------- */ section { padding: 0 30px; } section:not(:last-child) { margin-bottom: 40px; } /* */ .midasi1 { color: #ff8585; font-size: 1.75em; line-height: 1.4em; text-align: center; font-weight: bold; } .midasi1:not(:last-child) { margin-bottom: 20px; } .midasi1::before { background: url("./img/midasi1-decal.svg") no-repeat center center; -webkit-background-size: 100% auto; background-size: 100% auto; content: ""; width: 2.25em; height: 1.8em; display: block; margin: 0 auto 5px; } /* */ .midasi2 { text-align: center; position: relative; color: #FFF; font-size: 1.5em; font-weight: bold; padding: 5px 25px; } .midasi2:not(:last-child) { margin-bottom: 20px; } .midasi2::before, .midasi2::after { background-color: #ff8585; content: ""; position: absolute; top: 0; bottom: 0; left: 20px; right: 20px; } .midasi2::before { -webkit-transform: skewX(30deg); transform: skewX(30deg); } .midasi2::after { -webkit-transform: skewX(-30deg); transform: skewX(-30deg); } .midasi2 > span { position: relative; z-index: 2; display: block; } /* */ .midasi3 { text-align: center; font-size: 1.2em; } .midasi3:not(:last-child) { margin-bottom: 20px; } .midasi3 > em { color: #ff8585; font-size: 1.3em; line-height: 1.4em; font-weight: bold; display: block; } .midasi3 > small { font-weight: bold; display: block; line-height: 1.4em; } /* ------- */ #sec01 {} #sec01 article { overflow: hidden; max-width: 920px; margin: 0 auto; } #sec01 article > img, #sec01 article > div { display: inline-block; vertical-align: top; width: 49%; } #sec01 article > img { margin-right: 2%; } #sec01 article > div h3 { color: #ff8585; font-size: 1.25em; font-weight: bold; margin-bottom: 5px; } #sec01 article > div h4 { border: 0 solid currentColor; border-top-width: 1px; border-bottom-width: 1px; text-align: center; margin: 0 auto 15px; padding: 5px 0; } #sec01 figure { margin-top: -8%; } #sec01 figure > img { margin-right: 0; margin-bottom: -3.25%; position: relative; z-index: 2; } /* ------- */ #sec-point { background: url("./img/bg-pattern1.png") #F9DBE5; padding-top: 30px; padding-bottom: 60px; margin-bottom: 60px; } #sec-point .chapel-data { margin-bottom: 25px; text-align: center; } #sec-point .chapel-data dt { margin-bottom: 10px; } #sec-point-top-details { text-align: center; margin: 0 auto 40px; } #sec-point-top-details > img { margin: 0 auto 10px; } #sec-point-top-details > ul { font-size: 0.9em; } #sec-point-top-details > ul > li { display: inline-block; line-height: 1.4em; } #sec-point-top-details > ul > li:not(:last-child) { padding-right: 1em; border-right: 1px solid currentColor; margin-right: 1em; } .sec-point-list { margin: 0 auto; } .sec-point-list:not(:last-child) { margin-bottom: 40px; } .sec-point-list ol { position: relative; } .sec-point-list ol:not(:last-child) { margin-bottom: 20px; } .sec-point-list ol > li { background-color: #FFF; box-sizing: border-box; border: 0 solid #CCC; text-align: left; font-size: 12px; } .sec-point-list ol > li .label { position: relative; } .sec-point-list ol > li .label::after { position: absolute; bottom: -25px; content: attr(data-label); font-size: 10px; } .sec-point-list ol > li::before { background-color: inherit; content: ""; box-sizing: inherit; border: inherit; border-width: 1px; z-index: 1; position: absolute; top: 0; bottom: 0; width: inherit; } .sec-point-list ol > li > div { position: relative; z-index: 2; padding: 20px 30px; } .sec-point-list ol > li > div .ph { position: relative; } .sec-point-list ol > li > div .ph > a { position: absolute; bottom: -15px; right: 0; display: block; width: 72px; } .sec-point-list ol > li h4 { color: #ff8585; font-weight: bold; font-size: 1.3em; line-height: 1.6em; margin: 0 auto 10px; text-align: center; } .sec-point-list ol > li h4 .strong { font-size: 1.5em; line-height: inherit; display: inline-block; vertical-align: -0.15em; } .sec-point-list ol > li img { margin-bottom: 10px; } .sec-point-list ol > li h5 { color: #ff8585; font-weight: bold; font-size: 1.1em; } .sec-point-list ol > li nav{ clear: all; padding: 10px 0 0; overflow: hidden; } .sec-point-list ol > li nav a{ float: right; box-sizing: border-box; width: 48.5%; font-size: 10px; } .sec-point-list ol > li nav a:first-child, .sec-point-list ol > li nav a[href*="dish1"]{ float: left; } #sec-point-mid { margin-bottom: 40px; } /* ------- */ #sec-included {} #sec-included > figure { position: relative; z-index: 2; } #sec-included-main { background-color: #FCEDF2; border-radius: 30px; padding: 110px 30px 30px; margin-top: -110px; margin-bottom: 40px; } /* --- */ #sec-included-main-top {} #sec-included-main-top figure {} #sec-included-main-top .catch { display: inline-block; margin-bottom: 20px; padding: 10px 25px; border: solid 1px #ff8585; border-radius: 45px; -webkit-border-radius: 45px; -moz-border-radius: 45px; font-weight: bold; color: #ff8585; } #sec-included-main-top .catch.c-red { border: solid 1px #e71c24; font-size: 18px; color: #e71c24; } .included-icon-list { font-size: 0.85em; color: #ff8585; text-align: center; margin: 0 auto 30px; } .included-icon-list > ul { display: inline; } .included-icon-list > ul > li { display: inline-block; width: 70px; margin-right: 10px; } .included-icon-list > ul:last-of-type > li:last-child { margin-right: 0; } .included-icon-list > ul > li img { display: inline-block; width: 100%; margin-bottom: 5px; } .included-icon-list > ul > li p { line-height: 1.2em; } #sec-included-main-bottom { background-color: #FFF; border-radius: 10px; padding: 20px; } #sec-included-main-bottom .midasi3 { font-size: 0.9em; } .included-breakdown { } .included-breakdown > li h5 { color: #ff8585; font-weight: bold; border-bottom: 2px solid currentColor; padding: 0 3px; margin: 0 auto 8px; } .included-breakdown > li .bullet-list-text > li:not(:last-child) { border-bottom: 1px dotted #CCC; padding-bottom: 5px; margin-bottom: 5px; } .included-breakdown > li .bullet-list-text > li.no-border { border-bottom: none; padding-bottom: 0; } .included-breakdown > li .bullet-list-text > li::before { background-color: #C6C6C6; } /* --- */ .timetable tr td { background-color: #FFF; width: 33.3333%; border: 1px solid #C6C6C6; text-align: center; padding: 5px; font-size: 0.95em; vertical-align: middle; } .timetable tr td:first-child { border-left: none; } .timetable tr td:last-child { border-right: none; } .timetable thead tr td { background-color: #F4F2EB; } .timetable tr.day td { background-color: #fcebd9; } .timetable tr.dinner td { background-color: #fcedf2; } /* ------- */ #sec-schedule-main {} #sec-schedule-main > input { display: none; } #sec-schedule-select { text-align: center; border: 0 solid #CCC; border-top-width: 1px; border-bottom-width: 1px; padding: 5px; margin: 0 auto 30px; } #sec-schedule-select ul > li { display: inline-block; line-height: 1.2em; } #sec-schedule-select ul > li:not(:last-child) { padding-right: 1em; border-right: 1px solid #CCC; margin-right: 1em; } #sec-schedule-select ul > li > label { display: block; position: relative; } #sec-schedule-select ul > li > label::before { background-color: #ADADAD; content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin: 0 0.4em 0 0; text-indent: 0; border-radius: 50%; } #sec-schedule-select ul > li > label:hover { color: #FFC1C1; text-decoration: none; } #sec-schedule-select ul > li > label:hover::before { background-color: #FFD1D1; } #sec-schedule-select ul > li:nth-child(1) { display: none; } #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3), #sec-schedule-main > input#check-opt2:checked ~ #sec-schedule-select-wrap ul > li:nth-child(2), #sec-schedule-main > input#check-opt3:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3), #sec-schedule-main > input#check-opt4:checked ~ #sec-schedule-select-wrap ul > li:nth-child(4) { color: #ff8585; } #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3) > label::before, #sec-schedule-main > input#check-opt2:checked ~ #sec-schedule-select-wrap ul > li:nth-child(2) > label::before, #sec-schedule-main > input#check-opt3:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3) > label::before, #sec-schedule-main > input#check-opt4:checked ~ #sec-schedule-select-wrap ul > li:nth-child(4) > label::before { background-color: #FFC1C1; } /* --- */ #sec-schedule-compare { position: relative; } #sec-schedule-compare > figure { background-color: #FFE6E6; display: none; vertical-align: top; width: 50%; box-sizing: border-box; border-radius: 30px 30px 0 0; } #sec-schedule-compare > figure:nth-child(1) { display: inline-block; } /* selecting */ #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-compare > figure:nth-child(3), #sec-schedule-main > input#check-opt2:checked ~ #sec-schedule-compare > figure:nth-child(2), #sec-schedule-main > input#check-opt3:checked ~ #sec-schedule-compare > figure:nth-child(3), #sec-schedule-main > input#check-opt4:checked ~ #sec-schedule-compare > figure:nth-child(4) { display: inline-block; } #sec-schedule-compare > figure.yellow { background-color: #FDF2E8; } #sec-schedule-compare > figure.green { background-color: #F0F7E7; } #sec-schedule-compare > figure.purple { background-color: #F4F1F7; } #sec-schedule-compare > figure::before { background-color: inherit; content: ""; width: inherit; box-sizing: inherit; border-radius: inherit; top: 0; bottom: 0; position: absolute; z-index: 1; } #sec-schedule-compare > figure:nth-child(1)::before { left: 0; } #sec-schedule-compare > figure:nth-child(n+2)::before { right: 0; } #sec-schedule-compare > figure > div { padding: 15px; position: relative; z-index: 2; } #sec-schedule-compare > figure h4 { font-size: 1.0em; text-align: center; font-weight: bold; margin: 0 auto 30px; } #sec-schedule-compare > figure ol { position: relative; } #sec-schedule-compare > figure ol > li { padding-left: 20px; overflow: hidden; position: relative; min-height: 12px; padding-bottom: 20px; } #sec-schedule-compare > figure ol > li:last-child { padding-bottom: 0; } #sec-schedule-compare > figure ol > li::before { background-color: #ff8585; content: ""; width: 13px; height: 13px; top: 4px; left: 0; position: absolute; border-radius: 50%; } #sec-schedule-compare > figure ol > li::after { content: ""; color: #ff8585; position: absolute; top: 0; left: 6px; bottom: 0; border-left: 1px solid currentColor; } #sec-schedule-compare > figure ol > li:first-child::after { top: 4px; } #sec-schedule-compare > figure ol > li:last-child::after { bottom: auto; height: 10px; } #sec-schedule-compare > figure ol > li img { width: 150px; max-width: 30%; float: right; margin-left: 15px; margin-bottom: 10px; } #sec-schedule-compare > figure ol > li h5 { margin-bottom: 3px; color: #ff8585; font-weight: bold; font-size: 1.05em; line-height: 1.4em; text-align: left; } #sec-schedule-compare > figure ol > li h5 .option { display: inline-block; margin: 1px 5px 3px 0; padding: 0 7px; background-color: #bb272d; color: #fff; font-weight: normal; font-size: 10px; vertical-align: middle; } #sec-schedule-compare > figure ol > li h5 small { display: inline-block; } #sec-schedule-compare > figure ol > li p { font-size: 0.95em; line-height: 1.4em; text-align: left; } #sec-schedule-compare > figure ol > li .couple { display: none; margin-top: 10px; padding: 10px; background-color: #fff; font-size: 12px; text-align: left; } #sec-schedule-compare > figure ol > li .couple::before { content: "新郎新婦様は?"; display: block; color: #aaa0a5; } /* ------- */ #sec-inquiry { text-align: center; } #sec-inquiry .box h3 { color: #ff8585; font-size: 1.4em; font-weight: bold; line-height: 1.4em; margin: 15px auto 10px; } #sec-inquiry .box h4 { font-size: 1.1em; font-weight: bold; margin: 0 auto 20px; } #sec-inquiry .box h4 small { font-weight: normal; display: block; line-height: 1.4em; } #sec-inquiry .box p.time { margin-bottom: 15px; font-size: 1em; line-height: 1.2; font-weight: normal; } #sec-inquiry .box p.tel { font-size: 46px; line-height: 1.2em; font-weight: bold; } #sec-inquiry .btns a { background-color: #3E3A39; color: #FFF; border-radius: 30px; } #sec-inquiry .btns a:hover { background-color: #5E5A59; } #sec-inquiry .bt { display: inline-block; margin-bottom: 10px; padding: 10px 35px; background-color: #b8a46e; border-radius: 45px; -webkit-border-radius: 45px; -moz-border-radius: 45px; color: #fff; } #sec-inquiry .bt:hover { background-color: #d4c18d; text-decoration: none; } #sec-inquiry .bt span { display: block; padding: 5px 0 5px 31px; background-image: url("./img/icon-mail.svg"); background-repeat: no-repeat; background-position: 0 50%; background-size: 26px auto; } .gallery_box{ overflow: hidden; max-width: 1200px; margin: 20px auto; padding: 0 10px; } .gallery_box > a{ overflow: hidden; display: block; width: 32%; margin: 0 0 2% 2%; padding: 0; float: left; background: #4a4; } .gallery_box > a:nth-child(3n+1){ margin-left: 0; } .gallery_box > a img{ display: block; margin: 0; padding: 0; } .gallery_box > a:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .beach-extend{ max-width: 820px; box-sizing: border-box; padding: 30px; margin: 30px auto; background: #fff; overflow: hidden; border-radius: 10px; } .beach-extend.border { border: solid 15px #FCEDF2; } .beach-extend > figure{ float: left; width: 35%; margin: 0 20px 0 0; position: relative; } .beach-extend > figure img{ display: block; } .beach-extend > figure .icon{ position: absolute; right: -10px; top: -10px; display: block; width: 80px; height: 80px; text-align: center; color: #4d4d4d; font-size: 13px; line-height: 1.1em; background: #fff; border: 1px solid #4d4d4d; border-radius: 50%; } .beach-extend > figure .icon > span{ position: absolute; display: block; left: 0; top: 50%; width: 100%; -webkit-transform: translateY(-60%); -moz-transform: translateY(-60%); -ms-transform: translateY(-60%); -o-transform: translateY(-60%); transform: translateY(-60%); } .beach-extend > figure .icon .strong{ display: inline-block; font-weight: normal; font-family: Times, serif; font-size: 180%; line-height: 1em; } .beach-extend > figure .icon small{ font-size: 75%; } .beach-extend > figure .icon b{ font-weight: normal; font-size: 110%; } .beach-extend > figure .icon .strong small{ font-size: 60%; } .beach-extend > figure .icon > span span.minute{ display: block; margin: 3px 0; padding: 3px 0 0; border-top: 1px solid #999; } .beach-extend h4{ background: #ff8585; padding: 10px; margin: 0 -10px 20px; border-radius: 25px; text-align: center; font-size: 140%; line-height: 1.2em; color: #fff; } .beach-extend h4:before{ content: url(https://www.royalkaila.com/common/img/plan/shared/icon_bar.png); margin-right: 10px; } .beach-extend h5{ padding: 0 0 5px; margin: 0 0 10px; border-bottom: 1px solid #ff8585; font-size: 130%; line-height: 1.2em; color: #ff8585; overflow: hidden; text-align: left; } .beach-extend h5 small{ display: inline-block; font-weight: normal; font-size: 75%; } .beach-extend p{ margin: 10px 0 0; overflow: hidden; line-height: 1.7em; } .beach-extend p.price .strong{ display: inline-block; font-size: 180%; } .beach-extend p .pickup { background-color: #fbffb8; } .beach-extend p .pickup em { display: inline-block; margin: 0 3px; font-size: 160%; color: #e71c24; } .grade-up-words{ font-size: 120%; text-align: center; } .grade-up-words b{ font-weight: bold; color: #e71c24; } .grade-up-words .daytime { font-weight: bold; color: #e71c24; } .grade-up-words .dinnertime { font-weight: bold; color: #e71c24; } .grade-up-words:before{ content: "▼"; font-size: 80px; line-height: 1.1em; display: block; color: #ff8585; } /* ========================================================================================================================= */ @media screen and (max-width: 1199px) { #header-main-img > figure { left: 30px; } #header-main-img > h2 { font-size: 1.6em; } } /* ========================================================================================================================= */ @media screen and (max-width: 959px) { #sec01 figure { margin-top: 10px; } #sec-schedule-select ul > li { display: block; } #sec-schedule-select ul > li:not(:last-child) { padding-right: 0; border-right: none; margin-right: 0; margin-bottom: 5px; } #sec-schedule-select ul > li > label { display: inline-block; } } /* ========================================================================================================================= */ @media screen and (max-width: 799px) { h1 { margin-bottom: 15px; } #header-main-img { padding-top: 30px; } #header-main-img > div > img { /* width: 156%; margin-left: -28%; */ } #header-main-img > figure { left: -20px; } #header-main-img > h2 { font-size: 1.4em; } #header-main-img .overlay2 { top: 30px; position: absolute; width: 200px; } /* --- */ .midasi1 { font-size: 1.6em; } .midasi2 { font-size: 1.4em; } .midasi3 { font-size: 1.15em; } /* --- */ #sec01 article > img, #sec01 article > div { display: block; width: auto; } #sec01 article > img { margin: 0 auto 20px; } #sec01 article > div h3 { text-align: center; font-size: 1.4em; } #sec01 article > div h4 { text-align: center; } #sec01 figure { margin-top: 20px; } #sec01 figure > img { width: 27%; margin: 0 auto -7.5% 46%; } /* */ #sec-point { margin-bottom: 40px; } .sec-point-list ol > li { border-width: 1px; overflow: hidden; } .sec-point-list ol > li::before { content: none; } .sec-point-list ol > li > div { padding: 20px; } .sec-point-list ol > li img { margin: 0 15px 0 0; float: left; width: 49%; } .sec-point-list ol > li > div .ph > a { width: 60px; right: 50%; bottom: -27.5vw; } .sec-point-list ol > li > div .ph > a img { margin: 0; float: none; width: 100%; } .sec-point-list ol > li nav{ clear: left; } /* */ #sec-included-main-img { width: 80%; margin: 0 auto; } #sec-included-main { margin-top: -550px; padding-top: 550px; } #sec-included-main-top .catch { padding: 10px; font-size: 11px; line-height: 1.4; } /* */ #sec-included-main { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } .included-icon-list > ul { display: block; } .included-icon-list > ul:not(:last-child) { margin-bottom: 10px; } .included-icon-list > ul > li:last-child { margin-right: 0; } /* */ #sec-schedule-select { border-width: 0; padding: 0; } #sec-schedule-select ul > li { overflow: hidden; border-radius: 10px; font-size: 1.15em; } #sec-schedule-select ul > li:nth-child(1) { display: block; } #sec-schedule-select ul > li, #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3) { color: #A07C52; } #sec-schedule-select ul > li:not(:last-child) { margin-bottom: 10px; } #sec-schedule-select ul > li > label { background-color: #F9D6B3; display: block; padding: 15px 30px; } #sec-schedule-select ul > li > label::before { background-color: transparent !important; content: ""; display: block; width: 0; height: 0; margin: 0; border-radius: 0; border-top: 10px solid #FFF; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 10px; top: 50%; } #sec-schedule-select ul > li > label:hover { background-color: #FFF6D3; color: inherit; } #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-select-wrap ul > li:nth-child(1), #sec-schedule-main > input#check-opt2:checked ~ #sec-schedule-select-wrap ul > li:nth-child(2), #sec-schedule-main > input#check-opt3:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3), #sec-schedule-main > input#check-opt4:checked ~ #sec-schedule-select-wrap ul > li:nth-child(4) { color: #FFF; } #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-select-wrap ul > li:nth-child(1) > label, #sec-schedule-main > input#check-opt2:checked ~ #sec-schedule-select-wrap ul > li:nth-child(2) > label, #sec-schedule-main > input#check-opt3:checked ~ #sec-schedule-select-wrap ul > li:nth-child(3) > label, #sec-schedule-main > input#check-opt4:checked ~ #sec-schedule-select-wrap ul > li:nth-child(4) > label { background-color: #ff8585; } #sec-schedule-compare > figure { width: auto; } #sec-schedule-compare > figure:nth-child(1), #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-compare > figure:nth-child(3) { display: none; } #sec-schedule-compare > figure ol > li .couple { display: block; clear: both; } /* selecting */ #sec-schedule-main > input#check-opt1:checked ~ #sec-schedule-compare > figure:nth-child(1), #sec-schedule-main > input#check-opt2:checked ~ #sec-schedule-compare > figure:nth-child(2), #sec-schedule-main > input#check-opt3:checked ~ #sec-schedule-compare > figure:nth-child(3), #sec-schedule-main > input#check-opt4:checked ~ #sec-schedule-compare > figure:nth-child(4) { display: block; } .campaign-pricing { display: block; margin: 20px 0; } .campaign-pricing-header > span.limited.smt{ display: block; margin: 30px 0 10px; text-align: center; font-weight: bold; font-size: 24px; color: #ff8585; } .campaign-pricing-header > span.limited.smt strong { font-size: 150%; } .campaign-pricing-right.pc{ display: none !important; } .grade-up-words { text-align: left; } .grade-up-words:before{ width: 50px; margin: 0 auto; font-size: 50px; line-height: 1.1em; } .campaign-pricing-header .limited.smt::before, .campaign-pricing-header .limited.smt::after{ content: ""; display: inline-block; width: 36px; height: 23px; background-size: 100% !important; vertical-align: middle; } .campaign-pricing-header .limited.smt::before{ background: url(./img/line_l.png) no-repeat center center; } .campaign-pricing-header .limited.smt::after{ background: url(./img/line_r.png) no-repeat center center; } .beach-extend{ padding: 20px; } .beach-extend h4{ margin: 0 -5px 15px; border-radius: 25px; font-size: 130%; } .beach-extend h5{ font-size: 130%; } .beach-extend p .pickup em { margin: 0 2px; font-size: 140%; } .campaign-pricing-header .campaign-pricing-left.tr, .campaign-pricing-header .campaign-pricing-left > b{ text-align: center !important; } .campaign-pricing-header .campaign-pricing-left > b > small{ display: block; width: auto; text-align: left !important; } .campaign-pricing-header .campaign-pricing-left > b > small + br{ display: none; } } /* ========================================================================================================================= */ @media screen and (max-width: 599px) { section { padding: 0 15px; } section:not(:last-child) { margin-bottom: 30px; } /* */ #header-main-img-wrap { padding: 0 15px; } #header-main-img { padding-top: 30px; } #header-main-img > figure { left: -5px; width: 120px; } #header-main-img > h2 { font-size: 1.2em; } /* */ .campaign-pricing-left .strong { font-size: 1.25em; } .campaign-pricing-left del > span { font-size: 1.6em; } /* */ .campaign-pricing-left ins::before { width: 28px; height: 21px; } .campaign-pricing-left ins > span { font-size: 2em; } .campaign-pricing-right { width: 35%; margin: 0 auto 10px; } .campaign-pricing-right .strong { font-size: 1.5em; } .campaign-pricing-right em { font-size: 1.1em; } a.modal.smt, .campaign-pricing > b.extend a.smt{ display: block; } a.modal.pc, .campaign-pricing > b.extend a.pc{ display: none; } .campaign-pricing i.pc , .campaign-pricing-left i.pc { display: none; } /* --- */ .midasi1 { font-size: 1.4em; } .midasi2 { font-size: 1.25em; } .midasi3 { font-size: 1.05em; } /* */ #sec01 article > div h3 { font-size: 1.25em; } /* */ #sec-point { margin-bottom: 30px; } #sec-point-top-details { margin-bottom: 20px; } .sec-point-list:not(:last-child) { margin-bottom: 30px; } .sec-point-list ol > li h4 { font-size: 1.2em; } .sec-point-list ol > li > div { padding: 15px; } /* */ #sec-included-main { padding-left: 15px; padding-right: 15px; padding-bottom: 15px; border-radius: 15px; } .included-icon-list { font-size: 0.8em; margin-bottom: 20px; } .included-icon-list > ul > li { width: 60px; } /* */ #sec-schedule-select ul > li { font-size: 1.05em; } /* */ #sec-inquiry .box h3 { font-size: 1.3em; } #sec-inquiry .box h4 { font-size: 1.05em; } #sec-inquiry .box p.tel { font-size: 23px; } .timetable tr td small { display: block; } .gallery_box{ margin-bottom: 0; } .gallery_box > a:nth-child(3n+1), .gallery_box > a{ display: block; width: 48.5%; margin: 0 0 3% 3%; float: left; } .gallery_box > a:nth-child(2n+1){ margin-left: 0; } .beach-extend{ padding: 10px; } .beach-extend h4{ margin: 0 0 15px; font-size: 120%; } .beach-extend h4:before{ content: ""; } .beach-extend > figure{ display: block; float: none; width: 85%; margin: 10px auto; } .beach-extend h5{ font-size: 110%; } .beach-extend > figure .icon{ width: 65px; height: 65px; font-size: 11px; white-space: nowrap; } .campaign-pricing ins > span , .campaign-pricing-left ins > span { font-size: 2.2em; } .campaign-pricing del , .campaign-pricing-left del { margin-right: 0; } .campaign-pricing ins , .campaign-pricing-left ins , .campaign-pricing del , .campaign-pricing-left del { padding: 0; margin: 0; } } /* ========================================================================================================================= */ @media screen and (max-width: 539px) { .campaign-pricing-header > span { display: block; } .campaign-pricing-left { text-align: center; margin-right: 0; } .campaign-pricing-right em { max-width: 120px; margin: 0 auto; } } /* ========================================================================================================================= */ @media screen and (max-width: 479px) { #header-main-img { padding-top: 20px; } #header-main-img > figure { width: 90px; } #header-main-img > h2 { font-size: 1em; bottom: 10px; } #header-main-img .overlay1 { bottom: 10px; } #header-main-img .overlay2 { top: 20px; width: 160px; } /* */ .campaign-pricing-left em { padding: 2px 0.65em; } .campaign-pricing-left .strong { font-size: 1.2em; } .campaign-pricing-left del > span { font-size: 1.5em; } /* */ .campaign-pricing-left ins::before { width: 24px; height: 18px; } .campaign-pricing-left ins > span { font-size: 1.8em; } .campaign-pricing-right .strong { font-size: 1.4em; } .campaign-pricing-right em { font-size: 1.05em; } /* */ #sec-included-main-bottom { padding: 15px 10px; } } /* ========================================================================================================================= */ @media screen and (max-width: 399px) { #header-main-img > h2 { font-size: 0.9em; } /* */ .midasi1 { font-size: 1.3em; } .midasi2 { font-size: 1.2em; } .midasi3 { font-size: 1em; } /* */ .campaign-pricing-left em { /* display: block; */ margin: 0 5px 5px; } .campaign-pricing-left .strong { font-size: 1.1em; } .campaign-pricing-left del { margin-right: 10px; } .campaign-pricing-left del > span { font-size: 1.4em; } .campaign-pricing ins::before , .campaign-pricing-left ins::before { width: 26px; height: 16px; margin-right: 4px; } .campaign-pricing{ margin-left: -10px; margin-right: -10px; } /* */ .campaign-pricing-left ins::before { width: 20px; height: 15px; margin-right: 5px; } .campaign-pricing-left ins > span { font-size: 2.6em; } .campaign-pricing-right .strong { font-size: 1.3em; } .campaign-pricing-right em { font-size: 1em; } /* */ .included-icon-list { font-size: 0.775em; } .included-icon-list > ul > li { width: 54px; } .beach-extend h4{ font-size: 110%; } .campaign-pricing > b.extend { display: inline-block; padding: 0 0 0 45px; margin-left: 0; background-size: 40px; } } /* ========================================================================================================================= */ @media screen and (max-width: 359px) { #header-main-img > h2 .strong { font-size: 2.0em; } } /* */ .cv-wp { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; text-align: center; letter-spacing: -.4em; } .cv-wp .bt { display: inline-block; letter-spacing: normal; box-sizing: border-box; width: 50%; margin: 2px 0 0; padding: 2px 3px; background-color: #ff8585; color: #fff; } .cv-wp .floatCvButton.bt { width: 100%; } .cv-wp .bt:first-child{ border-right: solid 2px #fff; } .cv-wp .bt:hover { background-color: #ffa2a2; text-decoration: none; } .cv-wp .bt span { display: inline-block; padding: 7px 0 7px 33px; background-image: url("./img/icon-mail.svg"); background-repeat: no-repeat; background-position: 0 50%; background-size: 26px auto; font-size: 11px; } .cv-wp .bt.online span { padding: 7px 0 7px 23px; background-image: url("./img/icon-online.svg"); background-size: 17px auto; } .cv-wp .bt.salon span { padding: 7px 0 7px 25px; background-image: url("./img/icon-salon.svg"); background-size: 19px auto; } .apply-button{ margin: 20px 0 80px; text-align: center; } .apply-button a { display: inline-block; letter-spacing: normal; box-sizing: border-box; width: 48.5%; max-width: 450px; height: 70px; margin: 10px 0; padding: 0 10px; background: #ff8585; color: #fff; border-radius: 6px; text-align: center; font-size: 18px; font-weight: bold; } .apply-button a + a { margin-left: 10px; } .apply-button a:before { content: ""; display: inline-block; background: url("./img/icon-online.svg") no-repeat center center; background-size: 100% auto; width: 30px; height: 100%; margin: 0 10px 0 0; vertical-align: middle; } .apply-button a > span { display: inline-block; vertical-align: middle; } .apply-button a:hover { background-color: #ffa2a2; text-decoration: none; } .apply-button ul { letter-spacing: -.4em; } .apply-button ul li { display: inline-block; letter-spacing: normal; box-sizing: border-box; width: 48%; margin: 0 1%; } @media screen and (max-width: 449px) { .cv-wp .bt span { font-size: 3vw; } } @media screen and (min-width: 800px) { .cv-wp { top: 20%; /* transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); */ right: 0; bottom: auto; left: auto; width: 80px; } .cv-wp .bt { position: relative; display: block; width: 100%; height: 80px; margin: 0 0 4px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; line-height: 1.4; text-align: center; } .cv-wp .bt:not(:last-child) { border-right: none; } .cv-wp .bt span { position: absolute; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); left: 0; right: 0; margin: 0 auto; padding: 25px 0 0; background-position: 50% 0; font-size: 11px; } .cv-wp .bt.online span { padding: 25px 0 0; } .cv-wp .bt.salon span { padding: 25px 0 0; } } /* */ @media screen and (min-width: 1000px) { /* 4名 */ #sec-schedule-compare.js-four > figure.pink ol > li:nth-child(2) { padding-bottom: 118px; } #sec-schedule-compare.js-four > figure.pink ol > li:nth-child(6) { padding-bottom: 154px; } #sec-schedule-compare.js-four > figure.green ol > li:nth-child(1) { margin-top: 142px; } /* 2名 */ #sec-schedule-compare.js-two > figure.pink ol > li:nth-child(2) { padding-bottom: 42px; } #sec-schedule-compare.js-two > figure.pink ol > li:nth-child(6) { padding-bottom: 154px; } /* 6名 */ #sec-schedule-compare.js-six > figure.pink ol > li:nth-child(6) { padding-bottom: 154px; } #sec-schedule-compare.js-six > figure.purple ol > li:nth-child(1) { margin-top: 178px; } } h2.terms{ margin: 30px 10px; text-align: center; font-size: 180%; line-height: 1.2em; } h2.terms em{ display: inline-block; font-size: 70%; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-right: 20px; padding: 2px 5px 1px; vertical-align: middle; } @media screen and (max-width: 799px) { h2.terms{ font-size: 140%; line-height: 1.2em; } h2.terms em{ margin-right: 10px; } } @media screen and (max-width: 599px) { h2.terms{ font-size: 120%; } } .tokuten{ background: #ff9d9d; box-sizing:border-box; max-width: 1200px; margin: 30px auto; padding: 40px 4%; position: relative; } .tokuten img.icon{ position: absolute; top: 10px; right: 3%; z-index: 2; } .tokuten img{ max-width: 100%; } .tokuten ol{ position: relative; overflow: hidden; counter-reset: tokuten; } .tokuten ol li{ position: relative; width: 32%; margin: 0 0 2% 2%; padding: 80px 0 0; float: left; color: #fff; } .tokuten ol li:nth-child(3n+2){ clear: left; margin-left: 0; } .tokuten ol li:first-child{ float: none; width: auto; padding: 100px 0 0; margin-left: 0; } .tokuten ol li figure img{ display: block; } .tokuten ol li figure.double{ overflow: hidden; margin-top: 20px; } .tokuten ol li figure.double img{ width: 50%; float: left; } .tokuten ol li:before{ content: ""; position: absolute; display: block; top: 37px; left: 0; width: 100%; height: 5px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .tokuten ol li:after{ counter-increment: tokuten; content: counter(tokuten); box-sizing: border-box; position: absolute; display: block; width: 80px; height: 80px; left: 0; right: 0; top: 0; margin: auto; padding-top: 30px; font-family: Times, serif; font-size: 42px; line-height: 48px; color: #ff8585; text-align: center; background: url(./img/2019/icon_tokuten_num.png) no-repeat center center; background-size: 100% 100% !important; } .tokuten ol li:first-child:before{ top: 47px; } .tokuten ol li:first-child:after{ width: 100px; height: 100px; padding-top: 35px; font-size: 48px; line-height: 50px; } .tokuten ol li h3{ font-size: 125%; line-height: 1.3em; font-weight: bold; margin: 5px 0; text-align: center; } .tokuten ol li:first-child h3{ font-size: 135%; } .tokuten ol li p{ margin: 5px 0; } .tokuten ol li p a { color: #f9ff05; } .tokuten ol li p.black{ color: #000; text-align: center; } .tokuten ol li p span.blue, .tokuten ol li p span.red, .tokuten ol li p span.green, .tokuten ol li p span.white, .tokuten ol li p span.pink, .tokuten ol li p span.yellow{ display: inline-block; margin: 0 5px 0 30px; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 50%; } .tokuten ol li p span.blue{ background: #54bde0; margin-left: 0 !important; } .tokuten ol li p span.green{ background: #86c03f; } .tokuten ol li p span.red{ background: #f00; } .tokuten ol li p span.white{ background: #fff; } .tokuten ol li p span.yellow{ background-color: #ffee00; } .tokuten ol li p span.pink{ background-color: #ff8db7; } @media screen and (max-width: 799px) { .tokuten{ margin: 30px -8px; padding: 30px 20px; } .tokuten ol li figure.double img{ width: 100%; float: none; } .tokuten ol li:nth-child(3n+2), .tokuten ol li{ position: relative; width: 48.5%; margin: 0 0 3% 3%; padding: 50px 0 0 !important; clear: none; float: left; } .tokuten ol li:nth-child(2n){ clear: left; margin-left: 0; } .tokuten ol li:after, .tokuten ol li:first-child:after{ width: 50px; height: 50px; padding-top: 20px; font-size: 24px; line-height: 28px; } .tokuten ol li:before, .tokuten ol li:first-child:before{ top: 23px; height: 3px; } .tokuten img.icon{ top: -20px; right: -10px; z-index: 2; width: 120px; } .tokuten ol li h3{ font-size: 115%; text-align: left; } .tokuten ol li:first-child h3{ font-size: 125%; text-align: center; } .tokuten ol li p.black{ text-align: left; } } @media screen and (max-width: 599px) { .tokuten{ padding: 30px 10px; } .tokuten ol li h3{ font-size: 110%; } .tokuten ol li:first-child h3{ font-size: 120%; } .tokuten ol li p span.blue, .tokuten ol li p span.red, .tokuten ol li p span.green, .tokuten ol li p span.white{ margin: 0 3px 0 15px; width: 15px; height: 15px; } }