@charset "UTF-8";
@charset "UTF-8";


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, 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: inherit;
font-size: inherit;
line-height: 1em;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-kerning: normal;
font-kerning: normal;
}
html {
-webkit-overflow-scrolling: touch;
-webkit-print-color-adjust: exact;
}
html ::-moz-selection {
background-color: rgba(202, 174, 90, 0.17);
}
html ::selection {
background-color: rgba(202, 174, 90, 0.17);
}
html, body, input, select, button, textarea {
font-family: '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
-webkit-font-feature-settings: 'palt';
font-feature-settings: 'palt';
font-size: 12px;
outline: none;
}
@media only screen and (min-width: 1024px) {
html, body, input, select, button, textarea {
font-size: 16px;
}
}
[type='color']:-webkit-autofill, [type='date']:-webkit-autofill, [type='datetime']:-webkit-autofill, [type='datetime-local']:-webkit-autofill, [type='email']:-webkit-autofill, [type='month']:-webkit-autofill, [type='number']:-webkit-autofill, [type='password']:-webkit-autofill, [type='search']:-webkit-autofill, [type='tel']:-webkit-autofill, [type='text']:-webkit-autofill, [type='time']:-webkit-autofill, [type='url']:-webkit-autofill, [type='week']:-webkit-autofill, input:not([type]):-webkit-autofill, textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #fff inset !important;
}
[type='color']:required, [type='date']:required, [type='datetime']:required, [type='datetime-local']:required, [type='email']:required, [type='month']:required, [type='number']:required, [type='password']:required, [type='search']:required, [type='tel']:required, [type='text']:required, [type='time']:required, [type='url']:required, [type='week']:required, input:not([type]):required, textarea:required {
-webkit-box-shadow: none;
box-shadow: none;
}
*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p {
text-align: justify;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table, table * {
-webkit-backface-visibility: visible;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q::before, q::after, blockquote::before, blockquote::after {
content: '';
content: none;
}
a, button {
color: inherit;
font-size: inherit;
text-decoration: none;
cursor: pointer;
outline: none;
}
a img, button img {
border: none;
}
button {
background: none;
padding: 0;
border: 0;
}
sup {
position: relative;
top: -1em;
font-size: 0.5em;
font-weight: bold;
}
s {
text-decoration: none;
}
mark {
background: inherit;
color: inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, img, main, menu, nav, section, summary {
display: block;
}
video::-internal-media-controls-download-button {
display: none;
}
video::-webkit-media-controls-enclosure {
overflow: hidden;
}
video::-webkit-media-controls-panel {
width: -webkit-calc(100% + 30px);
width: calc(100% + 30px);
} .mask {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #fff;
background-image: url(//www.alacampagne.jp/img/img-loading.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px 30px;
z-index: 99999;
}
.mask.closing {
background-image: none;
}
.standby {
display: none;
}
body {
padding-top: 60px;
overflow-x: hidden;
}
header {
display: block;
float: left;
position: fixed;
top: 0;
height: 60px;
width: 100%;
z-index: 10;
}
header section {
display: block;
position: absolute;
top: 0;
left: 50%;
width: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
header section > div {
display: block;
float: left;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100%;
background: #fff;
border-bottom: 1px solid rgba(245, 243, 233, 0.5);
-webkit-transition: 600ms border;
transition: 600ms border;
}
.nav-opened header section > div {
border-bottom: 1px solid #bfbfbf;
}
header section > div > ul {
display: block;
float: right;
height: 60px;
}
header section > div > ul li {
display: block;
float: left;
position: relative;
height: 60px;
width: 30px;
}
header section > div > ul li + li {
width: 50px;
}
header section > div > ul li a {
display: block;
float: left;
height: 100%;
width: 100%;
}
header section > div > ul li a img {
height: 18px;
width: 18px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header section > div > ul .nav-button {
display: block;
float: left;
position: relative;
height: 100%;
width: 100%;
}
header section > div > ul .nav-button i {
display: block;
position: absolute;
left: 50%;
height: 2px;
width: 16px;
background: #000;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 400ms top, 400ms opacity, 600ms -webkit-transform;
transition: 400ms top, 400ms opacity, 600ms -webkit-transform;
transition: 400ms top, 600ms transform, 400ms opacity;
transition: 400ms top, 600ms transform, 400ms opacity, 600ms -webkit-transform;
}
header section > div > ul .nav-button i:nth-child(1) {
top: 23px;
}
header section > div > ul .nav-button i:nth-child(2), header section > div > ul .nav-button i:nth-child(3), header section > div > ul .nav-button i:nth-child(4) {
top: 29px;
}
header section > div > ul .nav-button i:nth-child(5) {
top: 35px;
}
.nav-opened header section > div > ul .nav-button i:nth-child(1), .nav-opened header section > div > ul .nav-button i:nth-child(2), .nav-opened header section > div > ul .nav-button i:nth-child(5) {
top: 35px;
opacity: 0;
}
.nav-opened header section > div > ul .nav-button i:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
}
.nav-opened header section > div > ul .nav-button i:nth-child(4) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
header h1 {
display: block;
float: left;
position: relative;
height: 60px;
margin-left: 15px;
}
header h1 a, header h1 span {
display: block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header h1 a svg, header h1 span svg {
height: 44px;
width: 155px;
-webkit-filter: drop-shadow(0 0 1px rgba(191, 191, 191, 0.5));
filter: drop-shadow(0 0 1px rgba(191, 191, 191, 0.5));
}
header h1 a .logo, header h1 span .logo {
fill: #000;
}
header nav {
display: block;
width: 100%;
max-height: -webkit-calc(100vh - 60px);
max-height: calc(100vh - 60px);
overflow-y: auto;
overscroll-behavior-y: contain;
background: #fff;
position: absolute;
top: 60px;
left: 0;
z-index: -1;
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: 500ms opacity, 500ms -webkit-transform cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 500ms opacity, 500ms -webkit-transform cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 500ms opacity, 500ms transform cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 500ms opacity, 500ms transform cubic-bezier(0.455, 0.03, 0.515, 0.955), 500ms -webkit-transform cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.nav-opened header nav {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
header nav ul, header nav ul li {
display: block;
float: left;
width: 100%;
}
header nav li > span, header nav li > a {
position: relative;
font-size: 16px;
}
header nav li > span > strong > br, header nav li > span > strong > em, header nav li > a > strong > br, header nav li > a > strong > em {
display: none;
}
header nav li > span::before, header nav li > span::after, header nav li > a.has-dropdown::before, header nav li > a.has-dropdown::after {
content: '';
display: block;
position: absolute;
top: 50%;
-webkit-transition: 300ms -webkit-transform;
transition: 300ms -webkit-transform;
transition: 300ms transform;
transition: 300ms transform, 300ms -webkit-transform;
background: #000;
}
header nav li > span::before, header nav li > a.has-dropdown::before {
-webkit-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
}
header nav li > span::after, header nav li > a.has-dropdown::after {
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
header nav li.expanded > span::before, header nav li.expanded > span::after, header nav li.expanded > a.has-dropdown::before, header nav li.expanded > a.has-dropdown::after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
header nav > ul > li > span, header nav > ul > li > a {
display: block;
float: left;
height: 54px;
width: 100%;
line-height: 54px;
padding: 0 20px;
font-family: 'Vollkorn', serif;
font-style: italic;
-webkit-font-feature-settings: 'liga' 0;
font-feature-settings: 'liga' 0;
font-size: 20px;
border-bottom: 1px solid #bfbfbf;
cursor: pointer;
letter-spacing: 1px;
}
header nav > ul > li > span small, header nav > ul > li > a small {
display: inline-block;
font-size: 10px;
margin-left: 10px;
}
header nav > ul > li > span, header nav > ul > li > a.has-dropdown {
-webkit-transition: 400ms background, 300ms border-color;
transition: 400ms background, 300ms border-color;
}
header nav > ul > li > span::before, header nav > ul > li > span::after, header nav > ul > li > a.has-dropdown::before, header nav > ul > li > a.has-dropdown::after {
height: 1px;
width: 12px;
right: 20px;
}
header nav > ul > li.expanded > span, header nav > ul > li.expanded > a.has-dropdown {
border-bottom-color: rgba(191, 191, 191, 0);
background: #c4a547;
color: #fff;
}
header nav > ul > li.expanded > span::before, header nav > ul > li.expanded > span::after, header nav > ul > li.expanded > a.has-dropdown::before, header nav > ul > li.expanded > a.has-dropdown::after {
background: #fff;
}
header nav > ul > li ul {
display: none;
}
header nav > ul > li > ul {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
padding: 10px 0;
background: #f5f3e9;
border-bottom: 1px solid #bfbfbf;
}
header nav > ul > li > ul li, header nav > ul > li > ul a, header nav > ul > li > ul span {
display: block;
float: left;
width: 100%;
}
header nav > ul > li > ul li > span, header nav > ul > li > ul li > a {
padding: 10px 20px;
text-align: center;
}
header nav > ul > li > ul li > span::before, header nav > ul > li > ul li > span::after, header nav > ul > li > ul li > a.has-dropdown::before, header nav > ul > li > ul li > a.has-dropdown::after {
height: 1px;
width: 10px;
right: 21px;
}
header nav > ul > li > ul li > span em, header nav > ul > li > ul li > a.has-dropdown em {
position: relative;
}
header nav > ul > li > ul li > span em::after, header nav > ul > li > ul li > a.has-dropdown em::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
height: 3px;
width: 100%;
background: rgba(196, 165, 71, 0.5);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: 300ms -webkit-transform;
transition: 300ms -webkit-transform;
transition: 300ms transform;
transition: 300ms transform, 300ms -webkit-transform;
}
header nav > ul > li > ul li.expanded > span, header nav > ul > li > ul li.expanded > a.has-dropdown {
font-weight: bold;
}
header nav > ul > li > ul li.expanded > span em::after, header nav > ul > li > ul li.expanded > a.has-dropdown em::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
main {
display: block;
float: left;
width: 100%;
background: #f5f3e9;
overflow-x: hidden;
}
main .back-to-top {
display: block;
position: fixed;
right: 20px;
bottom: 20px;
height: 40px;
width: 40px;
background: rgba(196, 165, 71, 0.7);
cursor: pointer;
opacity: 0;
-webkit-transition: 500ms background, 500ms opacity;
transition: 500ms background, 500ms opacity;
pointer-events: none;
z-index: 50;
}
main .back-to-top::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 12px;
width: 12px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: translate(-50%, -2px) rotate(-45deg);
transform: translate(-50%, -2px) rotate(-45deg);
}
main .back-to-top.shown {
pointer-events: auto;
opacity: 1;
}
main > section, main > aside {
position: relative;
}
main > section, main > section > div, main > aside, main > aside > div {
display: block;
float: left;
width: 100%;
clear: both;
}
main > section {
padding: 50px 20px;
}
main > section.no-padding {
padding-left: 0;
padding-right: 0;
}
main > section.no-padding .padding {
padding-left: 20px;
padding-right: 20px;
}
main > section.merged {
padding-bottom: 0;
}
main > section.semi-merged {
padding-bottom: 25px;
}
main > section.conjoined {
padding-top: 0;
}
main > section.semi-conjoined {
padding-top: 25px;
}
main > section.has-crumb {
padding-top: 15px;
}
main > section.white {
background: #fff;
}
.page-visual {
display: block;
float: left;
width: 100%;
}
.page-visual img {
width: 100%;
}
.crumb {
display: block;
float: left;
width: 100%;
font-size: 10px;
margin-bottom: 25px;
}
.crumb li {
display: inline-block;
}
.crumb li + li::before {
content: '/';
display: inline-block;
margin: 0 0.5em;
vertical-align: top;
}
.crumb li a, .crumb li span {
display: inline-block;
max-width: 30vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crumb li a {
color: #666;
}
.crumb img {
display: inline-block;
height: 10px;
width: 10px;
vertical-align: top;
}
h2 {
position: relative;
padding-bottom: 30px;
margin-bottom: 30px;
}
h2, h2 span, h2 em {
display: block;
float: left;
width: 100%;
text-align: center;
}
h2::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
height: 1px;
width: 30px;
background: #bfbfbf;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
h2 span {
font-size: 42px;
line-height: 1em;
color: #c4a547;
font-family: 'Dancing Script', cursive;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
margin-bottom: 10px;
}
h2 em {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
}
h3 {
margin-bottom: 30px;
}
h3, h3 span, h3 em {
display: block;
float: left;
width: 100%;
text-align: center;
}
h3 span {
font-size: 28px;
line-height: 1em;
color: #25435f;
font-family: 'Vollkorn', serif;
font-style: italic;
-webkit-font-feature-settings: 'liga' 0;
font-feature-settings: 'liga' 0;
margin-bottom: 10px;
letter-spacing: 2px;
}
h3 em {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
}
h4 {
display: block;
float: left;
width: 100%;
font-size: 16px;
line-height: 1.4em;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
text-align: center;
margin-bottom: 30px;
}
.cursive-subtitle {
display: block;
float: left;
width: 100%;
font-family: 'Dancing Script', cursive;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
text-align: center;
color: #c4a547;
font-size: 28px;
margin-bottom: 25px;
}
br.pbr {
display: none;
}
.lead-box {
display: block;
float: left;
width: 100%;
}
.lead-box p {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
font-size: 14px;
line-height: 1.8em;
}
.lead-box p + p {
margin-top: 10px;
}
.graphic-textbox, .graphic-textbox .graphic-text {
display: block;
float: left;
width: 100%;
position: relative;
}
.graphic-textbox img {
width: 100%;
margin-bottom: 25px;
}
.graphic-textbox h4 {
font-size: 21px;
text-align: left;
}
.graphic-textbox p {
line-height: 1.5em;
}
.graphic-textbox p + p {
margin-top: 10px;
}
.graphic-textbox h5 {
font-size: 16px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
line-height: 1.5em;
margin-top: 30px;
}
.graphic-textbox a {
display: block;
float: left;
position: relative;
height: 70px;
width: 100%;
background: #fff;
margin-top: 30px;
}
.graphic-textbox a::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 20px;
height: 12px;
width: 12px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.graphic-textbox a span {
display: block;
float: left;
position: relative;
width: 100%;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.graphic-textbox a small, .graphic-textbox a em {
display: inline-block;
width: 100%;
clear: both;
}
.graphic-textbox a small {
font-family: 'Vollkorn', serif;
font-style: italic;
-webkit-font-feature-settings: 'liga' 0;
font-feature-settings: 'liga' 0;
color: #c4a547;
font-size: 13px;
margin-bottom: 2px;
}
.graphic-textbox a em {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
font-size: 16px;
}
.visual-box, .visual-box img {
display: block;
float: left;
width: 100%;
}
.visual-desc-blank {
display: block;
float: left;
width: 100%;
padding: 10px 0;
}
.visual-desc {
display: block;
float: left;
width: 100%;
padding: 25px 0;
}
.visual-desc h4, .visual-desc p {
display: block;
float: left;
width: 100%;
line-height: 1.5em;
}
.visual-desc h4 {
font-size: 18px;
text-align: center;
color: #c4a547;
margin: 0;
}
.visual-desc p {
margin-top: 20px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
font-size: 14px;
}
article {
display: block;
float: left;
width: 100%;
background: #fff;
padding: 40px 20px;
}
article h3 {
font-size: 21px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
margin-bottom: 0;
}
article .date {
display: block;
float: left;
width: 100%;
color: #c4a547;
text-align: center;
margin-top: 10px;
}
article .date + * {
margin-top: 35px;
}
article .content {
display: block;
float: left;
width: 100%;
}
article .align-center {
text-align: center;
}
article p, article ul, article ol, article li {
display: block;
float: left;
width: 100%;
line-height: 1.5em;
}
article p + p, article p + ol, article p + ul, article ul + p, article ul + ol, article ul + ul, article ol + p, article ol + ol, article ol + ul, article li + p, article li + ol, article li + ul {
margin-top: 15px;
}
article p + h4, article p + h5, article p + h6, article ul + h4, article ul + h5, article ul + h6, article ol + h4, article ol + h5, article ol + h6, article li + h4, article li + h5, article li + h6 {
margin-top: 30px;
}
article h3 {
font-size: 22px;
line-height: 1.5em;
}
article h4, article h5, article h6 {
display: block;
float: left;
width: 100%;
text-align: left;
}
article h5, article h6 {
line-height: 1.6em;
margin-bottom: 15px;
}
article h4 {
font-size: 16px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
line-height: 1.8em;
margin-bottom: 20px;
}
article h4 span {
border-bottom: 3px solid #c0d1d6;
}
article h5 {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
color: #25435f;
font-size: 14px;
}
article h6 {
font-weight: bold;
}
article p a {
display: inline-block;
position: relative;
}
article p a::after {
content: '';
display: block;
position: absolute;
bottom: -3px;
left: 0;
height: 1px;
width: 100%;
background: #c4a547;
}
article p img {
margin: 10px 0;
}
article img {
display: block;
float: left;
height: auto;
width: auto;
max-width: 100%;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
article img.visual {
margin-bottom: 30px;
}
article ul {
padding-left: 1em;
}
article ul li {
position: relative;
}
article ul li::before {
content: '・';
position: absolute;
left: -1em;
}
article ol {
padding-left: 1.5em;
counter-reset: list;
}
article ol li {
position: relative;
counter-increment: list;
}
article ol li::before {
content: counter(list) ".";
position: absolute;
left: -1.5em;
}
article hr {
display: block;
float: left;
height: 1px;
width: 100%;
border: 0;
background: #e9d391;
margin: 30px 0;
}
article blockquote {
display: block;
float: left;
width: 100%;
background: #f7f7f7;
padding: 20px;
margin: 30px 0;
}
article strong {
font-weight: bold;
}
article em {
color: #c4a547;
}
article .article-button {
display: block;
float: left;
position: relative;
left: 50%;
height: 30px;
width: 150px;
text-align: center;
border: 1px solid #000;
line-height: 28px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
letter-spacing: 1px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin-top: 40px;
}
article .article-button::after {
content: '';
display: block;
height: 6px;
width: 6px;
position: absolute;
top: 50%;
left: 8px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: translate(50%, -50%) rotate(-135deg);
transform: translate(50%, -50%) rotate(-135deg);
-webkit-transition: 300ms -webkit-transform;
transition: 300ms -webkit-transform;
transition: 300ms transform;
transition: 300ms transform, 300ms -webkit-transform;
}
article > *:first-child {
margin-top: 0;
}
.deco {
display: block;
position: absolute;
}
.deco::after {
content: '';
display: block;
}
.subtitle-tab {
display: block;
float: left;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.subtitle-tab li {
font-size: 28px;
line-height: 1em;
color: #25435f;
font-family: 'Vollkorn', serif;
font-style: italic;
-webkit-font-feature-settings: 'liga' 0;
font-feature-settings: 'liga' 0;
letter-spacing: 2px;
}
.subtitle-tab li, .subtitle-tab li a, .subtitle-tab li span {
display: inline-block;
position: relative;
}
.subtitle-tab li a::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 4px;
width: 0;
background: #e9d391;
-webkit-transition: 300ms width;
transition: 300ms width;
}
.subtitle-tab li a span {
z-index: 1;
}
.subtitle-tab li + li::before {
content: '';
display: inline-block;
height: 1em;
width: 2px;
background: #25435f;
vertical-align: middle;
margin: 0 0.5em;
}
.subtitle-tab li.active a::after {
left: 0;
right: auto;
width: 100%;
}
.tab-buttons {
display: block;
float: left;
display: none;
width: 100%;
text-transform: uppercase;
font-size: 14px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
text-align: center;
padding-bottom: 40px;
border-bottom: 1px solid #bfbfbf;
line-height: 1.5em;
}
.tab-buttons li {
display: inline-block;
}
.tab-buttons li::after {
content: '';
display: inline-block;
height: 1em;
width: 1px;
background: #000;
vertical-align: text-top;
margin: 0 1em;
}
.tab-buttons li:last-child::after {
content: none;
}
.tab-buttons li a {
display: inline-block;
position: relative;
}
.tab-buttons li a::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: -4px;
height: 4px;
width: 0;
background: #e9d391;
-webkit-transition: 300ms width;
transition: 300ms width;
}
.tab-buttons li.active a::after {
left: 0;
right: auto;
width: 100%;
}
.tab-select {
display: block;
float: left;
width: 100%;
border: 1px solid #bfbfbf;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 14px;
line-height: 1.5em;
padding: 5px 10px;
margin-bottom: 20px;
}
.brand-menu {
display: block;
position: relative;
width: 100%;
clear: both;
}
.brand-menu ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.brand-menu ul > * {
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.brand-menu li {
height: 105px;
width: 100%;
}
.brand-menu li + li {
margin-top: 20px;
}
.brand-menu a {
display: block;
float: left;
position: relative;
height: 100%;
width: 100%;
}
.brand-menu a::before, .brand-menu a::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 95px;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
border: 1px solid #c4a547;
}
.brand-menu a span {
display: inline-block;
position: absolute;
top: 50%;
right: 0;
height: auto;
width: -webkit-calc(100% - 120px);
width: calc(100% - 120px);
font-size: 14px;
line-height: 1.5em;
text-align: left;
padding: 10px;
margin-top: 5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.gallery-list {
display: block;
float: left;
opacity: 0;
width: 100%;
-webkit-transition: 500ms opacity;
transition: 500ms opacity;
}
.gallery-shown .gallery-list {
opacity: 1;
}
.gallery-list > div {
display: block;
float: left;
position: relative;
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
cursor: pointer;
margin: 10px 0 10px 20px;
}
.gallery-list > div[data-col="0"] {
margin-left: 0;
}
.gallery-list > div figure {
display: block;
float: left;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 8px;
}
.gallery-list > div figure::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 0 solid rgba(255, 255, 255, 0);
z-index: 1;
-webkit-transition: 400ms border;
transition: 400ms border;
}
.gallery-list > div figure img {
display: block;
float: left;
width: 100%;
background: #ddd;
opacity: 0;
-webkit-transition: 600ms opacity, 2000ms -webkit-transform;
transition: 600ms opacity, 2000ms -webkit-transform;
transition: 2000ms transform, 600ms opacity;
transition: 2000ms transform, 600ms opacity, 2000ms -webkit-transform;
will-change: transform, opacity;
}
.gallery-list > div figure img.loaded {
opacity: 1;
}
.gallery-list > div p {
display: block;
float: left;
width: 100%;
text-align: center;
}
.gallery-list > div span {
display: inline-block;
font-size: 14px;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
max-width: 100%;
text-align: left;
line-height: 1.4em;
}
.gallery-list > div::after {
content: '';
display: block;
position: absolute;
bottom: -20px;
left: 50%;
height: 0;
width: 0;
border-bottom: 12px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: translateX(-50%) scale(0);
transform: translateX(-50%) scale(0);
-webkit-transition: 300ms -webkit-transform 500ms;
transition: 300ms -webkit-transform 500ms;
transition: 300ms transform 500ms;
transition: 300ms transform 500ms, 300ms -webkit-transform 500ms;
}
.gallery-list > div.on-point::after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.gallery-list > div.active figure::after {
border: 10px solid #fff;
}
.gallery-list > div.active figure img {
-webkit-transform: scale(1.15);
transform: scale(1.15);
-webkit-transition: 3000ms -webkit-transform;
transition: 3000ms -webkit-transform;
transition: 3000ms transform;
transition: 3000ms transform, 3000ms -webkit-transform;
}
.gallery-list > div.active::after {
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
}
.gallery-indepths {
display: block;
float: left;
position: relative;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
left: -20px;
}
.gallery-indepths > div {
padding: 40px 20px 20px;
background: #fff;
margin: 10px 0;
}
.gallery-indepths > div, .gallery-indepths > div .gallery-content {
display: block;
float: left;
width: 100%;
}
.gallery-slide {
width: 100%;
padding: 0 20px;
}
.gallery-slide, .gallery-slide ul {
display: block;
float: left;
}
.gallery-slide ul {
position: relative;
}
.gallery-slide ul img {
width: 100%;
}
.gallery-slide .gallery-slide-large {
height: -webkit-calc(100vw - 80px);
height: calc(100vw - 80px);
width: -webkit-calc(100vw - 80px);
width: calc(100vw - 80px);
border: 1px solid #ddd;
}
.gallery-slide .gallery-slide-large li {
display: block;
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
-webkit-transition: 800ms opacity;
transition: 800ms opacity;
}
.gallery-slide .gallery-slide-large li.active {
opacity: 1;
z-index: 1;
}
.gallery-slide .gallery-slide-nav {
width: auto;
max-width: -webkit-calc(100% + 10px);
max-width: calc(100% + 10px);
left: 50%;
margin-top: 15px;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.gallery-slide .gallery-slide-nav li {
display: block;
float: left;
height: -webkit-calc(20vw - 24px);
height: calc(20vw - 24px);
width: -webkit-calc(20vw - 24px);
width: calc(20vw - 24px);
border: 1px solid #ddd;
cursor: pointer;
}
.gallery-slide .gallery-slide-nav li + li {
margin-left: 10px;
}
.gallery-slide .gallery-slide-nav li img {
opacity: 0.3;
-webkit-transition: 500ms opacity;
transition: 500ms opacity;
}
.gallery-slide .gallery-slide-nav li.active {
opacity: 1;
}
.gallery-slide .gallery-slide-nav li.active img {
opacity: 1;
}
.gallery-details, .gallery-details strong, .gallery-details p, .gallery-details q, .gallery-details ul, .gallery-details li {
display: block;
float: left;
width: 100%;
line-height: 1.5em;
}
.gallery-details strong {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
color: #c4a547;
font-size: 18px;
text-align: center;
margin-top: 30px;
}
.gallery-details p {
margin-top: 20px;
}
.gallery-details p + p {
margin-top: 10px;
}
.gallery-details p.price {
font-size: 14px;
}
.gallery-details q {
margin-top: 20px;
padding: 20px;
background: #f7f7f7;
}
.gallery-details ul {
margin-top: 30px;
}
.gallery-details li {
position: relative;
font-size: 10px;
color: #c4a547;
padding-left: 1em;
}
.gallery-details li::before {
content: '※';
position: absolute;
left: 0;
}
.gallery-details li + li {
margin-top: 5px;
}
.gallery-content-close {
display: block;
float: left;
position: relative;
height: 50px;
width: 100%;
background: #f5f3e9;
margin-top: 30px;
font-family: 'Vollkorn', serif;
font-style: italic;
-webkit-font-feature-settings: 'liga' 0;
font-feature-settings: 'liga' 0;
line-height: 50px;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
}
.gallery-content-close i {
display: block;
position: absolute;
top: 50%;
right: 15px;
height: 16px;
width: 16px;
vertical-align: middle;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.gallery-content-close i::before, .gallery-content-close i::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 1px;
background: #000;
}
.gallery-content-close i::before {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.gallery-content-close i::after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.contact-box {
display: block;
float: left;
width: 100%;
background: #fff;
text-align: center;
padding: 20px;
margin: 20px 0px 0px 0px;
}
.contact-box strong, .contact-box span, .contact-box a, .contact-box p {
display: block;
float: left;
width: 100%;
line-height: 1.5em;
}
.contact-box strong, .contact-box span {
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
}
.contact-box strong {
font-size: 18px;
}
.contact-box span {
margin-top: 5px;
font-size: 12px;
}
.contact-box a {
margin-top: 5px;
font-family: 'Vollkorn', serif;
font-style: italic;
-webkit-font-feature-settings: 'liga' 0;
font-feature-settings: 'liga' 0;
font-size: 28px;
letter-spacing: 2px;
color: #25435f;
}
.contact-box p {
text-align: center;
}
aside {
background: #fff;
padding: 40px 20px;
border-top: 1px solid #f5f3e9;
}
aside .deco {
display: none;
}
aside ul, aside ul li, aside ul a, aside ul img {
display: block;
float: left;
width: 100%;
}
aside ul a {
text-align: center;
}
aside ul img {
margin-bottom: 15px;
}
aside ul span {
display: inline-block;
text-align: left;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
line-height: 1.5em;
}
aside ul li + li {
margin-top: 25px;
}
footer {
display: block;
float: left;
width: 100%;
background: #25435f;
font-size: 11px;
color: #fff;
padding: 30px 30px 20px;
}
footer .affiliate, footer .social-media {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
footer .affiliate > *, footer .social-media > * {
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
footer .affiliate a, footer .social-media a {
display: block;
float: left;
}
footer .affiliate {
margin-bottom: 50px;
}
footer .affiliate li {
margin: 0 7px;
}
footer .social-media {
margin-bottom: 30px;
}
footer .social-media li {
margin: 0 5px;
}
footer section, footer section > div {
display: block;
float: left;
width: 100%;
}
footer section ul, footer section cite {
display: block;
width: 100%;
text-align: center;
}
footer section ul {
float: left;
margin-bottom: 12px;
}
footer section ul li {
display: inline-block;
}
footer section ul li + li {
margin-left: 20px;
}
footer section cite {
float: right;
}
@media only screen and (min-width: 1024px) {
body {
padding-top: 0;
}
body:not(.top) {
background-size: 100% auto;
background-attachment: fixed;
}
body:not(.top) main {
margin-top: 300px;
min-height: -webkit-calc(100vh - 300px);
min-height: calc(100vh - 300px);
}
header {
height: 80px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(transparent));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), transparent);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
border-bottom: 0 solid rgba(0, 0, 0, 0.03);
-webkit-transition: 500ms background, 500ms border;
transition: 500ms background, 500ms border;
}
header section {
max-width: 1280px;
}
header section > div {
height: 80px;
background: transparent;
border: 0;
}
.nav-opened header section > div {
border: 0;
}
header section > div > ul {
display: none;
}
header h1 {
height: 80px;
margin-left: 20px;
}
header h1 a svg, header h1 span svg {
height: 57px;
width: 204px;
}
header h1 a .logo, header h1 span .logo {
fill: #fff;
-webkit-transition: 300ms fill;
transition: 300ms fill;
}
header nav {
width: auto;
float: right;
position: static;
top: auto;
left: auto;
opacity: 1;
background: transparent;
overflow-y: visible;
z-index: 0;
-webkit-transform: none;
transform: none;
}
header nav ul, header nav ul li {
width: auto;
}
header nav li > span::before, header nav li > span::after, header nav li > a.has-dropdown::before, header nav li > a.has-dropdown::after {
content: none;
}
header nav li.substitute {
display: none;
}
header nav > ul > li {
position: relative;
}
header nav > ul > li > span, header nav > ul > li > a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: auto;
height: 80px;
line-height: 80px;
border-bottom: 0;
text-align: center;
color: #fff;
-webkit-transition: 500ms cubic-bezier(0.39, 0.575, 0.565, 1) background, 500ms cubic-bezier(0.39, 0.575, 0.565, 1) color !important;
transition: 500ms cubic-bezier(0.39, 0.575, 0.565, 1) background, 500ms cubic-bezier(0.39, 0.575, 0.565, 1) color !important;
}
header nav > ul > li > span > *, header nav > ul > li > a > * {
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
header nav > ul > li > span > strong, header nav > ul > li > a > strong {
display: inline-block;
width: 100%;
font-size: 18px;
letter-spacing: 1px;
}
header nav > ul > li > span > strong > span, header nav > ul > li > span > strong > em, header nav > ul > li > a > strong > span, header nav > ul > li > a > strong > em {
position: relative;
}
header nav > ul > li > span > strong > span::after, header nav > ul > li > span > strong > em::after, header nav > ul > li > a > strong > span::after, header nav > ul > li > a > strong > em::after {
content: '';
display: block;
position: absolute;
right: 0;
height: 5px;
width: 0;
background: #e9d391;
-webkit-transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) width;
transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) width;
}
header nav > ul > li > span > strong > span, header nav > ul > li > a > strong > span {
display: inline-block;
}
header nav > ul > li > span > strong > span::after, header nav > ul > li > a > strong > span::after {
bottom: -2px;
}
header nav > ul > li > span > strong > br, header nav > ul > li > a > strong > br {
display: inline;
}
header nav > ul > li > span > strong > em, header nav > ul > li > a > strong > em {
display: inline-block;
letter-spacing: 0;
font-family: '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'yu-mincho-pr6n', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
font-style: normal;
-webkit-font-feature-settings: 'pwid';
font-feature-settings: 'pwid';
font-size: 10px;
}
header nav > ul > li > span > strong > em::after, header nav > ul > li > a > strong > em::after {
bottom: -6px;
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
header nav > ul > li > span::after, header nav > ul > li > a.has-dropdown::after {
display: none;
}
header nav > ul > li > span + ul, header nav > ul > li > a.has-dropdown + ul {
display: block;
position: absolute;
top: 69px;
background: #fff;
-webkit-transform-origin: center top;
transform-origin: center top;
overflow: hidden;
opacity: 0;
-webkit-transition: 400ms top, 500ms opacity;
transition: 400ms top, 500ms opacity;
letter-spacing: 1px;
border-bottom: 0;
pointer-events: none;
}
header nav > ul > li > span + ul > li, header nav > ul > li > a.has-dropdown + ul > li {
-webkit-transition: 600ms width;
transition: 600ms width;
}
header nav > ul > li > span + ul > li em, header nav > ul > li > a.has-dropdown + ul > li em {
display: inline-block;
position: relative;
white-space: nowrap;
font-size: 15px;
}
header nav > ul > li > span + ul > li em::after, header nav > ul > li > a.has-dropdown + ul > li em::after {
content: '';
display: block;
position: absolute;
right: 0;
height: 5px;
width: 0;
background: #e9d391;
-webkit-transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) width;
transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) width;
}
header nav > ul > li > span + ul > li span, header nav > ul > li > span + ul > li a, header nav > ul > li > a.has-dropdown + ul > li span, header nav > ul > li > a.has-dropdown + ul > li a {
position: relative;
padding: 10px 30px;
padding-left: 40px;
cursor: pointer;
}
header nav > ul > li > span + ul > li span:hover em::after, header nav > ul > li > span + ul > li a:hover em::after, header nav > ul > li > a.has-dropdown + ul > li span:hover em::after, header nav > ul > li > a.has-dropdown + ul > li a:hover em::after {
left: 0;
right: auto;
width: 100%;
}
header nav > ul > li > span + ul > li a::before, header nav > ul > li > a.has-dropdown + ul > li a::before {
content: '';
display: block;
position: absolute;
top: 50%;
height: 6px;
width: 6px;
left: 20px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
header nav > ul > li > span + ul > li > span::before, header nav > ul > li > span + ul > li > a::before, header nav > ul > li > a.has-dropdown + ul > li > span::before, header nav > ul > li > a.has-dropdown + ul > li > a::before {
-webkit-transition: 300ms -webkit-transform;
transition: 300ms -webkit-transform;
transition: 300ms transform;
transition: 300ms transform, 300ms -webkit-transform;
}
header nav > ul > li > span + ul > li > span::before, header nav > ul > li > span + ul > li > span::after, header nav > ul > li > span + ul > li > a.has-dropdown::before, header nav > ul > li > span + ul > li > a.has-dropdown::after, header nav > ul > li > a.has-dropdown + ul > li > span::before, header nav > ul > li > a.has-dropdown + ul > li > span::after, header nav > ul > li > a.has-dropdown + ul > li > a.has-dropdown::before, header nav > ul > li > a.has-dropdown + ul > li > a.has-dropdown::after {
content: '';
display: block;
height: 1px;
width: 8px;
position: absolute;
top: 50%;
left: 17px;
-webkit-transition: 300ms -webkit-transform;
transition: 300ms -webkit-transform;
transition: 300ms transform;
transition: 300ms transform, 300ms -webkit-transform;
background: #000;
transition: 300ms transform;
}
header nav > ul > li > span + ul > li > span::before, header nav > ul > li > span + ul > li > a.has-dropdown::before, header nav > ul > li > a.has-dropdown + ul > li > span::before, header nav > ul > li > a.has-dropdown + ul > li > a.has-dropdown::before {
-webkit-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
}
header nav > ul > li > span + ul > li > span::after, header nav > ul > li > span + ul > li > a.has-dropdown::after, header nav > ul > li > a.has-dropdown + ul > li > span::after, header nav > ul > li > a.has-dropdown + ul > li > a.has-dropdown::after {
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
header nav > ul > li > span + ul > li.expanded > span::before, header nav > ul > li > span + ul > li.expanded > span::after, header nav > ul > li > span + ul > li.expanded > a::before, header nav > ul > li > span + ul > li.expanded > a::after, header nav > ul > li > a.has-dropdown + ul > li.expanded > span::before, header nav > ul > li > a.has-dropdown + ul > li.expanded > span::after, header nav > ul > li > a.has-dropdown + ul > li.expanded > a::before, header nav > ul > li > a.has-dropdown + ul > li.expanded > a::after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
header nav > ul > li:hover > span > strong > span::after, header nav > ul > li:hover > span > strong > em::after, header nav > ul > li:hover > a > strong > span::after, header nav > ul > li:hover > a > strong > em::after, header nav > ul > li.active > span > strong > span::after, header nav > ul > li.active > span > strong > em::after, header nav > ul > li.active > a > strong > span::after, header nav > ul > li.active > a > strong > em::after {
left: 0;
right: auto;
width: 100%;
}
header nav > ul > li:hover > span, header nav > ul > li:hover > a {
background: #fff;
color: #000;
}
header nav > ul > li:hover > span + ul, header nav > ul > li:hover > a + ul {
top: 79px;
opacity: 1;
pointer-events: auto;
}
header nav > ul > li > ul li > span, header nav > ul > li > ul li > a {
text-align: left;
}
header nav > ul > li > ul li.expanded > span, header nav > ul > li > ul li.expanded > a.has-dropdown {
font-weight: normal;
}
header nav > ul > li > ul ul {
padding-left: 20px;
}
.header-whiten header {
background: #fff;
border-bottom-width: 1px;
}
.header-whiten header h1 a .logo, .header-whiten header h1 span .logo {
fill: #000;
}
.header-whiten header nav > ul > li > span, .header-whiten header nav > ul > li > a {
color: #000;
}
main {
position: relative;
z-index: 2;
min-height: 100vh;
padding-bottom: 220px;
}
main .back-to-top {
right: 30px;
bottom: 30px;
height: 60px;
width: 60px;
}
main .back-to-top:hover {
background: #c4a547;
}
main > section, main > aside {
z-index: 1;
}
main > section > div, main > aside > div {
display: block;
float: left;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
max-width: 960px;
}
main > section {
padding: 80px 20px;
}
main > section.no-padding > div {
max-width: 1440px;
}
main > section.no-padding .padding {
position: relative;
width: 100%;
max-width: 1000px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
main > section.semi-conjoined {
padding-top: 40px;
}
main > section.has-crumb {
padding-top: 20px;
}
.page-visual {
display: none;
}
.crumb {
position: relative;
left: 50%;
max-width: 1280px;
font-size: 13px;
margin-bottom: 55px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.crumb li:not(:first-child) a, .crumb li:not(:first-child) span {
max-width: none;
overflow: visible;
}
.crumb li:not(:first-child) a {
position: relative;
-webkit-transition: 300ms color;
transition: 300ms color;
}
.crumb li:not(:first-child) a::before {
content: '';
display: block;
position: absolute;
right: 0;
bottom: -5px;
height: 2px;
width: 0;
background: #c4a547;
-webkit-transition: 300ms width;
transition: 300ms width;
}
.crumb li:not(:first-child) a:hover {
color: #c4a547;
}
.crumb li:not(:first-child) a:hover::before {
right: auto;
left: 0;
width: 100%;
}
.crumb li:first-child a::before, .crumb li:first-child a::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
height: 10px;
width: 10px;
background-size: contain;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: 600ms opacity;
transition: 600ms opacity;
}
.crumb li:first-child a::before {
background-image: url(//www.alacampagne.jp/img/ico-home.png);
}
.crumb li:first-child a::after {
background-image: url(//www.alacampagne.jp/img/ico-home-hover.png);
opacity: 0;
}
.crumb li:first-child a:hover::before {
opacity: 0;
}
.crumb li:first-child a:hover::after {
opacity: 1;
}
.crumb li img {
vertical-align: baseline;
opacity: 0;
}
h2 {
margin-bottom: 40px;
}
h2 span {
font-size: 64px;
margin-bottom: 15px;
}
h2 em {
font-size: 14px;
}
h3 {
margin-bottom: 40px;
}
h3 span {
font-size: 32px;
margin-bottom: 15px;
letter-spacing: 3px;
}
h3 em {
font-size: 14px;
}
h4 {
font-size: 26px;
margin-bottom: 40px;
}
.cursive-subtitle {
font-size: 40px;
margin-bottom: 35px;
}
br.pbr {
display: inline;
}
br.sbr {
display: none;
}
.lead-box p {
text-align: center;
font-size: 16px;
}
.graphic-textbox {
width: 960px;
}
.graphic-textbox img {
margin-bottom: 70px;
}
.graphic-textbox h4, .graphic-textbox p, .graphic-textbox h5 {
text-align: center;
}
.graphic-textbox h4 {
font-size: 24px;
text-align: center;
margin-bottom: 35px;
}
.graphic-textbox p {
font-size: 15px;
}
.graphic-textbox h5 {
margin-top: 40px;
}
.graphic-textbox a {
width: 480px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 400ms background;
transition: 400ms background;
}
.graphic-textbox a small, .graphic-textbox a em {
-webkit-transition: 400ms color;
transition: 400ms color;
}
.graphic-textbox a small {
font-size: 16px;
}
.graphic-textbox a em {
font-size: 21px;
}
.graphic-textbox a::after {
-webkit-transition: 400ms border-color;
transition: 400ms border-color;
}
.graphic-textbox a:hover {
background: #c4a547;
}
.graphic-textbox a:hover small, .graphic-textbox a:hover em {
color: #fff;
}
.graphic-textbox a:hover::after {
border-top-color: #fff;
border-right-color: #fff;
}
.visual-desc h4 {
font-size: 24px;
margin-top: 30px;
}
.visual-desc p {
font-size: 16px;
text-align: center;
}
article {
max-width: 960px;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 80px;
}
article h3 {
font-size: 30px;
}
article .date {
font-size: 14px;
margin-top: 15px;
}
article .date + * {
margin-top: 50px;
}
article p, article ul, article ol, article li {
font-size: 14px;
line-height: 1.6em;
}
article p + h4, article ul + h4, article ol + h4, article li + h4 {
margin-top: 45px;
}
article p + h5, article p + h6, article ul + h5, article ul + h6, article ol + h5, article ol + h6, article li + h5, article li + h6 {
margin-top: 40px;
}
article h4 {
text-align: center;
font-size: 22px;
}
article h5 {
font-size: 19px;
}
article p a {
-webkit-transition: 400ms color;
transition: 400ms color;
}
article p a::after {
-webkit-transition: 400ms width;
transition: 400ms width;
}
article p a:hover {
color: #c4a547;
}
article p a:hover::after {
width: 0;
left: auto;
right: 0;
}
article p img {
margin: 15px 0;
}
article img.visual {
margin-bottom: 40px;
}
article .article-button {
height: 40px;
width: 200px;
line-height: 38px;
background: #fff;
margin-top: 60px;
}
article .article-button, article .article-button::after {
-webkit-transition: 500ms;
transition: 500ms;
}
article .article-button:hover {
background: #c4a547;
border-color: #c4a547;
color: #fff;
}
article .article-button:hover::after {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.subtitle-tab {
margin-bottom: 40px;
}
.subtitle-tab li {
font-size: 32px;
}
.subtitle-tab li:hover a::after {
left: 0;
right: auto;
width: 100%;
}
.tab-buttons {
display: block;
font-size: 16px;
padding-bottom: 60px;
}
.tab-buttons li::after {
margin: 0 1.5em;
}
.tab-buttons li:hover a::after {
left: 0;
right: auto;
width: 100%;
}
.tab-select {
display: none;
}
.brand-menu ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
flex-direction: row;
}
.brand-menu ul > * {
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.brand-menu li {
height: 250px;
width: 280px;
}
.brand-menu li + li {
margin-top: 0;
}
.brand-menu a::before, .brand-menu a::after {
height: 240px;
width: 270px;
-webkit-transition: 400ms;
transition: 400ms;
}
.brand-menu a::after {
z-index: -1;
}
.brand-menu a img {
-webkit-transition: 300ms -webkit-transform;
transition: 300ms -webkit-transform;
transition: 300ms transform;
transition: 300ms transform, 300ms -webkit-transform;
}
.brand-menu a span {
position: static;
height: 50px;
width: 270px;
line-height: 50px;
text-align: center;
letter-spacing: 1px;
padding: 0;
margin-top: 0;
margin-left: 10px;
-webkit-transform: none;
transform: none;
}
.brand-menu a:hover::before {
opacity: 0;
}
.brand-menu a:hover::after {
border: 10px solid #fff;
background: #fff;
}
.gallery-list > div {
width: 280px;
margin: 25px 0 25px 60px;
}
.gallery-list > div figure {
margin-bottom: 15px;
}
.gallery-list > div span {
font-size: 16px;
}
.gallery-list > div::after {
bottom: -35px;
border-bottom-width: 20px;
border-left-width: 14px;
border-right-width: 14px;
}
.gallery-list > div:hover figure::after {
border: 10px solid rgba(255, 255, 255, 0.5);
}
.gallery-list > div:hover figure img {
-webkit-transform: scale(1.15);
transform: scale(1.15);
-webkit-transition: 3000ms -webkit-transform;
transition: 3000ms -webkit-transform;
transition: 3000ms transform;
transition: 3000ms transform, 3000ms -webkit-transform;
}
.gallery-list > div:hover.active figure::after {
border: 10px solid #fff;
}
.gallery-indepths {
width: 100vw;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.gallery-indepths > div {
position: relative;
margin: 10px 0 30px;
padding: 60px 0;
}
.gallery-indepths > div .gallery-content {
position: relative;
left: 50%;
max-width: 960px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.gallery-slide {
width: 360px;
padding: 0;
}
.gallery-slide .gallery-slide-large {
height: 360px;
width: 360px;
}
.gallery-slide .gallery-slide-nav {
max-width: none;
left: 0;
margin-top: 20px;
-webkit-transform: none;
transform: none;
}
.gallery-slide .gallery-slide-nav li {
height: 64px;
width: 64px;
margin: 0;
}
.gallery-details {
float: right;
width: 550px;
}
.gallery-details strong {
font-size: 24px;
margin-top: 0;
text-align: left;
}
.gallery-details p {
margin-top: 30px;
font-size: 14px;
}
.gallery-details p + p {
margin-top: 20px;
}
.gallery-details p.price {
font-size: 16px;
}
.gallery-details q {
margin-top: 30px;
font-size: 13px;
}
.gallery-details li {
font-size: 12px;
}
.gallery-details li.footnote-last {
white-space: nowrap;
}
.gallery-content-close {
position: absolute;
top: 40px;
right: 40px;
margin-top: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
background: none;
}
.gallery-content-close i {
right: 50%;
-webkit-transform: translate(50%, -50%) rotate(0);
transform: translate(50%, -50%) rotate(0);
height: 32px;
width: 32px;
-webkit-transition: 400ms -webkit-transform;
transition: 400ms -webkit-transform;
transition: 400ms transform;
transition: 400ms transform, 400ms -webkit-transform;
}
.gallery-content-close:hover i {
-webkit-transform: translate(50%, -50%) rotate(90deg);
transform: translate(50%, -50%) rotate(90deg);
}
.contact-box {
clear: both;
width: 420px;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 30px;
margin: 40px 0px 0px 0px;
}
.contact-box strong {
font-size: 22px;
}
.contact-box span {
margin-top: 10px;
font-size: 15px;
}
.contact-box a {
margin-top: 10px;
font-size: 32px;
pointer-events: none;
}
.contact-box p {
font-size: 13px;
margin-top: 10px;
line-height: 1.6em;
}
aside {
padding: 70px 20px;
}
aside .deco {
display: block;
top: auto;
right: -185px;
bottom: -90px;
left: auto;
z-index: 1;
height: 187px;
width: 211px;
}
aside .deco::after {
background: url(//www.alacampagne.jp/img/top/pc/img-deco-04.png);
height: 100%;
width: 100%;
opacity: 0;
-webkit-transform: translate(100px, -50%);
transform: translate(100px, -50%);
-webkit-transition: 700ms opacity, 1000ms -webkit-transform;
transition: 700ms opacity, 1000ms -webkit-transform;
transition: 1000ms transform, 700ms opacity;
transition: 1000ms transform, 700ms opacity, 1000ms -webkit-transform;
}
aside .deco.revealed::after {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
aside ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
aside ul > * {
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
aside ul li {
width: 280px;
}
aside ul li + li {
margin-top: 0;
}
aside ul li a img {
-webkit-transition: 400ms opacity;
transition: 400ms opacity;
}
aside ul li a:hover img {
opacity: 0.6;
}
footer {
height: 220px;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
footer .affiliate {
margin-bottom: 35px;
}
footer .affiliate li {
margin: 0 38px;
}
footer .affiliate a img {
-webkit-transition: 400ms opacity;
transition: 400ms opacity;
}
footer .affiliate a:hover img {
opacity: 0.5;
}
footer .social-media {
margin-bottom: 15px;
}
footer .social-media li {
margin: 0 10px;
}
footer .social-media a img {
-webkit-transition: 400ms opacity;
transition: 400ms opacity;
}
footer .social-media a:hover img {
opacity: 0.5;
}
footer section > div {
position: relative;
max-width: 960px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
footer section ul, footer section cite {
width: auto;
font-size: 13px;
}
footer section ul {
margin-bottom: 0;
}
footer section ul a {
display: inline-block;
position: relative;
}
footer section ul a::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: -3px;
height: 1px;
width: 0;
background: #fff;
-webkit-transition: 400ms;
transition: 400ms;
}
footer section ul a:hover::after {
right: auto;
left: 0;
width: 100%;
}
}@media only screen and (max-width: 1023px) {
.inquiry-customer table,
.inquiry-customer tr,
.inquiry-customer th,
.inquiry-customer td {
display: block;
float: left;
width: 100%;
}
}
.inquiry-customer article p {
text-align: center;
}
.inquiry-customer .instruction,
.inquiry-customer .privacy-accept {
display: block;
float: left;
width: 100%;
text-align: center;
font-size: 12px;
}
.inquiry-customer .instruction i {
color: #c4a547;
}
.inquiry-customer .privacy-accept {
margin-top: 20px;
}
.inquiry-customer .privacy-accept a {
display: inline-block;
position: relative;
}
.inquiry-customer .privacy-accept a::after {
content: "";
display: block;
position: absolute;
bottom: -3px;
left: 0;
height: 1px;
width: 100%;
background: #c4a547;
}
.inquiry-customer .form-buttons {
display: block;
float: left;
width: 100%;
margin-top: 5px;
}
.inquiry-customer .form-button {
display: block;
float: left;
position: relative;
height: 50px;
width: 100%;
background: #c4a547;
color: #fff;
border: 1px solid #c4a547;
line-height: 48px;
text-align: center;
font-size: 14px;
margin-top: 15px;
-webkit-transition: 400ms border, 400ms background, 400ms color;
transition: 400ms border, 400ms background, 400ms color;
}
.inquiry-customer .form-button::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 20px;
height: 10px;
width: 10px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.inquiry-customer .form-button.disabled {
opacity: 0.5;
background: #bfbfbf;
border-color: #bfbfbf;
pointer-events: none;
}
.inquiry-customer .form-button.blur-button {
background: #bfbfbf;
border-color: #bfbfbf;
color: #666;
}
.inquiry-customer .form-button.blur-button::after {
right: auto;
left: 20px;
border-top-color: #666;
border-right-color: #666;
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.inquiry-customer button {
display: none;
}
.inquiry-customer form {
display: block;
float: left;
width: 100%;
}
.inquiry-customer form .form-box {
display: block;
float: left;
width: 100%;
background: #fff;
padding: 10px 20px;
margin-top: 20px;
}
.inquiry-customer form .form-box [type="color"],
.inquiry-customer form .form-box [type="date"],
.inquiry-customer form .form-box [type="datetime"],
.inquiry-customer form .form-box [type="datetime-local"],
.inquiry-customer form .form-box [type="email"],
.inquiry-customer form .form-box [type="month"],
.inquiry-customer form .form-box [type="number"],
.inquiry-customer form .form-box [type="password"],
.inquiry-customer form .form-box [type="search"],
.inquiry-customer form .form-box [type="tel"],
.inquiry-customer form .form-box [type="text"],
.inquiry-customer form .form-box [type="time"],
.inquiry-customer form .form-box [type="url"],
.inquiry-customer form .form-box [type="week"],
.inquiry-customer form .form-box input:not([type]),
.inquiry-customer form .form-box textarea {
display: block;
float: left;
width: 100%;
border: 1px solid #ddd;
background: none;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.inquiry-customer form .form-box [type="color"].invalid,
.inquiry-customer form .form-box [type="date"].invalid,
.inquiry-customer form .form-box [type="datetime"].invalid,
.inquiry-customer form .form-box [type="datetime-local"].invalid,
.inquiry-customer form .form-box [type="email"].invalid,
.inquiry-customer form .form-box [type="month"].invalid,
.inquiry-customer form .form-box [type="number"].invalid,
.inquiry-customer form .form-box [type="password"].invalid,
.inquiry-customer form .form-box [type="search"].invalid,
.inquiry-customer form .form-box [type="tel"].invalid,
.inquiry-customer form .form-box [type="text"].invalid,
.inquiry-customer form .form-box [type="time"].invalid,
.inquiry-customer form .form-box [type="url"].invalid,
.inquiry-customer form .form-box [type="week"].invalid,
.inquiry-customer form .form-box input:not([type]).invalid,
.inquiry-customer form .form-box textarea.invalid {
border-color: #c00;
}
.inquiry-customer form .form-box textarea {
resize: none;
}
.inquiry-customer form .form-box select {
display: block;
float: left;
width: 100%;
height: 2.5em;
}
.inquiry-customer form .form-box table th,
.inquiry-customer form .form-box table td {
line-height: 1.5em;
}
.inquiry-customer form .form-box table th i {
color: #c4a547;
}
.inquiry-customer form .form-box table th small {
display: inline-block;
color: #666;
font-size: 12px;
}
.inquiry-customer form .form-box table td span {
display: block;
float: left;
padding: 9px 5px;
}
.inquiry-customer form .form-box table .alert-text {
display: block;
float: left;
width: 100%;
margin-top: 10px;
color: #c00;
padding-left: 1em;
text-indent: -1em;
line-height: 1.3em;
}
.inquiry-customer form .form-box table .alert-text + .alert-text {
margin-top: 5px;
}
@media only screen and (max-width: 1023px) {
.inquiry-customer form .form-box [type="color"],
.inquiry-customer form .form-box [type="date"],
.inquiry-customer form .form-box [type="datetime"],
.inquiry-customer form .form-box [type="datetime-local"],
.inquiry-customer form .form-box [type="email"],
.inquiry-customer form .form-box [type="month"],
.inquiry-customer form .form-box [type="number"],
.inquiry-customer form .form-box [type="password"],
.inquiry-customer form .form-box [type="search"],
.inquiry-customer form .form-box [type="tel"],
.inquiry-customer form .form-box [type="text"],
.inquiry-customer form .form-box [type="time"],
.inquiry-customer form .form-box [type="url"],
.inquiry-customer form .form-box [type="week"],
.inquiry-customer form .form-box input:not([type]),
.inquiry-customer form .form-box textarea,
.inquiry-customer form .form-box select {
font-size: 12px;
}
.inquiry-customer form .form-box table,
.inquiry-customer form .form-box tr,
.inquiry-customer form .form-box th,
.inquiry-customer form .form-box td {
display: block;
float: left;
width: 100%;
}
.inquiry-customer form .form-box tr {
padding: 20px 0;
}
.inquiry-customer form .form-box tr + tr {
border-top: 1px solid #ddd;
}
.inquiry-customer form .form-box th + td {
margin-top: 10px;
}
.inquiry-customer form .form-box input + input {
margin-top: 5px;
}
}
.inquiry-customer form input[type="checkbox"],
.inquiry-customer form input[type="radio"] {
vertical-align: middle;
}
.inquiry-customer .company-box table span {
display: inline-block;
}
.inquiry-customer .company-box table a {
position: relative;
}
.inquiry-customer .company-box table a::after {
content: "";
display: block;
position: absolute;
bottom: -3px;
left: 0;
height: 1px;
width: 100%;
background: #c4a547;
}
@media only screen and (max-width: 1023px) {
.inquiry-customer .company-box table {
margin-top: 30px;
}
.inquiry-customer .company-box table tr + tr {
margin-top: 15px;
}
.inquiry-customer .company-box table th + td {
margin-top: 5px;
}
.inquiry-customer .company-box table th,
.inquiry-customer .company-box table td {
font-size: 14px;
line-height: 1.5em;
}
.inquiry-customer .company-box table th {
font-weight: bold;
}
}
@media only screen and (min-width: 1024px) {
.inquiry-customer {
background-image: url(//www.alacampagne.jp/img/miscellaneous/pc/img-visual.jpg);
}
.inquiry-customer .instruction,
.inquiry-customer .privacy-accept {
font-size: 14px;
}
.inquiry-customer .privacy-accept {
margin-top: 30px;
}
.inquiry-customer .privacy-accept a {
-webkit-transition: 400ms color;
transition: 400ms color;
}
.inquiry-customer .privacy-accept a::after {
-webkit-transition: 400ms width;
transition: 400ms width;
}
.inquiry-customer .privacy-accept a:hover {
color: #c4a547;
}
.inquiry-customer .privacy-accept a:hover::after {
width: 0;
left: auto;
right: 0;
}
.inquiry-customer .form-buttons {
position: relative;
width: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin-top: 30px;
}
.inquiry-customer .form-button {
width: 250px;
margin: 0 10px;
}
.inquiry-customer .form-button::after {
-webkit-transition: 400ms border;
transition: 400ms border;
}
.inquiry-customer .form-button:not(.disabled):hover {
background: #fff;
color: #c4a547;
}
.inquiry-customer .form-button:not(.disabled):hover::after {
border-top-color: #c4a547;
border-right-color: #c4a547;
}
.inquiry-customer .form-button.blur-button:not(.disabled):hover {
color: #666;
}
.inquiry-customer .form-button.blur-button:not(.disabled):hover::after {
border-top-color: #666;
border-right-color: #666;
}
.inquiry-customer form {
width: 700px;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.inquiry-customer form .form-box {
padding: 30px 50px;
margin-top: 30px;
}
.inquiry-customer form .form-box [type="color"],
.inquiry-customer form .form-box [type="date"],
.inquiry-customer form .form-box [type="datetime"],
.inquiry-customer form .form-box [type="datetime-local"],
.inquiry-customer form .form-box [type="email"],
.inquiry-customer form .form-box [type="month"],
.inquiry-customer form .form-box [type="number"],
.inquiry-customer form .form-box [type="password"],
.inquiry-customer form .form-box [type="search"],
.inquiry-customer form .form-box [type="tel"],
.inquiry-customer form .form-box [type="text"],
.inquiry-customer form .form-box [type="time"],
.inquiry-customer form .form-box [type="url"],
.inquiry-customer form .form-box [type="week"],
.inquiry-customer form .form-box input:not([type]),
.inquiry-customer form .form-box textarea,
.inquiry-customer form .form-box select {
font-size: 14px;
}
.inquiry-customer form .form-box select {
border: 1px solid #ddd;
background: none;
}
.inquiry-customer form .form-box input + input {
margin-top: 10px;
}
.inquiry-customer form .form-box table {
table-layout: fixed;
width: 100%;
}
.inquiry-customer form .form-box table tr + tr th,
.inquiry-customer form .form-box table tr + tr td {
border-top: 1px solid #ddd;
}
.inquiry-customer form .form-box table th,
.inquiry-customer form .form-box table td {
padding: 25px 0;
font-size: 14px;
}
.inquiry-customer form .form-box table th {
width: 180px;
}
.inquiry-customer form input[type="checkbox"],
.inquiry-customer form input[type="radio"] {
vertical-align: baseline;
}
.inquiry-customer .company-box table {
float: left;
clear: both;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin-top: 40px;
font-size: 14px;
}
.inquiry-customer .company-box table th,
.inquiry-customer .company-box table td {
line-height: 1.8em;
vertical-align: top;
}
.inquiry-customer .company-box table th {
width: 100px;
}
.inquiry-customer .company-box table tr + tr th,
.inquiry-customer .company-box table tr + tr td {
padding-top: 10px;
}
.inquiry-customer .company-box table a {
-webkit-transition: 400ms color;
transition: 400ms color;
}
.inquiry-customer .company-box table a::after {
-webkit-transition: 400ms width;
transition: 400ms width;
}
.inquiry-customer .company-box table a:hover {
color: #c4a547;
}
.inquiry-customer .company-box table a:hover::after {
width: 0;
left: auto;
right: 0;
}
}

h4 em {
font-size: 0.7em;
display: block;
float: left;
width: 100%;
text-align: center;
}
.bold {
font-weight: bold;
}
.btn {
display: block;
padding: 10px 20px;
margin: 10px 0 5px 0;
text-align: center;
width: max-content;
min-width: 150px;
max-width: 100%;
margin-inline: auto;
position: relative;
transition: 0.5s;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
font-size: 12px;
}
.btn::after {
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
width: 7px;
height: 7px;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}
.btn:hover {
opacity: 0.5;
}
.public_ec {
background-color: #e1d2a0;
}
.ama_ec {
background-color: #f7ca00;
} img {
max-width: 100%;
height: auto;
}
header h1 {
margin-top: 0px;
padding-top: 70px;
}
#reserve {
position: fixed;
z-index: 99;
width: 100%;
}
#reserve a {
display: block;
}
#reserve :hover {
opacity: 0.9;
}
#index-header {
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
color: #fff;
pointer-events: auto;
}
#index-header ul {
width: 100%;
max-height: -webkit-calc(100vh - 60px);
max-height: calc(100vh - 60px);
background-color: #c4a547;
pointer-events: auto;
text-align: right;
}
#index-header ul li {
pointer-events: auto;
display: block;
padding: 10px 20px 10px 10px;
}
#reserve :hover {
background: #fff;
border-color: #fff;
color: #000;
transition: 0.5s;
}
@media only screen and (min-width: 1024px) {
header {
height: 110px;
}
header nav ul {
padding-top: 40px;
}
#index-header ul li {
max-width: 1280px;
margin: 0 auto;
}
}
@media only screen and (max-width: 1024px) {
header h1 {
margin-top: 0px;
padding-top: 0px;
}
#index-header {
font-size: 1.2rem;
}
#index-header ul {
width: 100%;
height: 50px;
text-align: center;
}
#index-header ul li {
padding: 17px;
}
.top-banner {
margin-top: 50px;
}
#reserve :hover {
background-color: #c4a547;
color: #fff;
}
} @media only screen and (min-width: 1024px) {
.company-box .contact-box {
width: 480px;
}
}
@media only screen and (min-width: 1024px) {
.instruction {
margin-top: 30px;
margin-bottom: 20px;
font-size: 17px;
line-height: 1.5em;
}
}
@media only screen and (max-width: 1024px) {
.instruction {
margin-top: 30px;
font-size: 13px;
line-height: 1.5em;
}
} .whole-details,
.whole-details strong,
.whole-details p,
.whole-details q,
.whole-details ul,
.whole-details li {
display: block;
float: left;
width: 100%;
line-height: 1.5em;
}
.whole-details strong {
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
color: #c4a547;
font-size: 18px;
text-align: center;
margin-top: 30px;
}
.whole-details p {
margin-top: 20px;
}
.whole-details p + p {
margin-top: 10px;
}
.whole-details p.price {
font-size: 14px;
}
.whole-details q {
margin-top: 20px;
padding: 20px;
background: #f7f7f7;
}
.whole-details ul {
margin-top: 30px;
}
.whole-details li {
position: relative;
font-size: 10px;
color: #c4a547;
padding-left: 1em;
}
.whole-details li::before {
content: "※";
position: absolute;
left: 0;
}
.whole-details li + li {
margin-top: 5px;
}
.whole-details p.price {
font-size: 14px;
}
.whole-details p.price {
font-size: 16px;
}
.products.tarte.tarte-index .birthday-showcase .whole-details strong {
font-size: 22px;
}
.products.tarte.tarte-index .birthday-showcase {
background: #fff;
padding: 0 20px 40px;
}
@media only screen and (min-width: 1024px) {
.products.tarte.tarte-index .birthday-showcase img {
display: block;
float: left;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
position: relative;
left: -20px;
}
.products.tarte.tarte-index .birthday-showcase h3 {
background: #c4a547;
padding: 20px;
width: 100%;
margin-bottom: 10px;
position: relative;
top: -20px;
left: -20px;
}
.products.tarte.tarte-index .birthday-showcase h3 span {
font-size: 18px;
color: #fff;
text-align: left;
line-height: 1.5em;
letter-spacing: 0;
margin-bottom: 0;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
}
.products.tarte.tarte-index .birthday-showcase .whole-details strong {
font-size: 22px;
}
.products.tarte.tarte-index .birthday-showcase {
position: relative;
width: 1280px;
background: none;
padding: 0;
}
.products.tarte.tarte-index .birthday-showcase + .birthday-showcase {
margin-top: 70px;
}
.products.tarte.tarte-index .birthday-showcase img {
position: absolute;
top: 0;
left: 0;
width: 660px;
}
.products.tarte.tarte-index .birthday-showcase h3 {
position: absolute;
top: 0;
height: 210px;
width: 410px;
margin-bottom: 0;
}
.products.tarte.tarte-index .birthday-showcase h3 span {
width: auto;
position: relative;
top: 50%;
left: 50%;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.products.tarte.tarte-index .birthday-showcase .whole-details {
float: right;
padding: 70px 70px 90px 140px;
width: 690px;
background: #fff;
margin-top: 70px;
}
.products.tarte.tarte-index .birthday-showcase .whole-details strong {
font-size: 30px;
}
.products.tarte.tarte-index .birthday-showcase .whole-details strong {
font-size: 22px;
}
.products.tarte.tarte-index .birthday-showcase .whole-details {
float: right;
padding: 70px 70px 90px 140px;
width: 690px;
background: #fff;
margin-top: 70px;
}
.products.tarte.tarte-index .birthday-showcase .whole-details strong {
font-size: 30px;
}
} .img-box {
display: block;
width: 100%;
}
.coffret01 {
margin: 0 auto;
width: 250px;
}
.coffret02 {
margin: 0 auto 50px auto;
width: 330px;
}
.coffret {
margin-top: 50px;
}
.bag {
clear: both;
margin: 0 auto;
}
.visual-desc-center {
width: 50%;
padding: 25px 0;
clear: both;
}
.visual-desc-center {
display: block;
width: 100%;
padding: 25px 0;
}
.visual-desc-center h4,
.visual-desc-center p {
display: block;
text-align: center;
width: 100%;
line-height: 1.5em;
}
.visual-desc-center h4 {
font-size: 18px;
text-align: center;
color: #c4a547;
margin: 0;
}
.visual-desc-center p {
margin-top: 80px;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
font-size: 14px;
}
@media only screen and (min-width: 1024px) {
.coffret {
margin-top: 200px;
}
.gift-container-reverse {
clear: both;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.gift-container {
clear: both;
display: flex;
justify-content: space-around;
flex-direction: row;
}
.gift-item {
flex-direction: column-reverse;
}
.visual-desc {
width: 50%;
padding: 25px 0;
clear: both;
}
.visual-desc h4,
.visual-desc p {
text-align: left;
width: 100%;
line-height: 1.5em;
}
.visual-desc-center h4 {
font-size: 24px;
margin-top: 30px;
}
.visual-desc-center p {
font-size: 16px;
text-align: center;
margin-top: 120px;
}
.img-box {
width: 80%;
padding-top: 50px;
}
.coffret01 {
margin: 0 auto;
height: 250px;
}
.coffret02 {
margin: 0 auto 0 auto;
height: 250px;
}
}
.products.bakedcake-index .wrapping-box > div .pattern-sample .patterns > * {
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.products.bakedcake-index .wrapping-box > div .pattern-sample .patterns div {
height: 55px;
width: 100%;
background-size: 83px 41px;
}
.products.bakedcake-index
.wrapping-box
> div
.pattern-sample
.patterns
div.pattern-1 {
background-image: url(//www.alacampagne.jp/img/products/bakedcake/index/img-pattern-01.jpg);
background-color: #d3bb01;
}
.products.bakedcake-index
.wrapping-box
> div
.pattern-sample
.patterns
div.pattern-2 {
background-image: url(//www.alacampagne.jp/img/products/bakedcake/index/img-pattern-02.jpg);
background-color: #fff;
}
.products.bakedcake-index .wrapping-box > div .pattern-sample p {
display: block;
float: left;
width: 100%;
margin-top: 20px;
font-size: 14px;
text-align: center;
}
@media only screen and (min-width: 1024px) {
.products.bakedcake-index .wrapping-box > div .pattern-sample .patterns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.products.bakedcake-index .wrapping-box > div .pattern-sample .patterns div {
height: 300px;
width: 300px;
}
.products.bakedcake-index
.wrapping-box
> div
.pattern-sample
.patterns
div.pattern-2 {
margin-top: 0px;
}
}
.gallery-list-ec {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
opacity: 0;
width: 100%;
-webkit-transition: 500ms opacity;
transition: 500ms opacity;
}
.gallery-list-ec-element {
width: calc(350% - 10px);
margin-top: 20px;
}
.gallery-shown .gallery-list-ec {
opacity: 1;
}
.gallery-list-ec > div {
position: relative;
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
.gallery-list-ec > div[data-col="0"] {
margin-left: 0;
}
.gallery-list-ec > div figure {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 8px;
}
.gallery-list-ec > div figure img.loaded {
opacity: 1;
}
.gallery-list-ec > div p {
display: block;
float: left;
width: 100%;
text-align: center;
}
.gallery-list-ec > div span {
display: inline-block;
font-size: 14px;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
max-width: 100%;
text-align: left;
line-height: 1.4em;
}
@media only screen and (min-width: 1024px) {
.gallery-list-ec > div {
width: 280px;
margin: 55px 0 0 0;
}
.gallery-list-ec:after {
content: "";
display: block;
width: 280px;
height: 0;
}
.gallery-list-ec > div figure {
margin-bottom: 15px;
}
.gallery-list-ec > div span {
font-size: 16px;
}
} .graphic-textbox-xmas,
.graphic-textbox-xmas .graphic-text {
display: block;
float: left;
width: 100%;
position: relative;
color: #fff;
}
.graphic-textbox-xmas img {
width: 100%;
margin-bottom: 25px;
}
.graphic-textbox-xmas h4 {
font-size: 21px;
text-align: left;
}
.graphic-textbox-xmas p {
line-height: 1.5em;
}
.graphic-textbox-xmas p + p {
margin-top: 10px;
}
.graphic-textbox-xmas h5 {
font-size: 16px;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
line-height: 1.5em;
margin-top: 30px;
}
.graphic-textbox-xmas a {
display: block;
float: left;
position: relative;
height: 70px;
width: 100%;
background: #c8161d;
margin-top: 30px;
}
.graphic-textbox-xmas a::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 20px;
height: 12px;
width: 12px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.graphic-textbox-xmas a span {
display: block;
float: left;
position: relative;
width: 100%;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
}
.graphic-textbox-xmas a small,
.graphic-textbox-xmas a em {
display: inline-block;
width: 100%;
clear: both;
}
.graphic-textbox-xmas a small {
font-family: "Vollkorn", serif;
font-style: italic;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
color: #fff;
font-size: 13px;
margin-bottom: 2px;
}
.graphic-textbox-xmas a em {
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
font-size: 16px;
}
@media only screen and (min-width: 1024px) {
.graphic-textbox-xmas {
width: 960px;
color: #fff;
}
.graphic-textbox-xmas img {
margin-bottom: 70px;
}
.graphic-textbox-xmas h4,
.graphic-textbox-xmas p,
.graphic-textbox-xmas h5 {
text-align: center;
}
.graphic-textbox-xmas h4 {
font-size: 24px;
text-align: center;
margin-bottom: 35px;
}
.graphic-textbox-xmas p {
font-size: 15px;
}
.graphic-textbox-xmas h5 {
margin-top: 40px;
}
.graphic-textbox-xmas a {
width: 480px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 400ms background;
transition: 400ms background;
}
.graphic-textbox-xmas a small,
.graphic-textbox-xmas a em {
-webkit-transition: 400ms color;
transition: 400ms color;
}
.graphic-textbox-xmas a small {
font-size: 16px;
}
.graphic-textbox-xmas a em {
font-size: 21px;
}
.graphic-textbox-xmas a::after {
-webkit-transition: 400ms border-color;
transition: 400ms border-color;
}
.graphic-textbox-xmas a:hover {
background: #016563;
}
.graphic-textbox-xmas a:hover small,
.graphic-textbox-xmas a:hover em {
color: #fff;
}
.graphic-textbox-xmas a:hover::after {
border-top-color: #fff;
border-right-color: #fff;
}
} .products.tarte-index .tarte-regular .merveilleuse-banner {
display: block;
float: left;
width: 100%;
margin-bottom: 20px;
}
.products.tarte-index .tarte-regular .merveilleuse-banner figure {
display: block;
float: left;
width: 100%;
overflow: hidden;
margin-bottom: 8px;
}
.products.tarte-index .tarte-regular .merveilleuse-banner img {
display: block;
float: left;
width: 100%;
}
.products.tarte-index .tarte-regular .merveilleuse-banner p {
display: block;
float: left;
width: 100%;
text-align: center;
}
.products.tarte-index .tarte-regular .merveilleuse-banner span {
font-size: 14px;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
}
.products.merveilleuse-index .deco.deco-merveilleuse {
display: none;
}
.products.merveilleuse-index .merveilleuse-intro h4,
.products.merveilleuse-index .merveilleuse-point h4 {
position: relative;
text-align: left;
padding-bottom: 25px;
margin-bottom: 30px;
}
.products.merveilleuse-index .merveilleuse-intro h4 span,
.products.merveilleuse-index .merveilleuse-point h4 span {
font-size: 19px;
line-height: 1.4em;
}
.products.merveilleuse-index .merveilleuse-intro h4::after,
.products.merveilleuse-index .merveilleuse-point h4::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 50px;
background: #c4a547;
}
.products.merveilleuse-index .merveilleuse-intro {
background: #fff;
padding: 40px 20px;
}
.products.merveilleuse-index .merveilleuse-intro img {
display: block;
float: right;
width: 275px;
position: relative;
right: -20px;
}
.products.merveilleuse-index .merveilleuse-intro h3 {
background: #c4a547;
padding: 20px;
width: 100%;
margin-bottom: 10px;
position: relative;
top: -20px;
left: -20px;
}
.products.merveilleuse-index .merveilleuse-intro h3 span {
font-size: 18px;
color: #fff;
text-align: left;
line-height: 1.5em;
letter-spacing: 0;
margin-bottom: 0;
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
}
.products.merveilleuse-index .merveilleuse-intro .content,
.products.merveilleuse-index .merveilleuse-intro .content p {
display: block;
float: left;
width: 100%;
}
.products.merveilleuse-index .merveilleuse-intro .content p {
line-height: 1.5em;
}
.products.merveilleuse-index .merveilleuse-intro .content p + p {
margin-top: 10px;
}
.products.merveilleuse-index .merveilleuse-point {
padding: 40px 20px 0;
background: #fff;
}
.products.merveilleuse-index .merveilleuse-point h3 span {
font-family: "游明朝", "游明朝体", YuMincho, "Yu Mincho", "yu-mincho-pr6n",
"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar",
"Droid Sans Japanese", serif;
font-style: normal;
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
font-size: 22px;
line-height: 1.4em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
.products.merveilleuse-index .merveilleuse-point > div {
display: block;
float: left;
position: relative;
width: 100%;
}
.products.merveilleuse-index .merveilleuse-point > div + div {
margin-top: 45px;
}
.products.merveilleuse-index .merveilleuse-point > div .content {
display: block;
float: left;
width: 100%;
}
.products.merveilleuse-index .merveilleuse-point > div figure {
display: block;
float: left;
padding: 0 20px;
margin-bottom: 25px;
}
.products.merveilleuse-index .merveilleuse-point > div img {
display: block;
float: left;
width: 100%;
}
.products.merveilleuse-index .merveilleuse-point > div p {
line-height: 1.5em;
}
.products.merveilleuse-index .merveilleuse-point > div p + p {
margin-top: 10px;
}
.products.merveilleuse-index .merveilleuse-point .merveilleuse-finish {
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
position: relative;
left: -20px;
}
@media only screen and (min-width: 1024px) {
.products.tarte-index .tarte-regular .merveilleuse-banner {
margin-bottom: 40px;
}
.products.tarte-index .tarte-regular .merveilleuse-banner figure {
position: relative;
margin-bottom: 15px;
}
.products.tarte-index .tarte-regular .merveilleuse-banner figure::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 0 solid rgba(255, 255, 255, 0);
z-index: 1;
-webkit-transition: 500ms border;
transition: 500ms border;
}
.products.tarte-index .tarte-regular .merveilleuse-banner figure img {
-webkit-transition: 2000ms -webkit-transform;
transition: 2000ms -webkit-transform;
transition: 2000ms transform;
transition: 2000ms transform, 2000ms -webkit-transform;
}
.products.tarte-index .tarte-regular .merveilleuse-banner span {
font-size: 16px;
}
.products.tarte-index
.tarte-regular
.merveilleuse-banner:hover
figure::after {
border: 10px solid rgba(255, 255, 255, 0.5);
}
.products.tarte-index .tarte-regular .merveilleuse-banner:hover figure img {
-webkit-transform: scale(1.15);
transform: scale(1.15);
-webkit-transition: 3000ms -webkit-transform;
transition: 3000ms -webkit-transform;
transition: 3000ms transform;
transition: 3000ms transform, 3000ms -webkit-transform;
}
.products.merveilleuse-index {
background-image: url(//www.alacampagne.jp/img/products/tarte/merveilleuse/pc/img-visual.jpg);
}
.products.merveilleuse-index .deco.deco-merveilleuse {
display: block;
top: -115px;
left: 50%;
height: 153px;
width: 214px;
-webkit-transform: translateX(190px);
transform: translateX(190px);
}
.products.merveilleuse-index .deco.deco-merveilleuse::after {
background: url(//www.alacampagne.jp/img/products/tarte/merveilleuse/pc/img-deco-01.png);
height: 100%;
width: 100%;
}
.products.merveilleuse-index .merveilleuse-intro h4,
.products.merveilleuse-index .merveilleuse-point h4 {
line-height: 1em;
}
.products.merveilleuse-index .merveilleuse-intro {
position: relative;
width: 1280px;
background: none;
padding: 0;
}
.products.merveilleuse-index .merveilleuse-intro img {
position: absolute;
top: 70px;
right: 0;
width: 660px;
}
.products.merveilleuse-index .merveilleuse-intro h3 {
position: absolute;
top: 0;
left: 140px;
height: 210px;
width: 410px;
margin-bottom: 0;
}
.products.merveilleuse-index .merveilleuse-intro h3 span {
width: auto;
position: relative;
top: 50%;
left: 50%;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.products.merveilleuse-index .merveilleuse-intro .content {
padding: 140px;
padding-bottom: 120px;
width: 690px;
background: #fff;
margin-top: 140px;
}
.products.merveilleuse-index .merveilleuse-intro .content p {
font-size: 14px;
line-height: 1.8em;
}
.products.merveilleuse-index .merveilleuse-point {
position: relative;
width: 1280px;
background: none;
padding: 0;
}
.products.merveilleuse-index .merveilleuse-point h3 span {
font-size: 32px;
}
.products.merveilleuse-index .merveilleuse-point > div {
width: 950px;
}
.products.merveilleuse-index .merveilleuse-point > div + div {
margin-top: 70px;
}
.products.merveilleuse-index .merveilleuse-point > div .content {
background: #fff;
width: 620px;
padding: 70px 140px;
margin-top: 70px;
}
.products.merveilleuse-index .merveilleuse-point > div .content p {
font-size: 14px;
line-height: 1.8em;
}
.products.merveilleuse-index .merveilleuse-point > div figure {
position: absolute;
width: 400px;
padding: 0;
margin: 0;
}
.products.merveilleuse-index .merveilleuse-point > div.left {
float: right;
}
.products.merveilleuse-index .merveilleuse-point > div.left figure {
right: 0;
}
.products.merveilleuse-index .merveilleuse-point > div.right {
float: left;
}
.products.merveilleuse-index .merveilleuse-point > div.right .content {
float: right;
}
.products.merveilleuse-index .merveilleuse-point > div.right figure {
left: 0;
}
.products.merveilleuse-index .merveilleuse-point .merveilleuse-finish {
margin-top: 110px;
width: 1280px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
} #melimelo-title span {
font-size: 32px;
}
#melimelo-title em {
font-size: 18px;
margin-top: 8px;
color: #fff;
text-align: left;
}
#melimelo-title2 span {
font-size: 32px;
}
#melimelo-title2 em {
font-size: 18px;
margin-top: 8px;
color: #fff;
text-align: left;
}
.melimelo-attention {
text-align: center;
font-size: 14px;
margin: 0 auto;
margin-top: 20px;
}
@media only screen and (min-width: 1024px) {
.products.melimelo-index .melimelo-intro h3 span {
width: auto;
position: relative;
top: 40%;
left: 50%;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#melimelo-title span {
font-size: 64px;
}
#melimelo-title em {
font-size: 18px;
margin-top: 32px;
color: #fff;
text-align: center;
}
#melimelo-title2 span {
font-size: 64px;
}
#melimelo-title2 em {
font-size: 18px;
margin-top: 32px;
color: #fff;
text-align: center;
}
}
.products.melimelo-index .melimelo-point .content {
margin-bottom: 55px;
}
.products.melimelo-index .melimelo-intro h5,
.products.melimelo-index .melimelo-point h5 {
position: relative;
text-align: left;
padding-bottom: 25px;
margin-top: 30px;
}
.products.melimelo-index .melimelo-intro h5 span,
.products.melimelo-index .melimelo-point h5 span {
font-size: 16px;
line-height: 1.4em;
font-weight: bold;
}  @media screen and (min-width: 1024px) {
#xmas-special_bnr {
float: left;
width: 100%;
height: auto;
padding: 80px;
box-sizing: border-box;
}
#xmas-special_bnr .content {
width: 100%;
max-width: 960px;
margin: auto;
}
#xmas-special_bnr .content img {
display: block;
width: 100%;
height: auto;
}
#xmas-special_bnr .content img.sp {
display: none;
}
} @media screen and (max-width: 1023px) {
#xmas-special_bnr {
float: left;
width: 100%;
height: auto;
padding: 20px;
box-sizing: border-box;
}
#xmas-special_bnr .content {
width: 100%;
}
#xmas-special_bnr .content img {
display: block;
width: 100%;
height: auto;
}
#xmas-special_bnr .content img.pc {
display: none;
}
} @media screen and (min-width: 1024px) {
.top_bnr {
display: flex;
justify-content: space-between;
width: 960px;
height: auto;
margin: 0 auto;
padding: 80px 0 40px 0;
}
.top_bnr_item {
width: 100%;
height: auto;
padding: 0;
box-sizing: border-box;
}
.top_bnr_item .content {
width: 100%;
max-width: 445px;
margin: auto;
}
.top_bnr_item .content img {
display: block;
width: 100%;
height: auto;
}
.top_bnr_item .content img:hover {
opacity: 0.5;
transition: 0.5s;
}
.top_bnr_item .content img.sp {
display: none;
}
} @media screen and (max-width: 1023px) {
.top_bnr {
padding: 0 0 20px 0;
}
.top_bnr_item {
width: 100%;
height: auto;
padding: 20px 20px 0 20px;
box-sizing: border-box;
}
.top_bnr_item .content {
width: 100%;
}
.top_bnr_item .content img {
display: block;
width: 100%;
height: auto;
}
.top_bnr_item .content img:hover {
opacity: 1;
}
.top_bnr_item .content img.pc {
display: none;
}
}