/* カスタマイズ用CSS */
body { font-feature-settings: "palt";}
a { color: #7E0100;}
.sp { display: none;}
.ec-layoutRole { overflow: hidden;}
.ec-headerRole { max-width: 1150px; padding: 0;}
.header_title { padding: 4px; text-align: center; background: #FFF; font-size: 14px;}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search { background-color: #7E0100;}
.ec-headerNaviRole *, .ec-headerNaviRole *::before, .ec-headerNaviRole *::after { color: #7E0100;}
.ec-headerNaviRole .ec-headerNaviRole__nav { margin-right: 16px;}
.front_page .ec-headerRole { padding: 20px;}
.front_page .ec-layoutRole__header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100;}
.front_page .ec-headerNaviRole .ec-headerNav__item *::before { color: #FFF;}
.front_page .ec-headerNav .ec-headerNav__itemLink { color: #FFF;}
.front_page .ec-headerTitle .ec-headerTitle__title { text-align: left; max-width: 50%;}
.front_page #nav { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}
#nav { padding: 4px; text-align: center; background-color: #7E0100;}
#nav ul { max-width: 1090px; margin: 0 auto; padding: 8px 0; text-align: center; list-style: none; font-size: 18px; font-weight: bold;}
#nav li { display: inline-block; padding: 8px 16px;}
#nav li a { color: #FFF;}

.ec-footerRole { padding-top: 0; background: none; border-top: none;}
.ec-footerNavi { margin: 16px 0; padding: 16px; background: #7E0100;}
.ec-footerNavi .ec-footerNavi__link a { text-decoration: none;}
.ec-footerTitle { padding: 0 20px; color: #000;}
.ec-footerRole .ec-footerRole__inner img { width: 240px; margin: 0 auto;}
.ec-footerTitle__copyright { padding: 0 16px 24px; text-align: center; font-size: 12px;}
.ec-footerTitle__copyright span { display: block; margin-top: 8px;  font-size: 11px;}

.ec-sliderRole { margin: 0 calc(50% - 50vw); padding: 0; width: auto; max-width: initial;}

.concept { display: flex; align-items: center; margin-top: 72px;}
.concept .img { width: 40%;}
.concept .img img { max-width: 100%; box-shadow: 40px 32px 0 #F5F5F5;}
.vertical { flex: 1; display: flex; flex-direction: column; justify-content: center; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: justify; text-justify: inter-ideograph; font-feature-settings: normal;}
.vertical p { margin-left: 3.2vw; font-size: 20px; font-weight: bold; line-height: 2; letter-spacing: 0.1em;}
.more { margin: 72px 16px 0; text-align: center;}
.more a { position: relative; display: inline-block; width: 100%; max-width: 400px; padding: 16px; border: 1px solid #7E0100; border-radius: 40px; font-size: 24px; font-weight: bold; color: #7E0100; transition: .2s ease-out;}
.more a::after { content: ''; position: absolute; top: calc(50% - 8px); right: 16px; transform: rotate(90deg); width: 0; height: 0; border-style: solid; border-width: 0 8px 16px 8px; border-color: transparent transparent #7e0000 transparent;}
.more a:hover { background-color: #7E0100; text-decoration: none; color: #FFF;}
.more a:hover::after { border-color: transparent transparent #FFF transparent;}

.ec-topicRole { position: relative; margin-top: 72px; background: none;}
.ec-topicRole::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FDFFE2; z-index: 0;}
.copy { padding: 16px; text-align: center; background: #FDFFE2;}
.copy span { display: inline; text-align: center; background: linear-gradient(transparent 60%, #fefdb3 60%); font-size: 24px; font-weight: bold; letter-spacing: 0.2em; line-height: 1.4; color: #7E0100;}
.ec-role { position: relative;}
.ec-topicRole .ec-topicRole__listItemTitle { font-size: 16px;}

.imgset { display: flex; justify-content: space-between; align-items: center; margin-top: 72px;}
.imgset > * { width: 47%;}
.imgset.reverse { flex-direction: row-reverse;}
.imgset .img img { width: 100%; border-radius: 8px;}
.imgset h2 a { display: flex; align-items: center; margin-bottom: 16px; font-size: 24px; line-height: 1.4; font-weight: bold; color: #7E0100;}
.imgset h2 span { flex: 1; padding-left: 16px;}
.imgset p { font-size: 16px; line-height: 2;}

.ec-pageHeader p { margin: 24px 0; text-align: center; font-size: 18px; font-weight: bold; letter-spacing: 0.2em;}
.ec-pageHeader h1 { display: flex; justify-content: center; align-items: center; background: #FFF; border-color: #7E0100; color: #7E0100;}
.ec-pageHeader h1::before, .ec-pageHeader h1::after { content: ''; display: inline-block; width: 16px; height: 16px; margin: 0 8px; border-radius: 50%; background: #7E0100;}

.column { display: flex;}
.column + .column { margin-top: 48px;}
.column .left { width: 30%;}
.column .left img { margin-bottom: 16px;}
.column .right { flex: 1; margin-left: 40px;}
.column h2 { margin-top: 0;}
.column h3 { font-size: 16px; font-weight: bold;}
.column h3:first-of-type { margin-top: 0;}
.title { margin: 24px 0; padding: 8px; text-align: center; background: #7E0100; font-size: 20px; font-weight: bold; color: #FFF;}
.st { padding-left: 8px; border-left: 20px solid #7E0100; font-size: 18px; font-weight: bold;}
.st span { font-size: 14px;}
.shipping { width: 100%; border-collapse: collapse;}
.shipping th, .shipping td { padding: 4px 8px; border: 1px solid #CCC;}
.shipping th { text-align: center; white-space: nowrap;}
.shipping td:last-of-type { text-align: right; white-space: nowrap;}
.red { color: #F04E37;}
.catch { margin-bottom: 24px; text-align: center; font-size: 18px; font-weight: bold; letter-spacing: 0.2em; line-height: 2;}
.price { width: 90%; margin: 16px auto; border-collapse: collapse;}
.price th, .price td { padding: 8px; border-bottom: 1px solid #CCC;}
.price th, .price td strong { font-size: 20px;}
.price td { text-align: right; white-space: nowrap; font-weight: bold; color: #7E0100;}



@media only screen and (max-width: 767px){
.sp { display: block;}
.pc { display: none;}
.header_title { padding: 4px 8px 4px 48px; font-size: 10px;}
.front_page .fa-shopping-cart::before { color: #FFF;}
.ec-headerNaviRole { padding-top: 0;}
.ec-footerNavi { padding: 0;}
.ec-footerNavi .ec-footerNavi__link a { border-bottom-color: #FFF;}

#nav ul {padding: 4px 0; font-size: 16px;}

.concept { display: block; margin-top: 48px;}
.concept .img { width: 80%; margin: 0 auto 40px; text-align: center;}
.vertical { width: 100%;}
.vertical p { margin: 0 1.6vw; font-size: 14px; font-weight: bold; line-height: 2; letter-spacing: 0.1em;}
.more { margin-top: 24px;}
.more a { font-size: 20px;}

.ec-topicRole { margin-top: 48px;}
.copy span { font-size: 20px; letter-spacing: 0.1em;}

.imgset { display: block; margin-top: 48px;}
.imgset > * { width: auto;}
.imgset .img img { border-radius: 0;}
.imgset .text { padding: 0 20px;}
.imgset h2 { font-size: 20px;}

.ec-pageHeader p {  font-size: 16px;}
.ec-pageHeader h1 { margin-bottom: 24px; font-size: 20px;}

.column { display: block}
.column + .column { margin-top: 24px;}
.column .left { width: auto;}
.column .right { margin-left: 0;}
.shipping { font-size: 12px;}
.price th, .price td strong { font-size: 18px;}
}