@charset "UTF-8"; /* CSS Document */ /*////////////// common //////////////*/ html{scroll-behavior: smooth;} body {font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;} .fz13 {font-size: 13px !important; line-height: 1.5;} .fz14 {font-size: 14px !important; line-height: 1.5;} .fz15 {font-size: 15px !important; line-height: 1.6;} .fz16 {font-size: 16px !important; line-height: 1.6;} .fz17 {font-size: 17px !important; line-height: 1.6;} .fz18 {font-size: 18px !important; line-height: 1.6;} .fz20 {font-size: 20px !important; line-height: 1.5;} .fz22 {font-size: 22px !important; line-height: 1.5;} .fz23 {font-size: 23px !important; line-height: 2.0;} .fz24 {font-size: 24px !important; line-height: 1.5;} .fz28 {font-size: 28px !important; line-height: 1.5;} .fz30 {font-size: 30px !important; line-height: 1.5;} .fz32 {font-size: 32px !important; line-height: 1.5;} .fz35 {font-size: 35px !important; line-height: 1.5;} .ls01em {letter-spacing: 0.1em !important;} .ls02em {letter-spacing: 0.2em !important;} .ls03em {letter-spacing: 0.3em !important;} .wd30 {width: 30% !important;} .wd40 {width: 40% !important;} .wd45 {width: 45% !important;} .wd50 {width: 50% !important;} .wd60 {width: 60% !important;} .wd90 {width: 90% !important; margin: auto;} .wd100 {width: 100% !important; margin: auto;} .wd800 {width: 800px !important; margin: auto;} .wd850 {width: 850px !important; margin: auto;} .wd1000 {width: 1000px !important; margin: auto;} .wd1200 {width: 1200px !important; margin: auto;} .wd1500 {width: 1500px !important; margin: auto;} .mgt10 {margin-top: 10px !important;} .mgt20 {margin-top: 20px !important;} .mgt30 {margin-top: 30px !important;} .mgt40 {margin-top: 40px !important;} .mgt50 {margin-top: 50px !important;} .mgt80 {margin-top: 80px !important;} .mgt100 {margin-top: 100px !important;} .mgt150 {margin-top: 150px !important;} .mgb0 {margin-bottom: 0 !important;} .mgb20 {margin-bottom: 20px !important;} .mgb30 {margin-bottom: 30px !important;} .mgb40 {margin-bottom: 40px !important;} .mgb50 {margin-bottom: 50px !important;} .mgb60 {margin-bottom: 60px !important;} .mgb80 {margin-bottom: 80px !important;} .mgb100 {margin-bottom: 100px !important;} .mgb150 {margin-bottom: 150px !important;} .mgb200 {margin-bottom: 200px !important;} .mgb250 {margin-bottom: 250px !important;} a:hover {filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1;} .cb {clear: both;} .fc_white {color: #ffffff !important;} .fc_black {color: #000000 !important;} .fc_red {color: #aa0000 !important;} .fc_orange {color: #ff9600 !important;} .link_underline {text-decoration: underline !important;} .fadein01 {opacity: 0.0; transform: translate(0, 100px); transition: all 500ms;} .fadein01.scrollin {opacity: 1; transform: translate(0, 0);} .fadein02 {opacity: 0.0; transform: translate(0, 100px); transition: all 1000ms;} .fadein02.scrollin {opacity: 1; transform: translate(0, 0);} .pcbr {display: block;}/* PC改行*/ .spbr {display: none;}/* スマホ改行解除*/ @media screen and (max-width: 1000px) { .pcbr {display: none;}/* PC改行解除*/ .spbr {display: block;}/* スマホ改行*/ } /*////////////// font //////////////*/ @font-face {font-family: Montserrat-Medium; src: url('/user_data/packages/raku2pc/fonts/Montserrat-Medium.ttf') format("truetype"); font-weight: 300; font-style: normal;} @font-face {font-family: Montserrat-Regular; src: url('/user_data/packages/raku2pc/fonts/Montserrat-Regular.ttf') format("truetype"); font-weight: 300; font-style: normal;} .marcellus-regular {font-family: "Marcellus", serif; font-weight: 400; font-style: normal;} /*/////////////////// Common ///////////////////*/ body {min-width: 100%;} #container {max-width: 95% !important; min-width: 980px; width: 100% !important; padding: 0;} .LC_Page_Index #container {max-width: 100% !important;} #main_column.colnum1, #main_column.colnum1 #mypagecolumn {width: 100%; margin: 0 auto; color: #565656;} #main_column.colnum2 {width: 85%;} #main_column h2 {padding: 0; margin: 10px auto 50px; border: none; font-size: 26px; font-family:"Marcellus","游明朝","Yu Mincho","YuMincho","Hiragino Mincho Pro",serif; font-weight: 500; color: #565656; line-height: 1.6; letter-spacing: 0.05em;} #main_column h2>span {display: block; font-size: 50%; letter-spacing: 0.1em;} #main_column h2>span::before {content: "ー"; margin-right: 3px;} #main_column h2>span::after {content: "ー"; margin-left: 3px;} .section-ttl {display: block; margin: 0 auto 30px; padding: 0; font-size: 28px; font-family:"Marcellus"; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.15em; line-height: 1.7; text-decoration: none;} .section-ttl>span {display: block; margin: 0 auto; padding: 0; font-size: 45%;} .moreArea {display: block !important; width: 250px; margin: 20px auto 0;} .more-btn, .more-btn:link, .more-btn:visited {display: block; width: 100%; margin: 0 auto 0; padding: 15px 0; font-size: 15px; font-weight: 400; color: #ffffff; text-align: center; letter-spacing: 0.05em; line-height: 1.0; text-decoration: none; cursor:pointer; position: relative; border: 1px solid #565656; background-color: #565656;} .more-btn:hover {color: #ffffff !important;} .more-btn::after {content: ""; display: block; position: absolute; top: calc(50% - 5px); right: 40px; width: 20px; height: 5px; border: none; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; transform: skew(45deg); transition: .3s;} .more-btn:hover::after {right: 30px; width: 30px; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;} .raku2_breadcrumbs {color: #565656; font-size: 11px; font-weight: 400; letter-spacing: 0.05em; line-height: 1.0;} .aten_login, .aten_amazon {width: 100%; margin: 0 auto 20px; padding: 0;} .aten_login>p, .aten_amazon>p, .aten_line>p {font-size: 12px; text-align: left;} div#undercolumn_login .login_area {width: 90%; margin: 0 auto 50px; border: 1px solid #cfcfcf; padding: 20px 5%;} #undercolumn_login .login_area h3 {text-align: center;} .login_area>.inputtext {text-align: center;} #complete_area {text-align: center; font-weight: 400;} .contactWrap {width: 700px; margin: 50px auto; padding: 0; text-align: center;} .contactWrap>h4 {font-size: 17px; font-weight: 500; color: #565656; line-height: 1.0; letter-spacing: 0.02em; margin: 0 auto 20px; padding: 0;} .contactWrap>p {color: #565656;} .contactWrap>.telephone, .contactWrap>.telephone:link, .contactWrap>.telephone:visited {display: block; font-size: 28px; font-weight: 600; text-decoration: none; color: #ed8a00;} .contactWrap>.telephone>span {font-size: 80%; color: #565656; font-weight: 400;} .contactWrap>.b_hours {font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; margin: 0 auto 10px; padding: 0; text-align: center;} .contactWrap>.linkbtn_contact, .contactWrap>.linkbtn_contact:link, .contactWrap>.linkbtn_contact:visited {display: block; width: 400px; margin: 10px auto 10px; padding: 15px 0; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; text-align: center; text-decoration: none; color: #ffffff; border: 1px solid #565656; background-color: #565656;} .contactWrap>.linkbtn_contact:hover {color: #565656; background-color: #ffffff;} div#undercolumn_shopping #periodArea {background-color: #f7f6f4;} .raku2_cart_slidein .raku2_quantity {width: 21px; height: 21px; line-height: 1.0;} div#undercolumn_shopping #calender_area table {width: 95%;} div#undercolumn_shopping #calender_area table td {padding: 5px 3px;} .raku2_product_list_new .list_status_icon {margin: 0 0 0.3em;} .raku2_product_list_new .list_status_icon .raku2_status_text {font-size: 11px; border: solid 1px #b59b66; color: #ffffff; background-color: #b59b66;} #gotop {display: block !important; text-align: center;} #gotop>a, #gotop>a:link, #gotop>a:visited {z-index: 9999; position: fixed; bottom: 20px; right: 10px; width: 70px; height: 70px; color: #ffffff; background-color: #565656; font-size: 15px; line-height: 1.2em; padding-top: 12px; box-sizing: border-box; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; text-decoration: none;} #gotop>a:before {font-size: 1rem; font-size: 16px; display: block; font-family: 'FontAwesome'; content: "\f106";} @media only screen and (max-width: 1540px) { #main_column.colnum2 {width: 80%;} } @media only screen and (max-width: 1400px) { #main_column.colnum2 {width: 1000px;} } @media only screen and (max-width: 1300px) { #main_column.colnum2 {width: 900px;} } @media only screen and (max-width: 1200px) { #main_column.colnum2 {width: 800px;} } @media only screen and (max-width: 1100px) { #main_column.colnum2 {width: 700px;} } @media only screen and (max-width: 1000px) { .LC_Page_Index #container {min-width: 100%;} #container {max-width: 95% !important; min-width: 95%; width: 100% !important;} #main_column.colnum1, #main_column.colnum1 #mypagecolumn {width: 100%;} .section-ttl {font-size: 22px; line-height: 1.5;} .moreArea {display: block !important; width: 60%;} .more-btn, .more-btn:link, .more-btn:visited {font-size: 14px;} .contactWrap {width: 100%;} } /*/////////////////// Header ///////////////////*/ #header_wrap {margin: 0 auto; padding: 30px 0 20px; min-height: auto; background: linear-gradient(90deg, rgb(255, 255, 255), rgb(194, 236, 252));} #header_wrap #header {max-width: 100%; width: 100%;} #header_wrap #header #logo_area {margin: 0 auto; /*flex-grow: 1;*/ position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 1;} #header_wrap #header #logo_area img {width: 130px; max-height: 100px;} #header_wrap #header #headerInternal {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 0 auto; padding: 0 2% 40px; height: 150px; position: relative;} #header_login_area {flex-grow: 1; height: 60px; position: relative;} #header_login_area .user_login ul {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; list-style: none;} #header_login_area .user_login ul li {display: grid; width: 40px; height: 40px; margin-left: 15px; background-color: #ffffff; opacity: 1.0; border-radius: 50%; border: 1px solid #ffffff; text-align: center; align-items: center;} #header_login_area .user_login ul li:hover {background-color: #a9d2e8; border: 1px solid #a9d2e8;} #header_login_area .user_login ul li.headersearch {color: #a9d2e8; font-size: 20px; cursor: pointer;} #header_login_area .user_login ul li.headersearch:hover {color: #ffffff;} #header_login_area .user_login ul li.headericon>a, #header_login_area .user_login ul li.headericon>a:link, #header_login_area .user_login ul li.headericon>a:visited {display: block; text-decoration: none; color: #a9d2e8; font-size: 20px; line-height: 1.0;} #header_login_area .user_login ul li.headericon>a:hover {color: #ffffff;} #header_login_area .user_login ul li.headericon>a>span {display: block; font-size: 10px;} #header_login_area>.header_search_area {position: absolute; right: 180px; top: 10px;} #header_login_area>.header_search_area>form>i {font-size: 15px; color: #565656;} #header_login_area>.header_search_area>form>input#search {margin: 0 0 0 10px; padding: 5px 0 5px; border: none; border-bottom: solid 1px #565656; background: none; /*float: right;*/} #header_nav_area {width: 1000px; margin: 0 auto; text-align: center;} #header_nav_area>ul>li {display: inline-block;} .header__inline-menu {justify-self: center; grid-area: navigation; margin: 0 auto 0;} .header__inline-menu>.list-menu--inline {list-style: none; padding: 0; margin: 0; justify-content: center; display: inline-flex; flex-wrap: wrap; column-gap: 2.5rem;} .header__inline-menu>.list-menu--inline>li>a, .header__inline-menu>.list-menu--inline>li>a:link, .header__inline-menu>.list-menu--inline>li>a:visited {font-family:"Marcellus"; font-weight: 400; font-size: 15px; color: #565656; letter-spacing: 0.05em; line-height: 1.5; text-transform:capitalize; text-decoration: none;} .header__inline-menu>.list-menu--inline>li>a>span {display: block; font-size: 75%; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;} .header__inline-menu>.list-menu--inline>li:hover .megaMenu {opacity: 1; visibility: visible;} .megaMenu {width: 100%; background-color: #a9d2e8; top: 210px; left: 0; opacity: 0; position: absolute; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1000;} .megaMenu>.megaMenu-list {width: 100%; margin: 0 auto; padding: 18px 0 18px; list-style: none; display: block; /*display: inline-flex;*/ flex-wrap: wrap; column-gap: 2rem; text-align: center;} .megaMenu>.megaMenu-list>li {display: inline-block; margin: 0 20px;} .megaMenu>.megaMenu-list>li>a, .megaMenu>.megaMenu-list>li>a:link, .megaMenu>.category-list>li>a:visited {display: block; color: #ffffff; font-size: 13px; text-decoration: none;} .megaMenu>.megaMenu-list>li>a>img {display: block; width: 90px; margin: 0 auto 5px; border-radius: 10px;} @media only screen and (max-width: 1000px) { #header_wrap #header #headerInternal, #header_nav_area {display: none;} } /*//////// SPHeader ////////*/ #header-contents {width: 100%; margin: 0 auto 0; padding: 0; position: relative;} #header-contents>.header-sp {display: none;} @media only screen and (max-width: 1000px) { #header_wrap {margin: 0 auto; padding: 0;} #header-contents>.header-sp {width: 100%; background: #ffffff; display: flex; justify-content: space-between; margin: 0 auto; padding: 10px 2% 20px; position: fixed; top: 0; transition: .5s; z-index: 9999;} #header-contents>.header-sp>.header__heading {justify-self: center; margin: 0 auto; text-align: center; z-index: 100; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);} #header-contents>.header-sp>.header__heading>a>.splogo {width: 70px; margin: 0 auto 0;} #header-contents>.header-sp>.header__left {display: flex; grid-area: left-icon; align-items: center;} #header-contents>.header-sp>.header__left>a, #header-contents>.header-sp>.header__left>a:link, #header-contents>.header-sp>.header__left>a:visited {color: #565656; text-decoration: none;} #header-contents>.header-sp>.header__left>a>i {font-size: 17px; padding: 0 0.5rem;} #header-contents>.header-sp>.header__right {display: flex; grid-area: icons; justify-self: end; align-items: center;} #header-contents>.header-sp>.header__right>a, #header-contents>.header-sp>.header__right>a:link, #header-contents>.header-sp>.header__right>a:visited {display: inline-block; margin: 0 5px; color: #565656; text-decoration: none;} #header-contents>.header-sp>.header__right>a:nth-of-type(2) {margin-right: 0;} #header-contents>.header-sp>.header__right>a>i {color: #565656; font-size: 22px; text-decoration: none;} #header-contents>.header-sp>.header__right>a>img, #header-contents>.header-sp>.header__right>.user_search_btn>img {display: inline-block; width: 25px; margin: 0 3px;} #header-contents>.header-sp .spmenu {list-style: none; position: absolute; width: 100%; height: auto; top: 0; left: 0; margin-top: 50px; padding: 20px 0 20px; clear: both; transform: scale(1, 0); transform-origin: top; background-color: #ffffff; text-align: left;} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu {transform: scale(1, 1); transform-origin: top;} #header-contents>.header-sp .spmenu>li {display: block; padding: 8px 0; margin: 0 auto; opacity: 0; transition: 0.5s; border-bottom: 1px solid #cfcfcf;} #header-contents>.header-sp .spmenu>li>a, #header-contents>.header-sp .spmenu>li>a:link, #header-contents>.header-sp .spmenu>li>a:visited {display: block; margin-left: 5%; font-size: 12px; font-family:"Marcellus"; font-weight: 400; text-decoration: none; letter-spacing: .2em; text-transform: capitalize; color: #565656; opacity: 0; transition: 0.5s;} #header-contents>.header-sp .spmenu>li>a>span {display: block; font-size: 70%; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu a, #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu li {opacity: 1;} #header-contents>.header-sp .spmenu-btn {display: none;} #header-contents>.header-sp .spmenu-icon {display: inline-block; position: relative; cursor: pointer; padding: 24px 14px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} #header-contents>.header-sp .spnavicon {background: #565656; display: block; height: 1px; width: 15px; position: relative;} #header-contents>.header-sp .spnavicon:before, #header-contents>.header-sp .spnavicon:after {content: ""; display: block; height: 100%; width: 100%; position: absolute; background: #565656; z-index: 9999;} #header-contents>.header-sp .spnavicon:before {width: 20px; top: 8px;} #header-contents>.header-sp .spnavicon:after {width: 20px; bottom: 8px;} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu-icon .spnavicon:before {transform: rotate(-45deg);} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu-icon .spnavicon:after {transform: rotate(45deg);} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu-icon:not(.steps) .spnavicon:before {top: 0;} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu-icon:not(.steps) .spnavicon:after {bottom: 0;} #header-contents>.header-sp .spmenu-btn:checked ~ .spmenu-icon .spnavicon {background: rgba(0, 0, 0, 0);} #header-contents>.header-sp .spnavtext-container {width: 100%; height: 52px; position: absolute; box-sizing: border-box; display: flex; justify-content: center; align-items: center;} #header-contents>.header-sp .spnavtext {position: absolute; text-transform: uppercase; color: #ddd; letter-spacing: 4px; font-size: 20px;} #header_wrap #header .search_box_area {top: 35px; position: relative;} #header-contents>.header-sp.positionset {top: 0;} } /*//////// ScrollHeader ////////*/ #fixed-Menu {/*display: flex;*/ width: 100%; height: 0; padding: 0; position: fixed; top: 0; left: 0; z-index: 20; align-items: baseline; justify-content: space-between; overflow: hidden; transition: .4s;} #fixed-Menu #headerInternal-fixed {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 0 auto; padding: 0 2%; position: relative;} #fixed-Menu #headerInternal-fixed #logo_area-fixed {flex-grow: 1; margin: 0 10px 0 0;} #fixed-Menu #headerInternal-fixed #logo_area-fixed img {width: 60px;} #fixed-Menu #headerInternal-fixed #header_nav_area-fixed {flex-grow: 1; text-align: left;} #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu {display: block; justify-self: center; grid-area: navigation;} #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu>.list-menu {list-style: none; padding: 0; margin: 0; justify-content: center; text-align: center; display: inline-flex; flex-wrap: wrap; column-gap: 1.5rem;} #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu>.list-menu>li>a, #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu>.list-menu>li>a:link, #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu>.list-menu>li>a:visited {font-family:"Marcellus"; font-weight: 400; font-size: 15px; color: #565656; letter-spacing: 0.05em; line-height: 1.5; text-transform:capitalize; text-decoration: none;} #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu>.list-menu>li>a>span {display: block; font-size: 65%; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;} #fixed-Menu.positionset {height: auto; padding: 17px 0 15px; background: #ffffff;} #fixed-Menu .user_login ul {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; list-style: none;} #fixed-Menu .user_login ul li {display: grid; width: 40px; height: 40px; margin-left: 15px; color: #ffffff; background-color: #a9d2e8; opacity: 1.0; border-radius: 50%; border: 1px solid #a9d2e8; text-align: center; align-items: center;} #fixed-Menu .user_login ul li.headericon>a>i {color: #ffffff;} #fixed-Menu .user_login ul li:hover {background-color: #689bb6; border: 1px solid #689bb6;} #fixed-Menu .user_login ul li.headericon>a, #fixed-Menu .user_login ul li.headericon>a:link, #fixed-Menu .user_login ul li.headericon>a:visited {display: block; text-decoration: none; color: #a9d2e8; font-size: 20px; line-height: 1.0;} #fixed-Menu .user_login ul li.headericon>a>span {display: block; font-size: 10px;} @media only screen and (max-width: 1400px) { #fixed-Menu #headerInternal-fixed #header_nav_area-fixed>.header__inline-menu>.list-menu {column-gap: 1.0rem;} } @media only screen and (max-width: 1000px) { #fixed-Menu.positionset {display: none;} } /*//////// ContentsTOP Slider ////////*/ .topslider-wrap {width: 100%; display: flex; margin: 0 auto 100px; padding: 0; align-items: center; justify-content: center;} .topslider-wrap>.inner {width: 100%; max-width: 100%;} .top-slide>a>img {width: 100%; align-items: center;justify-content: center;} /* arrow */ .topslider-wrap>.inner>.top-slider>.slick-arrow {z-index: 2; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; opacity: .8;} .topslider-wrap>.inner>.top-slider>.slick-arrow::before {content: '';} .topslider-wrap>.inner>.top-slider>.slick-prev {left: 30px; transform: rotate(-135deg);} .topslider-wrap>.inner>.top-slider>.slick-next {right: 30px; transform: rotate(45deg);} /* dots */ .topslider-wrap>.inner>.top-slider>.slick-dots {bottom: -25px;} .topslider-wrap>.inner>.top-slider>.slick-dots li, .topslider-wrap>.inner>.top-slider>.slick-dots li button, .topslider-wrap>.inner>.top-slider>.slick-dots li button::before {width: 8px; height: 8px;} .topslider-wrap>.inner>.top-slider>.slick-dots li {margin: 0 10px;} .topslider-wrap>.inner>.top-slider>.slick-dots li button {background-color: #000000; opacity: .8; border-radius: 100%;} .topslider-wrap>.inner>.top-slider>.slick-dots li.slick-active button {opacity: .4;} .topslider-wrap>.inner>.top-slider>.slick-dots li button::before {content: '';} @media only screen and (max-width: 1000px) { .topslider-wrap {margin: 80px auto 100px;} } /*/////////////////// Category ///////////////////*/ #categoryWrap {width: 1100px; margin: 0 auto 100px; padding: 0; background: none; text-align: center;} .tab-wrap {display: flex; flex-wrap: wrap;　overflow: hidden;　padding: 0 0 20px;} .tab-label {display: flex; width: 200px; margin: 0 auto 0; padding: 15px 0 5px; color: #565656; cursor: pointer; /*flex: 1;*/ order: -1; position: relative; text-align: center; transition: cubic-bezier(0.4, 0, 0.2, 1) .2s; user-select: none; /*white-space: nowrap;*/ -webkit-tap-highlight-color: transparent; align-items: center; border: 1px solid #ddd6d6; border-bottom: none; border-radius: 20px 20px 0 0;} .tab-label>div {width: 130px; height: 130px; margin: 0 auto 20px; overflow: hidden; border-radius: 50%;} .tab-label>div>img {width: 100%; margin: 0 auto; border-radius: 50%;} .tab-label>div>img:hover {transform: scale(1.08); transition-duration: 0.5s;} .tab-label>.productname {margin: 0 auto; padding: 0 0 5px; font-size: 17px; font-family:"Marcellus"; font-weight: 400; letter-spacing: 0.05em; line-height: 1.4;} .tab-label>.productname>span {display: block; margin: 0 auto; padding: 0; font-size: 60%;} .tab-label>.productname_1row {margin: 0 auto; padding: 0 0 5px; font-size: 15px; font-family:"Marcellus"; font-weight: 400; letter-spacing: 0.05em; line-height: 1.0;} .tab-label>.productlead {margin: 0 auto; padding: 0; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.6; color: #565656;} .tab-switch:checked + .tab-label {color: #ffffff; background-color: #689bb6; /*border-bottom: 2px solid #689bb6;*/} /*.tab-label::after {bottom: 0; content: ''; display: block; height: 3px; left: 0; opacity: 0; pointer-events: none; position: absolute; transform: translateX(100%); transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms; width: 100%; z-index: 1;}*/ .tab-content {height:0; opacity:0; padding: 0; pointer-events:none; transform: translateX(-10%); transition: transform .3s 80ms, opacity .3s 80ms; width: 100%;} .tab-switch:checked ~ .tab-content {transform: translateX(5%);} .tab-switch:checked + .tab-label + .tab-content {height: auto; margin: -20px 0 0; padding: 20px 0 40px; opacity: 1; order: 1; pointer-events:auto; transform: translateX(0); border-top: 1px solid #ddd6d6;} .tab-wrap::after {content: ''; height: 20px; order: -1; width: 100%;} .tab-switch {display: none;} .tab-content>.category-itemList {width: 100%; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;} .tab-content>.category-itemList>.category-item {display: inline-block; width: 23%; width : -webkit-calc(100% / 4) ; width : calc(100% / 4 - 30px); margin: 0 auto 30px; padding: 0; list-style: none;} .tab-content>.category-itemList>.category-item>a, .tab-content>.category-itemList>.category-item>a:link, .tab-content>.category-itemList>.category-item>a:visited {margin: 0 auto; padding: 0; font-size: 14px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.4; color: #565656; text-decoration: none;} .tab-content>.category-itemList>.category-item>a>p {margin: 10px auto; padding: 0; color: #ac0b52; font-size: 16px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/ font-weight: 400; letter-spacing: 0.01em; line-height: 1.0;} .tab-content>.category-itemList>.category-item>a>p>span {font-size: 70%;} .tab-content>.category-itemList>.category-item>a>img {width: 100%; margin: 0 auto 15px;} /* ============================== /* 幅と高さの設定 /* ============================== */ .tab-container, .tab-content {max-width: calc(100vw - 10px*2); width: 100%;} .tab-wrap {width: 90%; margin: 0 auto;} /* ============================== /* 追加(上書き有り)CSS /* ============================== */ * {box-sizing: border-box;} .tab-container {overflow: hidden; overflow-x: auto; position: relative; padding: 0 0 50px;} .tab-wrap {overflow: visible;} .tab-content {left:0; position: -webkit-sticky; position: sticky;} .tab-wrap::before {content: ''; height: 0; order: 1; width: 100%;} @media only screen and (max-width: 1200px) { #categoryWrap {width: 100%; margin: 0 auto 80px;} .tab-wrap {width: 85%;} .tab-label {display: flex; width: 18%;} .tab-label>.productname {font-size: 15px;} } @media only screen and (max-width: 1100px) { .tab-switch:checked ~ .tab-content {transform: translateX(5%);} .tab-wrap {width: 92%;} } @media only screen and (max-width: 1000px) { .tab-switch:checked ~ .tab-content {transform: translateX(0);} .tab-container, .tab-content {max-width: calc(100vw - 10px*0); width: 100%;} .tab-wrap {width: 800px;} .tab-label>.productname {font-size: 14px;} .tab-content>.category-itemList {width: 92%;} .tab-content>.category-itemList>.category-item {display: inline-block; width: 40%; width : -webkit-calc(100% / 2) ; width : calc(100% / 2 - 20px); margin: 0 0 30px;} .tab-content>.category-itemList>.category-item>a>p {font-size: 14px;} .tab-switch:checked + .tab-label::after {top: 245px;} } /*/////////////////// EventSlider ///////////////////*/ #promotion {width: 100%; margin: 0 auto 120px; padding: 0;} .event-wrap {width: 95%; display: block; margin: 0 auto; padding: 0; align-items: center; justify-content: center;} .event-wrap>.inner {width: 100%; max-width: 100%;} .event-slide>a>img {width: 90%; margin: 0 auto; align-items: center; justify-content: center;} /* arrow */ .event-wrap>.inner>.event-slider>.slick-arrow {z-index: 2; top: 50%; margin-top: -10px; width: 10px; height: 10px; border-top: 2px solid #565656; border-right: 2px solid #565656; opacity: .8;} .event-wrap>.inner>.event-slider>.slick-arrow::before {content: '';} .event-wrap>.inner>.event-slider>.slick-prev {left: 0; transform: rotate(-135deg);} .event-wrap>.inner>.event-slider>.slick-next {right: 0; transform: rotate(45deg);} /* dots */ .event-wrap>.inner>.event-slider>.slick-dots {bottom: -25px;} .event-wrap>.inner>.event-slider>.slick-dots li, .event-wrap>.inner>.event-slider>.slick-dots li button, .event-wrap>.inner>.event-slider>.slick-dots li button::before{width: 12px; height: 12px;} .event-wrap>.inner>.event-slider>.slick-dots li {margin: 0 7px;} .event-wrap>.inner>.event-slider>.slick-dots li button {background-color: #fff; opacity: .8; border-radius: 100%;} .event-wrap>.inner>.event-slider>.slick-dots li.slick-active button {opacity: .4;} .event-wrap>.inner>.event-slider>.slick-dots li button::before {content: '';} @media only screen and (max-width: 1000px) { #promotion {margin: 0 auto 80px;} } /*/////////////////// about ///////////////////*/ #aboutTop {width: 100%; margin: 0 auto; padding: 220px 0 100px; text-align: center; background-image: url("/user_data/packages/raku2pc/img/background/bg_water.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -9999;} #aboutTop>.aboutWrap {width: 1100px; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;} #aboutTop>.aboutWrap>.inner {width: 50%; margin: 0 0 0 auto;} #aboutTop>.aboutWrap>.inner>.head {margin: 0 auto 20px;} #aboutTop>.aboutWrap>.inner>.head>p {margin: 0 auto 10px; padding: 0 0 0; font-size: 15px; color: #333333; letter-spacing: 0.05em; line-height: 1.0; text-align: left;} #aboutTop>.aboutWrap>.inner>.head>.ttl {margin: 0 auto; padding: 0; font-size: 36px; color: #333333; font-family:"Marcellus"; font-weight: 400; letter-spacing: 0.05em; line-height: 1.4; text-align: left;} #aboutTop>.aboutWrap>.inner>.head>.ttl>span {display: block; margin: 0 auto; padding: 0; font-size: 30%; letter-spacing: 0.1em;} #aboutTop>.aboutWrap>.inner>.lead {margin: 0 auto 30px;} #aboutTop>.aboutWrap>.inner>.lead>p {margin: 0 auto; padding: 0 0 0; font-size: 14px; color: #333333; letter-spacing: 0.02em; line-height: 1.8; text-align: justify;} #aboutTop>.aboutWrap>.inner>.more, #aboutTop>.aboutWrap>.inner>.more:link, #aboutTop>.aboutWrap>.inner>.more:visited {display: block; width: 380px; padding: 18px 0; font-size: 14px; text-align: center; text-decoration: none; line-height: 1.0; outline: none; color: #333333; background-color: #c2e9f2; position: relative; border: 1px solid #333333; transition: color 0.5s ease;} #aboutTop>.aboutWrap>.inner>.more:hover {color: #ffffff; border: 1px solid #689bb6;} #aboutTop>.aboutWrap>.inner>.more:hover::before {transform: scaleX(1); transform-origin: left;} #aboutTop>.aboutWrap>.inner>.more::before {position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: #689bb6; transform: scaleX(0); transform-origin: right; transition: all 0.5s ease; transition-property: transform;} #aboutTop>.aboutWrap>.inner>.more>.text {position: relative;} @media only screen and (max-width: 1100px) { #aboutTop {width: 100%; margin: 0 auto; padding: 150px 0 80px; background-image: url("/user_data/packages/raku2pc/img/background/bgsp_water.jpg"); background-position: center top;} #aboutTop>.aboutWrap {width: 100%;} #aboutTop>.aboutWrap>.inner {width: 92%; margin: 0 auto 0;} #aboutTop>.aboutWrap>.inner>.head>p {font-size: 12px;} #aboutTop>.aboutWrap>.inner>.head>.ttl {font-size: 30px;} #aboutTop>.aboutWrap>.inner>.lead>p {font-size: 14px; letter-spacing: 0.01em;} #aboutTop>.aboutWrap>.inner>.more, #aboutTop>.aboutWrap>.inner>.more:link, #aboutTop>.aboutWrap>.inner>.more:visited {display: block; width: 80%; margin: 0 auto;} } /*/////////////////// Infomation ///////////////////*/ #infomation {width: 100%; margin: 0 auto; padding: 80px 0; background-color: #c2e9f2; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff;} #infomation>.infomationWrap {width: 1100px; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center;} #infomation>.infomationWrap>div {display: inline-block; width: 30%; width : -webkit-calc(100% / 3) ; width : calc(100% / 3 - 30px); margin: 0 auto; padding: 0; vertical-align: top;} #infomation>.infomationWrap>div>a>img {width: 80px; margin: 0 auto 10px;} #infomation>.infomationWrap>div>a>.ttl {margin: 0 auto 15px; padding: 0; color: #a7d7e1; font-size: 16px; font-weight: 600; text-align: center; letter-spacing: 0.02em; line-height: 1.0; text-decoration: none;} #infomation>.infomationWrap>div>a>p {margin: 0 auto; padding: 0; color: #565656; font-size: 13px; font-weight: 400; text-align: center; letter-spacing: 0.01em; line-height: 1.5; text-decoration: none;} #infomation>.infomationWrap>div>a, #infomation>.infomationWrap>div>a:link, #infomation>.infomationWrap>div>a:visited {display: block; margin: 0 auto 0; padding: 25px 0; text-decoration: none; background-color: #ffffff;} #infomation>.infomationWrap>div>a:hover {background-color: #def1f5;} @media only screen and (max-width: 1000px) { #infomation {width: 100%; padding: 60px 0;} #infomation>.infomationWrap {width: 90%;} #infomation>.infomationWrap>div {display: block; width: 100%; margin: 0 auto;} #infomation>.infomationWrap>div>a>img {width: 60px; margin: 0 auto 10px;} #infomation>.infomationWrap>div>a>.ttl {font-size: 15px;} #infomation>.infomationWrap>div>a>p {font-size: 12px;} #infomation>.infomationWrap>div>a, #infomation>.infomationWrap>div>a:link, #infomation>.infomationWrap>div>a:visited {display: block; margin: 0 auto 20px; padding: 18px 0;} } /*/////////////////// Footer ///////////////////*/ .base_design {width: 100%; margin: 0 auto; padding: 80px 0 0; background-color: #c2e9f2;} .base_design #footer_company {width: 100%; margin: 0 auto; padding: 0; background-color: #c2e9f2; color: #565656;} .base_design #copyright {width: 100%; margin: 0 auto; padding: 10px 0; background-color: #ffffff; color: #565656; font-size: 11px; line-height: 1.5; text-align: center;} .base_design #footer_company #footer_company_inner {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; max-width: 1100px; margin: 0 auto 50px; width: 90%;} .base_design #footer_company #footer_company_inner .company_link_group {width: 1000px; display: inline-block; vertical-align: top; text-align: left; margin: 0 auto;} .base_design #footer_company #footer_company_inner .company_link_group ul {width: 22%; display: inline-block; vertical-align: top; list-style: none; margin-right: 0;} .base_design #footer_company #footer_company_inner .company_link_group ul:last-child {margin-right: 0;} .base_design #footer_company #footer_company_inner .company_link_group ul li {margin: 0 auto 20px;} .base_design #footer_company #footer_company_inner .company_link_group ul li.head {margin: 0 auto 25px; display: block; color: #565656; font-family:"Marcellus"; font-size: 16px; font-weight: 500; text-align: left; letter-spacing: 0.1em; line-height: 1.0;} .base_design #footer_company #footer_company_inner .company_link_group ul li a, .base_design #footer_company #footer_company_inner .company_link_group ul li a:link, .base_design #footer_company #footer_company_inner .company_link_group ul li a:visited {display: block; color: #565656; font-size: 12px; font-weight: 400; text-align: left; letter-spacing: 0.01em; line-height: 1.0; text-decoration: none; text-indent: 1.0em;} .base_design #footer_company .sns_link_group {width: 120px; display: inline-block; vertical-align: top;} .base_design #footer_company #footer_company_inner .sns_link_group ul {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;} .base_design #footer_company #footer_company_inner .sns_link_group ul li {list-style: none; margin: 0 10px;} .base_design #footer_company #footer_company_inner .sns_link_group ul li a>img {width: 22px; margin-left: 0;} .base_design #footer_company #footer_company_inner .sns_link_group ul li a>img:hover {-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); opacity: 1; transition: 0.5s;} .base_design #footer_company .footer_logo {display: block; width: 200px; margin: 30px auto 30px; padding: 0; text-align: center;} .base_design #footer_company .footer_logo>a>img {width: 120px; margin: 0 auto 12px;} .base_design #footer_company .footer_logo>p {display: block; color: #9e9e9f; font-size: 11px; font-weight: 400; text-align: center; letter-spacing: 0.01em; line-height: 1.0;} @media only screen and (max-width: 1000px) { .base_design #footer_company #footer_company_inner .company_link_group {width: 90%; display: block;} .base_design #footer_company #footer_company_inner .company_link_group ul {width: 100%; display: block; margin: 0 auto 40px;} .base_design #footer_company #footer_company_inner .company_link_group ul li {margin: 0 auto 20px;} .base_design #footer_company #footer_company_inner .company_link_group ul li.head {margin: 0 auto 25px;} } /*/////////////////// Recommend ///////////////////*/ #allproductWrap {width: 1100px; margin: 0 auto 120px; padding: 0; background: none; text-align: center;} .allproduct_list {width: 100%; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;} .allproduct_list>div {display: flex; flex-wrap: wrap; justify-content: space-between} .allproduct_list>div>.product_item {display: inline-block; width: 18%; width : -webkit-calc(100% / 5); width : calc(100% / 5 - 30px); margin: 0 auto 40px; padding: 0; vertical-align: top;} .allproduct_list>div>.product_item>.raku2_productImage {margin-bottom: 10px; float: left; width: 100%;} .allproduct_list>div>.product_item>.raku2_productImage>a>img {width: 100%;} .allproduct_list>div>.product_item>.raku2_productContents {width: 100%; display: block; margin: 0 auto ; padding: 0; align-items: center; justify-content: center;} .allproduct_list>div>.product_item>.raku2_productContents>h3 {width: 100%; display: block; margin: 0 auto ; padding: 0; text-align: center; letter-spacing: 0.02em; line-height: 1.1;} .allproduct_list>div>.product_item>.raku2_productContents>h3>a, .allproduct_list>div>.product_item>.raku2_productContents>h3>a:link, .allproduct_list>div>.product_item>.raku2_productContents>h3>a:visited {margin: 0 auto 0; padding: 0; font-size: 13px; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.02em; line-height: 1.5; text-decoration: none;} .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price, .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax {color: #ac0b52; font-size: 16px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/ font-weight: 400; letter-spacing: 0.01em; line-height: 1.0;} .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_differ_price {color: #565656; font-size: 15px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/} .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_label {font-size: 90%; color: #ac0b52;} .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_unit, .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_before, .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_unit, .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_after {font-size: 70%; color: #ac0b52;} @media only screen and (max-width: 1000px) { #allproductWrap {width: 100%; margin: 0 auto 80px; padding: 0; background: none; text-align: center;} .allproduct_list {width: 95%; display: block; margin: 0 auto 80px; padding: 0; align-items: center; justify-content: center;} .allproduct_list>div {display: flex; flex-wrap: wrap; justify-content: space-between} .allproduct_list>div>.product_item {display: inline-block; width: 32%; width : -webkit-calc(100% / 2) ; width : calc(100% / 2 - 20px); margin: 0 auto 30px; padding: 0; vertical-align: top;} .allproduct_list>div>.product_item>.raku2_productContents>h3>a:visited {font-size: 11px;} .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price, .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax {font-size: 14px;} .allproduct_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_differ_price {font-size: 13px;} } /*/////////////////// Ranking ///////////////////*/ #main_column .ranking_list .product_item {display: inline-block; width: 18%; width : -webkit-calc(100% / 5); width : calc(100% / 5 - 30px); margin: 0 auto; padding: 0; vertical-align: top;} #rankingWrap {width: 100%; margin: 0 auto 100px; padding: 50px 0; background-color: #eff5f6; text-align: center;} .ranking_list {width: 1100px; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;} .ranking_list>div {display: flex; flex-wrap: wrap; justify-content: space-between} .ranking_list>div>.product_item>.raku2_productImage {margin-bottom: 10px; float: left; width: 100%;} .ranking_list>div>.product_item>.raku2_productImage>a>img {width: 100%;} .ranking_list>div>.product_item>.raku2_productContents {width: 100%; display: block; margin: 0 auto ; padding: 0; align-items: center; justify-content: center;} .ranking_list>div>.product_item>.raku2_productContents>h3 {width: 100%; display: block; margin: 0 auto ; padding: 0; text-align: center; letter-spacing: 0.02em; line-height: 1.1;} .ranking_list>div>.product_item>.raku2_productContents>h3>a, .ranking_list>div>.product_item>.raku2_productContents>h3>a:link, .ranking_list>div>.product_item>.raku2_productContents>h3>a:visited {margin: 0 auto 0; padding: 0; font-size: 13px; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.02em; line-height: 1.5; text-decoration: none;} .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price, .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax {color: #ac0b52; font-size: 16px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/ font-weight: 400; letter-spacing: 0.01em; line-height: 1.0;} .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_differ_price {color: #565656; font-size: 15px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/} .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_label {font-size: 90%; color: #ac0b52;} .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_unit, .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_before, .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_unit, .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_after {font-size: 70%; color: #ac0b52;} #main_column .raku2_ranking_list p[class^="icon_rank-"] {height: 11px; border: none; border-radius: 0;} #main_column .ranking_list .block_body p {margin: 5px auto;} #main_column .raku2_ranking_list p.icon_rank-1, #main_column .raku2_ranking_list p.icon_rank-2, #main_column .raku2_ranking_list p.icon_rank-3 {display: none;} #main_column .raku2_ranking_list>div>div:nth-of-type(1)>.icon-crown>i {margin: 0 auto 5px; font-size: 16px; color: #d8b44c;} #main_column .raku2_ranking_list>div>div:nth-of-type(2)>.icon-crown>i {margin: 0 auto 5px; font-size: 16px; color: #bfbfbf;} #main_column .raku2_ranking_list>div>div:nth-of-type(3)>.icon-crown>i {margin: 0 auto 5px; font-size: 16px; color: #9c7355;} #main_column .raku2_ranking_list>div>div:nth-of-type(4)>.icon-crown, #main_column .raku2_ranking_list>div>div:nth-of-type(5)>.icon-crown {display: none;} @media only screen and (max-width: 1000px) { #main_column .ranking_list .product_item {display: inline-block; width: 45%; width : -webkit-calc(100% / 2) ; width : calc(100% / 2 - 20px); margin: 0 auto 30px; padding: 0; vertical-align: top;} #rankingWrap {width: 100%; margin: 0 auto 80px; text-align: center;} .ranking_list {width: 95%; display: block; margin: 0 auto 80px; padding: 0; align-items: center; justify-content: center;} .ranking_list>div {display: flex; flex-wrap: wrap; justify-content: space-between} .ranking_list>div>.product_item>.raku2_productContents>h3>a:visited {font-size: 11px;} .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price, .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax {font-size: 14px;} .ranking_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_differ_price {font-size: 13px;} } /*/////////////////// History ///////////////////*/ #historyWrap {width: 100%; margin: 0 auto 80px; padding: 40px 0; background: none; text-align: center; border-top: 1px solid #cfcfcf; /*border-bottom: 1px solid #adadad;*/} .history_list {width: 1100px; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;} .history_list>div {display: flex; flex-wrap: wrap; justify-content: space-between} /*.history_list>div>.product_item {display: inline-block; width: 18%; width : -webkit-calc(100% / 5); width : calc(100% / 5 - 30px); margin: 0 auto 0; padding: 0; vertical-align: top;}*/ .history_list>div>.product_item>.productImage {margin-bottom: 10px; float: left; width: 100%;} .history_list>div>.product_item>.productImage>a>img {width: 100%;} .history_list>div>.product_item>.productContents {width: 100%; display: block; margin: 0 auto ; padding: 0; align-items: center; justify-content: center;} .history_list>div>.product_item>.productContents>h3 {width: 100%; display: block; margin: 0 auto 5px; padding: 0; text-align: center; letter-spacing: 0.02em; line-height: 1.1;} .history_list>div>.product_item>.productContents>h3>a, .history_list>div>.product_item>.productContents>h3>a:link, .history_list>div>.product_item>.productContents>h3>a:visited {margin: 0 auto 0; padding: 0; font-size: 13px; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.02em; line-height: 1.5; text-decoration: none;} .history_list>div>.product_item>.productContents>.sale_price, .history_list>div>.product_item>.productContents>.sale_price>span {color: #ac0b52; font-size: 13px;} .history_list>div>.product_item>.productContents>.sale_price>.normal>span.price {color: #ac0b52; font-size: 110%;} .history_list>div>.product_item>.productContents>.sale_price>span>#price02_inctax_default_, .history_list>div>.product_item>.productContents>.sale_price>span>#teiki_first_price_inctax_default_ {color: #ac0b52; font-size: 140%; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/ font-weight: 400; letter-spacing: 0.01em; line-height: 1.0;} .history_list>div>.product_item>.productContents>.sale_price>.raku2_differ_price {color: #565656; font-size: 15px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/} .history_list>div>.product_item>.productContents>.sale_price>.raku2_price_label {font-size: 90%; color: #ac0b52;} .history_list>div>.product_item>.productContents>.sale_price>.raku2_price_unit, .history_list>div>.product_item>.productContents>.sale_price>.raku2_price_tax_before, .history_list>div>.product_item>.productContents>.sale_price>.raku2_price_tax_unit, .history_list>div>.product_item>.productContents>.sale_price>.raku2_price_tax_after {font-size: 70%; color: #ac0b52;} #recommend_area .block_body div.sale_price, #main_column .recommend_list .block_body div.sale_price, #main_column .ranking_list .block_body div.sale_price, #main_column .history_list .block_body div.sale_price, #main_column .related_list .block_body div.sale_price, #main_column .block_body div.normal {text-align: center;} #whobought_area .product_item div.sale_price {text-align: center;} .history_list>div>.product_item>.raku2_productImage {margin-bottom: 10px; float: left; width: 100%;} .history_list>div>.product_item>.raku2_productImage>a>img {width: 100%;} .history_list>div>.product_item>.raku2_productContents {width: 100%; display: block; margin: 0 auto ; padding: 0; align-items: center; justify-content: center;} .history_list>div>.product_item>.raku2_productContents>h3 {width: 100%; display: block; margin: 0 auto ; padding: 0; text-align: center; letter-spacing: 0.02em; line-height: 1.1;} .history_list>div>.product_item>.raku2_productContents>h3>a, .history_list>div>.product_item>.raku2_productContents>h3>a:link, .history_list>div>.product_item>.raku2_productContents>h3>a:visited {margin: 0 auto 0; padding: 0; font-size: 13px; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.02em; line-height: 1.5; text-decoration: none;} .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price, .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax {color: #ac0b52; font-size: 16px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/ font-weight: 400; letter-spacing: 0.01em; line-height: 1.0;} .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_differ_price {color: #565656; font-size: 15px; /*font-family: "Roboto-Regular", "Noto Sans", Meiryo, sans-serif;*/} .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_label {font-size: 90%; color: #ac0b52;} .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_unit, .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_before, .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_unit, .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax_after {font-size: 70%; color: #ac0b52;} #main_column .history_list .block_body {padding: 0;} #main_column .history_list .product_item {display: inline-block; width: 15%; width : -webkit-calc(100% / 6); width : calc(100% / 6 - 30px); margin: 0 auto 0; padding: 0; vertical-align: top;} #main_column .history_list .product_item:nth-child(5n) {padding-right: 0;} @media only screen and (max-width: 1000px) { #historyWrap {width: 100%; margin: 0 auto 80px; padding: 30px 0; background: none; text-align: center;} .history_list {width: 95%; margin: 0 auto;} .history_list>div {display: flex; flex-wrap: wrap; justify-content: space-between} /*.history_list>div>.product_item {display: inline-block; width: 32%; width : -webkit-calc(100% / 2) ; width : calc(100% / 2 - 20px); margin: 0 auto 30px; padding: 0; vertical-align: top;}*/ .history_list>div>.product_item>.raku2_productContents>h3>a:visited {font-size: 11px;} .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price, .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_price_tax {font-size: 14px;} .history_list>div>.product_item>.raku2_productContents>.raku2_price_area>.raku2_differ_price {font-size: 13px;} #main_column .history_list .product_item {display: inline-block; width: 32%; width : -webkit-calc(100% / 2) ; width : calc(100% / 2 - 20px); margin: 0 auto 30px; padding: 0; vertical-align: top;} } /*/////////////////// News ///////////////////*/ .section-ttl-news {display: inline-block; margin: 0 auto 15px; padding: 0; font-size: 24px; font-family:"Marcellus"; font-weight: 400; color: #565656; text-align: left; letter-spacing: 0.15em; line-height: 1.7; text-decoration: none;} .section-ttl-news>span {display: inline-block; margin: 0 0 0 10px; padding: 0; font-size: 45%;} #main_column.colnum1 .raku2_theme01, #main_column .raku2_theme01 {text-align: left;} #main_column .raku2_theme01 #news_area {max-width: 1100px; margin: 0 auto 80px;} #main_column .raku2_theme01 #news_area .news_contents {text-align: justify; padding:0; max-height: 280px; height: auto; overflow:auto; overflow-y:scroll;} #main_column .raku2_theme01 #news_area .news_contents .newslist {width: 96%; margin: 0 auto; display: block; border-bottom: 1px solid #cfcfcf;} #main_column .raku2_theme01 #news_area .news_contents .newslist .mini {display: block; color: #808080;} #main_column .raku2_theme01 #news_area dl.newslist {padding: 15px 2% 10px !important;} #main_column .raku2_theme01 #news_area dl.newslist a, #main_column .raku2_theme01 #news_area dl.newslist a:link, #main_column .raku2_theme01 #news_area dl.newslist a:visited {color: #565656; font-family:"A1ゴシック M";} #main_column .raku2_theme01 #news_area dl.newslist a:hover {color: #797979;} #main_column .raku2_theme01 #news_area dl.newslist dt {display: block;} #main_column .raku2_theme01 #news_area dl.newslist dd {color: #565656; font-size: 13px;} @media only screen and (max-width: 1000px) { #main_column .raku2_theme01 #news_area {max-width: 92%; margin: 0 auto 80px;} #main_column .raku2_theme01 #news_area .news_contents .newslist .mini {display: block;} #main_column .raku2_theme01 #news_area dl.newslist dt {display: block;} #main_column .raku2_theme01 #news_area dl.newslist dd {padding-left: 0;} } /*//////// B2B Membership ////////*/ #b2b_membership {width: 1100px; margin: 0 auto 80px; padding: 20px 0; background: none; text-align: center; border-bottom: 1px solid #cfd1d9; border-top: 1px solid #cfd1d9;} #b2b_membership>.membershipWrap {width: 850px; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #b2b_membership>.membershipWrap>div {display: inline-block; align-items: center; margin: 0 1%;} #b2b_membership>.membershipWrap>div:first-child {margin-left: 0px;} #b2b_membership>.membershipWrap>div:last-child {margin-right: 0px;} #b2b_membership>.membershipWrap>.logo {width: 12%;} #b2b_membership>.membershipWrap>.logo>img {width: 100%;} #b2b_membership>.membershipWrap>.membership {width: 65%;} #b2b_membership>.membershipWrap>.membership>p {margin: 0 auto; padding: 0; color: #808080; text-align: justify; font-size: 14px; line-height: 1.5; letter-spacing: 0.02em;} #b2b_membership>.membershipWrap>.membership>.head {margin: 0 auto 10px; padding: 0; font-size: 19px; line-height: 1.0;} #b2b_membership>.membershipWrap>.btnArea {width: 15%;} #b2b_membership>.membershipWrap>.btnArea>.circle {display: inline-block; position: relative; width: 110px; height: 110px; background-color: #565656; border: 1px solid #565656; border-radius: 50%; margin: 0 auto; text-align: center;} #b2b_membership>.membershipWrap>.btnArea>.circle>.circle-inner {position: absolute; color: #ffffff; margin: 0 auto; font-size: 12px; font-weight: 400; letter-spacing: 0.05em; line-height: 1.4; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #b2b_membership>.membershipWrap>.btnArea>.circle>.circle-inner>span {display: block; margin: 5px auto 0; padding: 0; font-size: 60%;} #b2b_membership>.membershipWrap>.btnArea>.circle>a, #b2b_membership>.membershipWrap>.btnArea>.circle>a:link, #b2b_membership>.membershipWrap>.btnArea>.circle>a:visited {text-decoration: none;} @media only screen and (max-width: 1000px) { #b2b_membership {width: 92%; margin: 0 auto 80px; padding: 20px 0;} #b2b_membership>.membershipWrap {width: 100%;} #b2b_membership>.membershipWrap>div {display: inline-block; align-items: center; margin: 0 1%;} #b2b_membership>.membershipWrap>.logo {width: 15%;} #b2b_membership>.membershipWrap>.logo>img {width: 100%;} #b2b_membership>.membershipWrap>.membership {width: 80%;} #b2b_membership>.membershipWrap>.membership>p {margin: 0 auto; font-size: 12px;} #b2b_membership>.membershipWrap>.membership>.head {font-size: 16px;} #b2b_membership>.membershipWrap>.btnArea {display: block; width: 100%; margin: 20px auto 0;} #b2b_membership>.membershipWrap>.btnArea>.circle {display: block; position: relative; width: 80%; height: auto; margin: 0 auto; padding: 10px 0; background-color: #565656; border: 1px solid #565656; border-radius: 20px; text-align: center;} #b2b_membership>.membershipWrap>.btnArea>.circle>.circle-inner {position: relative; color: #ffffff; margin: 0 auto; font-size: 12px; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5; top: auto; left: auto; transform: none;} #b2b_membership>.membershipWrap>.btnArea>.circle>.circle-inner>span {display: inline-block; margin: 0 0 0 10px; padding: 0; font-size: 80%;} } /*//////// LeftNavi ////////*/ #leftcolumn {float: left; width: 220px; display: inline-block;} .leftmenuWrap {width: 100%; margin: 0 auto 20px; padding: 0;} .leftmenuWrap>.left_menu_category, .leftmenuWrap>.left_menu_contents {width: 90%; margin: 0 auto 20px; padding: 30px 5% 0; border-top: 1px solid #cfd1d9;} .leftmenuWrap>.left_menu_category>dt, .leftmenuWrap>.left_menu_contents>dt {margin: 0 auto 10px; padding: 0; font-size: 13px; font-weight: 600; font-family:"Marcellus"; color: #565656; text-align: left; letter-spacing: 0.1em; line-height: 1.0; background: none; cursor: pointer; position: relative; border: none;} .leftmenuWrap>.left_menu_category>dd, .leftmenuWrap>.left_menu_contents>dd {width: 95%; height: auto; margin: 0 auto; padding: 0;} .leftmenuWrap>.left_menu_category>dd>ul, .leftmenuWrap>.left_menu_contents>dd>ul {width: 100%; margin: 0 auto; padding: 0; list-style: none;} .leftmenuWrap>.left_menu_category>dd>ul>li, .leftmenuWrap>.left_menu_contents>dd>ul>li {display: block; width: 100%; margin: 0 auto; padding: 15px 0 10px; list-style: none; border-bottom: 1px dotted #cfcfcf;} .leftmenuWrap>.left_menu_category>dd>ul>li>a, .leftmenuWrap>.left_menu_category>dd>ul>li>a:link, .leftmenuWrap>.left_menu_category>dd>ul>li>a:visited, .leftmenuWrap>.left_menu_contents>dd>ul>li>a, .leftmenuWrap>.left_menu_contents>dd>ul>li>a:link, .leftmenuWrap>.left_menu_contents>dd>ul>li>a:visited {display: block; margin: 0 auto 0; padding: 0; font-size: 14px; font-weight: 300; color: #565656; letter-spacing: 0.02em; line-height: 1.3; text-decoration: none; text-align: left; transition: 0.5s;} .leftmenuWrap>.left_menu_category>dd>ul>li>a:hover, .leftmenuWrap>.left_menu_contents>dd>ul>li>a:hover {transition: 0.5s; transform: translate(5px,0);} .leftbnrWrap {border-top: 1px solid #cfd1d9; width: 100%; margin: 0 auto 20px; padding: 0;} .leftbnrWrap>ul {width: 100%; margin: 20px auto; padding: 0; list-style: none;} .leftbnrWrap>ul>li {display: block; width: 100%; margin: 0 auto 10px; padding: 0; list-style: none;} .leftbnrWrap>ul>li>a>img {width: 100%;} #cart_area {margin: 0 auto 20px; padding: 20px 0 15px; /*background-color: #f7f6f4;*/ border: 1px solid #cfd1d9;} #cart_area h2 {background-color: #f7f6f4;} #cart_area>.cart-ttl {display: block; margin: 0 auto 5px; padding: 0; font-size: 20px; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.15em; line-height: 1.2; text-decoration: none; background: none;} #cart_area>.cart-ttl>span {display: block; margin: 0 auto; padding: 0; font-size: 50%; letter-spacing: 0.05em;} #cart_area>.block_body {border:none;} #cart_area>.block_body>.btn>a, #cart_area>.block_body>.btn>a:link, #cart_area>.block_body>.btn>a:visited {display: block; width: 90%; margin: 0 auto; padding: 15px 0; color: #ffffff; font-size: 13px; font-weight:400; letter-spacing: 0.1em; line-height: 1.0; background: #565656 none repeat scroll 0% 0%; border: 1px solid #565656; border-radius: 0; text-align: center; text-decoration: none;} #cart_area>.block_body>.btn>a:hover {color: #565656; background: #ffffff none repeat scroll 0% 0%;} #cart_area .btn {border-top: none;} #calender_area {margin: 0 auto 20px; padding: 20px 0 15px; border: 1px solid #ffffff/*#cfd1d9*/;} #calender_area>.calender-ttl {display: block; margin: 0 auto 5px; padding: 0; font-size: 13px; font-weight: 400; color: #565656; text-align: center; letter-spacing: 0.15em; line-height: 1.0; background: none;} #calender_area>.block_body {border:none; padding: 0;} #calender_area table:nth-of-type(2) {background: #ffffff; border: none; width: 150px; margin: 10px auto; font-size: 90%; display:none;} #calender_area table .month {margin: 0 auto 5px; padding: 5px 0; font-size: 12px; text-align: center; background-color: #f7f6f4; color: #565656;} #calender_area table {width: 90%; margin: 10px auto; background: #ffffff; border: none; font-size: 90%;} #calender_area table th {padding: 8px 0 3px; border-right: none; border-bottom: 1px solid #ACACAC; color: #565656; background-color: #FFFFFF; font-weight: normal;} #calender_area table td {padding: 5px 3px; border-bottom: 1px solid #e7e3e3; border-right: none; text-align: center; font-size: 11px;} #calender_area th {padding: 1px 3px; border-right: none; text-align: center;} #calender_area .off {color: #565656; background-color: #eee7e0;} #calender_area .today {background-color: #565656; font-weight: bold; color:#FFFFFF;} #calender_area .information {margin-left: 10px; font-size: 90%; display:none;} #calender_area .nextDate {background-color: #ed8a00 !important;} /*//////// ProductListpage ////////*/ .photo img, .sub_photo img {border: none; /*border-radius: 20px;*/} .plg_Raku2_LC_Page_Products_List #container {width: 1200px; max-width: 90%; margin: 40px auto 0;} .raku2_product_list_new .product_list_header {display: grid; grid-template-columns: 2fr 8fr; align-items: center; margin-bottom: 20px;} .raku2_product_list_new .raku2_product_list_container {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.0rem; margin-bottom: 20px;} .raku2_product_list_new .listphoto {position: relative; width: 200px; height: 200px;} .raku2_product_list_new .listrightbloc {width: 200px;} .raku2_child_categories {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); place-items: center; place-content: center; gap: 0.3rem; margin-bottom: 80px;} .raku2_child_categories a.category_no_image:link, .raku2_child_categories a.category_no_image:visited {display: inline-block; padding: 0.5rem; width: 85%; text-align: center; color: #565656; border: 1px #565656 solid; border-radius: 10rem; margin: 0.5rem 0; font-size: 11px;} .raku2_product_list_number {font-size: 15px;} .raku2_product_list_new .listrightbloc .raku2_price_area {font-size: 16px; color: #ac0b52;} .raku2_product_list_new .listrightbloc .raku2_price_area>.raku2_price_unit, .raku2_product_list_new .listrightbloc .raku2_price_area>.raku2_price_tax_before, .raku2_product_list_new .listrightbloc .raku2_price_area>.raku2_price_tax_after {font-size: 70%;} @media only screen and (max-width: 1000px) { .plg_Raku2_LC_Page_Products_List #container {max-width: 100%; min-width: 100%;} .plg_Raku2_LC_Page_Products_List #main_column.colnum2, .plg_Raku2_LC_Page_Products_CategoryList, .plg_Raku2_LC_Page_Products_ProductsList #main_column.colnum2, .plg_Raku2_LC_Page_Products_Detail #main_column.colnum2 {width:92%; margin: 0 auto; padding: 0;} #leftcolumn {float: none; width: 0; display: none;} #main_column.colnum2.right {float: none;} #main_column.colnum2 {width: 95%; margin: 0 auto;} .LC_Page_Index #main_column.colnum2 {max-width: 100%; min-width: 100%;} } /*/////////////////// CartPage ///////////////////*/ div#undercolumn_cart .point_announce {border: none; background: #565656; color: #ffffff;} #cart_area .postage {margin-top: 10px; padding-top: 0; font-size: 12px;} #cart_area .postage>.price {font-size: 110%;} #cart_area .postage .point_announce {padding: 2px 0 2px 0; /* background: url(../img/icon/ico_price.gif) no-repeat left top; */} /*/////////////////// GuidePage ///////////////////*/ .custom_page .guide_area {border: none;} .guide_area {width: 95%; margin: 0 auto 40px; padding: 0 0 30px; color: #565656; border-bottom: 1px solid #cfcfcf !important; font-weight: 400;} .guide_area>h3 {color: #565656; padding: 0; margin: 0 auto 20px; border-bottom: none; font-size: 20px; letter-spacing: 0.05em; line-height: 1.5;} .guide_area>.contents_outer {width: 95%; margin: auto;} .guide_area>.contents_outer>h4 {font-size: 17px; font-weight: 500; line-height: 1.8; letter-spacing: 0.02em; margin: 30px auto 0; padding: 0;} .guide_area>.contents_outer>h5 {font-size: 14px; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; margin: 10px auto 0; padding: 0;} .guide_area>.contents_outer>h4>.num {font-size: 120%;} .guide_area>.contents_outer>.telephone, .guide_area>.contents_outer>.telephone:link, .guide_area>.contents_outer>.telephone:visited {display: block; font-size: 28px; font-weight: 600; text-decoration: none; color: #aa0000;} .guide_area>.contents_outer>.telephone>span {font-size: 80%; color: #565656; font-weight: 400;} .guide_area>.contents_outer>.b_hours {font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; margin: 0 auto 10px; padding: 0; text-align: left;} .guide_area>.contents_outer>.linkbtn_contact, .guide_area>.contents_outer>.linkbtn_contact:link, .guide_area>.contents_outer>.linkbtn_contact:visited {display: block; width: 400px; margin: 10px 0 10px; padding: 15px 0; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; text-align: center; text-decoration: none; color: #ffffff; border: 1px solid #565656; background-color: #565656;} .guide_area>.contents_outer>.linkbtn_contact:hover {color: #565656; background-color: #ffffff;} .guide_area>.contents_outer>.postage {font-size: 15px; font-weight: 500; line-height: 1.0; letter-spacing: 0.02em; margin: 10px auto 0; padding: 0;} .guide_area>.contents_outer>.postage>.num {font-size: 120%;} .guide_area>.contents_outer>.emp {font-size: 120%; color: #aa0000;} .guide_area>.contents_outer>.bnrWrap {width: 100%; margin: 30px auto 0; text-align: center;} .guide_area>.contents_outer>.bnrWrap>a>img {margin: 0 auto 0; text-align: center;} .guide_area>.contents_outer>p {font-size: 15px; margin: 0 auto 10px; padding: 0; text-align: justify; line-height: 1.6; letter-spacing: -0.01em;} .guide_area>.contents_outer>p>b {font-size: 120%; font-weight: 700; color: #aa0000;} .guide_area>.contents_outer>p>span {font-size: 80%;} .guide_area>.contents_outer>.impWrap {width: 400px; margin: 20px auto; padding: 10px 2%; border: 1px solid #565656;} .guide_area>.contents_outer>p>a, .guide_area>.contents_outer>p>a:link, .guide_area>.contents_outer>p>a:visited {font-size: 110%; font-weight: 600; text-decoration: none;} .guide_area>.contents_outer>ul {width: 95%; margin: 0 auto 40px; padding: 0;} .guide_area>.contents_outer>ul>li {margin: 0 auto 20px; list-style: none; font-size: 14px; line-height: 1.7; letter-spacing: 0.02em; text-align: justify;} .guide_area>.contents_outer>ul>li::marker {content: '・ ';} /*/////////////////// FAQPage ///////////////////*/ .custom_page #guide-contents {width: 90%; margin: 0 auto 50px;} .custom_page .guideBoxWrap {width: 100%; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; border: none;} .custom_page .guideBoxWrap>.guideBox {display: inline-block; width: 30%; width : -webkit-calc(100% / 3); width : calc(100% / 3 - 20px); margin: 0 auto 30px; border-left: none; border-bottom: none;} .custom_page .guideBoxWrap>.guideBox>.btn_faqhead, .custom_page .guideBoxWrap>.guideBox>.btn_faqhead:link, .custom_page .guideBoxWrap>.guideBox>.btn_faqhead:visited {display: block; width: 100%; margin: 10px auto 20px; padding: 10px 0; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; text-align: center; text-decoration: none; color: #565656; border: 1px solid #565656; background-color: #ffffff;} .custom_page .guideBoxWrap>.guideBox>ul {width: 90%; margin: 0 auto; padding: 0; list-style: none;} .custom_page .guideBoxWrap>.guideBox>ul>li {display: block; width: 100%; margin: 0 auto; padding: 0; list-style: none;} .custom_page .guideBoxWrap>.guideBox>ul>li>a, .custom_page .guideBoxWrap>.guideBox>ul>li>a:link, .custom_page .guideBoxWrap>.guideBox>ul>li>a:visited {display: block; margin: 0 auto 10px; padding:10px 0 10px; color: #000000; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.0; text-align: left; text-decoration: none; border-bottom: 1px solid #afafaf;} .custom_page .guideBoxWrap>.guideBox_etc {width: 400px; margin: auto; text-align: left;} .custom_page .guideBoxWrap>.guideBox_etc>a:link, .custom_page .guideBoxWrap>.guideBox_etc>a:visited {display: block; width: 100%; margin: 0 auto; padding: 10px 0; color: #000000; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.0; text-align: center; text-decoration: none; border: 1px solid #000000;} .faq_area {width:95%; margin: 0 auto 80px;} .faq_area>h4 {margin: 0 auto 20px; padding:15px 0; color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.0; background-color: #565656/*#a48a70*/; text-align: center;} .faq_area>.accordion {width:95%; margin: 0 auto 0; position: relative; z-index: 1;} .faq_area>.accordion>.accordion-title {display: block; margin: 30px auto 15px; padding: 0 0 15px; color: #565656; font-size: 20px; font-weight: 400; letter-spacing: 0.1em; line-height: 1.0; border-bottom: 1px solid #565656;} .faq_area>.accordion .accordion-item {width: 100%; margin: 0 auto 15px; background-color: #f1f1f1;} .faq_area>.accordion button {position: relative; display: block; text-align: center; width: 100%; padding: 0; color: #565656; font-size: 18px; font-weight: 200; border: none; background: none; outline: none;} .faq_area>.accordion button:hover, .faq_area>.accordion button:focus {cursor: pointer; color: #565656;} .faq_area>.accordion button:hover::after, .faq_area>.accordion button:focus::after {cursor: pointer; color: #565656; border: 1px solid #565656;} .faq_area>.accordion button .accordion-title {margin: 0 auto; padding: 20px 30px 18px 50px; text-indent: -25px; text-align: left; color: #565656; font-size: 16px; font-weight: 400; letter-spacing: 0.1em; line-height: 1.4;} .faq_area>.accordion button .accordion-title>span {font-size: 110%;} .faq_area>.accordion button .icon {display: inline-block; position: absolute; top: 22px; right: 40px; width: 22px; height: 22px;} .faq_area>.accordion button .icon2rows {display: inline-block; position: absolute; top: 35px; right: 40px; width: 22px; height: 22px;} .faq_area>.accordion button .icon::before, .faq_area>.accordion button .icon2rows::before {display: block; position: absolute; content: ""; top: 10px; left: 6px; width: 10px; height: 2px; background: #565656;} .faq_area>.accordion button .icon::after, .faq_area>.accordion button .icon2rows::after {display: block; position: absolute; content: ""; top: 6px; left: 10px; width: 2px; height: 10px; background: #565656;} .faq_area>.accordion button[aria-expanded=true] {color: #565656;} .faq_area>.accordion button[aria-expanded=true] .icon::after, .faq_area>.accordion button[aria-expanded=true] .icon2rows::after {width: 0;} .faq_area>.accordion button[aria-expanded=true]+.accordion-content {opacity: 1;max-height: 100%; transition: all 200ms linear; will-change: opacity, max-height;} .faq_area>.accordion .accordion-content {opacity: 0; max-height: 0; overflow: hidden; transition: opacity 200ms linear, max-height 200ms linear; will-change: opacity, max-height;} .faq_area>.accordion .accordion-content__inner {border-top: 1px solid #565656; padding: 10px; margin: 0 auto 0;} .faq_area>.accordion .accordion-content__inner>.faq-flex {width: 95%; margin: 0 auto;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text {font-size: 15px; margin: 15px auto; font-weight: 400; color: #565656; letter-spacing: 0.01em; line-height: 1.6; text-align: justify;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>span {font-size: 110%;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>b {font-size: 120%; display: block; margin: 20px auto 0;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-atten {font-size: 13px;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>.emp{font-size: 110%; font-weight: 600; color: #be000b;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-atten>.emp {font-size: 100%; color: #be000b;} .faq_area>.accordion .accordion-content .postage-text {font-size: 14px; margin: 15px auto 0; font-weight: 400; color: #565656; letter-spacing: 0.01em; line-height: 1.6; text-align: center;} .faq_area>.accordion .accordion-content .postage {font-size: 18px; margin: 8px auto 15px; font-weight: 600; color: #565656; letter-spacing: 0.01em; line-height: 1.7; text-align: center;} .faq_area>.accordion .accordion-content .postage>span {font-size: 80%;} .faq_area>.accordion .accordion-content .contact-text {font-size: 14px; margin: 0 auto 15px; padding: 15px 0 0; font-weight: 400; color: #565656; letter-spacing: 0.01em; line-height: 1.6; text-align: center; border-top: 1px dotted #cfcfcf;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>a, .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>a:link, .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>a:visited {color: #be000b; font-weight: 600; text-decoration: none;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.faq-text>a>.num {font-size: 120%; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", YuGothicMedium, Verdana, Meiryo, "M+ 1p", sans-serif;} .faq_area>.accordion .accordion-content .contact-info {font-size: 15px; margin: 0 auto 10px; font-weight: 400; color: #565656; letter-spacing: 0.01em; line-height: 1.6; text-align: center;} .faq_area>.accordion .accordion-content .contact-info>.telno {font-family: 'Avenir Medium', sans-serif; font-weight: 600; font-size: 180%; letter-spacing: 0.05em;} .faq_area>.accordion .accordion-content .contact-info>span {font-size: 85%;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.linkbtn_contact, .faq_area>.accordion .accordion-content__inner>.faq-flex>.linkbtn_contact:link, .faq_area>.accordion .accordion-content__inner>.faq-flex>.linkbtn_contact:visited {display: block; width: 300px; margin: 10px 0 10px; padding: 15px 0; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; text-align: center; text-decoration: none; color: #ffffff; border: 1px solid #565656; background-color: #565656;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.linkbtn_contact:hover {color: #565656; background-color: #ffffff;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.telephone, .faq_area>.accordion .accordion-content__inner>.faq-flex>.telephone:link, .faq_area>.accordion .accordion-content__inner>.faq-flex>.telephone:visited {display: block; font-size: 28px; font-weight: 600; text-decoration: none; color: #aa0000;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.telephone>span {font-size: 80%; color: #565656; font-weight: 400;} .faq_area>.accordion .accordion-content__inner>.faq-flex>.b_hours {font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; margin: 0 auto 10px; padding: 0; text-align: left;} @media only screen and (max-width: 1000px) { .custom_page .guideBoxWrap>.guideBox {display: inline-block; width: 45%; width : -webkit-calc(100% / 2); width : calc(100% / 2 - 20px); margin: 0 auto 30px; border-left: none; border-bottom: none;} } /*/////////////////// ColumnPage ///////////////////*/ #column_page {width:800px; margin: 60px auto 150px; padding: 0;} #column_page>.columnpageWrap {width: 100%; margin: 0 auto; padding: 0;} #column_page>.columnpageWrap>.dayArea {width: 100%; margin: 0 auto 10px; padding: 0;} #column_page>.columnpageWrap>.dayArea>time {display: block; margin: 0 auto; padding: 0; color: #998C8E; font-size: 14px; font-weight: 300; font-family: -apple-system,"BlinkMacSystemFont","Hiragino Kaku Gothic ProN","Hiragino Sans",YuGothic,"Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;} #column_page>.columnpageWrap>.column-icon {display: block; width: 100px; margin: 0 auto 10px 0; padding: 6px 0; color: #ffffff; font-size: 11px; text-align: center; letter-spacing: 0.01em; line-height: 1.0; background-color: #565656; border-radius: 5px; text-decoration: none;} #column_page>.columnpageWrap>.article_fv {width: 100%; margin: 0 auto 50px;} #column_page>.columnpageWrap>.column-ttl {display: block; margin: 0 auto 30px; padding: 0; font-size: 26px; font-weight: 400; color: #565656; text-align: left; letter-spacing: 0.05em; line-height: 1.5; text-decoration: none;} #column_page>.columnpageWrap>.column-ttl>span {display: block; margin: 0 auto; padding: 0; font-size: 45%;} #column_page>.columnpageWrap>p {display: block; margin: 0 auto 20px; padding: 0; color: #565656; font-size: 15px; font-weight: 400; text-align: justify; letter-spacing: 0.01em; line-height: 1.6;} #column_page>.columnpageWrap>.article_fv {width: 100%; margin: 0 auto 50px;} #column_page>.columnpageWrap>.article_fv>img {width: 100%;} #column_page>.columnpageWrap>.lead {width: 600px; margin: 0 auto 30px; padding: 0;} #column_page>.columnpageWrap>.lead>p {font-size: 15px; font-weight: 400; margin: 0 auto 25px; padding: 0; color: #565656; letter-spacing: 0.01em; line-height: 1.8; text-align: justify;} #column_page>.columnpageWrap>.article_Wrap {width: 600px; margin: 50px auto 0;} #column_page>.columnpageWrap>.article_Wrap>.Index_Area {width: 90%; margin: 0 auto 80px; padding: 25px 5% 25px; border-top: 2px dotted #565656; border-bottom: 2px dotted #565656;} #column_page>.columnpageWrap>.article_Wrap>.Index_Area>.IndexHeader {margin: 0 0 20px; padding: 0; font-size: 13px; font-weight: 300; font-family: "Montserrat-Regular", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif; color: #565656; letter-spacing: 0.1em;} #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul {width: 100%; margin: 0 auto; padding-left: 30px;} #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li {margin: 0 auto 10px; list-style: "・";} #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li:last-child {margin-bottom: 0;} #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a, #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a:link, #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a:visited {color: #565656; font-size: 18px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.0; text-decoration: none;} #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a:hover {background-color: #cfcfcf;} #column_page>.columnpageWrap>.article_Wrap>article {width: 100%; margin: 0 auto 100px;} #column_page>.columnpageWrap>.article_Wrap>article>.picture {width: 100%; margin: 0 auto 20px;} #column_page>.columnpageWrap>.article_Wrap>article>h4 {margin: 40px auto 20px; padding: 0 0 0 15px; font-size: 23px; font-weight: 700; color: #565656; letter-spacing: 0.01em; line-height: 1.5; border-left: 4px solid #cab49d; height: 60px; align-items: center; display: flex;} #column_page>.columnpageWrap>.article_Wrap>article>p, #column_page>.columnpageWrap>.article_Wrap>article>.external>p {font-size: 16px; font-weight: 400; margin: 0 auto 25px; padding: 0; color: #565656; letter-spacing: 0.01em; line-height: 1.8; text-align: justify;} #column_page>.columnpageWrap>.article_Wrap>article>ul {width: 95%; margin: 0 auto 30px; padding-right: 0;} #column_page>.columnpageWrap>.article_Wrap>article>ul>li {list-style: "・"; margin: 0 auto 8px; padding: 0 ; font-size: 17px; letter-spacing: 0.01em; line-height: 1.5;} #column_page>.columnpageWrap>.article_Wrap>article>.external {width: 85%; margin: 0 auto 30px; padding: 20px 5%; background-color: #f1eae8; border-radius: 20px;} @media only screen and (max-width: 1000px) { #column_page {width:100%; margin: 40px auto 80px; padding: 0;} #column_page>.columnpageWrap>.dayArea>time {font-size: 12px;} #column_page>.columnpageWrap>.column-ttl {font-size: 22px;} #column_page>.columnpageWrap>.lead {width: 92%;} #column_page>.columnpageWrap>.lead>p {font-size: 15px; font-weight: 400; margin: 0 auto 25px; padding: 0; color: #565656; letter-spacing: 0.01em; line-height: 1.8; text-align: justify;} #column_page>.columnpageWrap>.article_Wrap {width: 92%;} n_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a, #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a:link, #column_page>.columnpageWrap>.article_Wrap>.Index_Area>ul>li>a:visited {font-size: 15px;} #column_page>.columnpageWrap>.article_Wrap>article>h4 {font-size: 18px;} #column_page>.columnpageWrap>.article_Wrap>article>p, #column_page>.columnpageWrap>.article_Wrap>article>.external>p {font-size: 14px;} #column_page>.columnpageWrap>.article_Wrap>article>ul>li {font-size: 15px;} } /*/////////////////// ContentsListPage ///////////////////*/ .article_return {width: 700px; margin: 0 auto 80px;} .article_return>a, .article_return>a:link, .article_return>a:visited {display: block; width: 300px; font-size: 15px; margin: 0 auto 0; padding: 20px 0; border: 1px solid #565656; color: #565656; background-color: #ffffff; text-align: center; text-decoration: none; position: relative;} .article_return>a:hover {color: #ffffff; background-color: #565656;} .article_return>a::after{content: ""; display: block; position: absolute; top: calc(50% - 5px); left: 30px; width: 20px; height: 5px; border: none; border-left: 1.5px solid #565656; border-bottom: 1px solid #565656; transform: skew(-45deg); transition: .3s;} .article_return>a:hover::after{left: 20px; width: 30px; border-left: 1.5px solid #ffffff; border-bottom: 1px solid #ffffff;} .article_List {width: 95%; margin: 50px auto 80px;} .article_List>ul {width: 98%; margin: 30px auto; padding: 0; list-style: none; text-align: left;} .article_List>ul>li {display: inline-block; width: -webkit-calc(100% / 3); width: calc(100% / 3 - 50px); margin: 0 1% 50px; padding: 0; text-align: left; list-style: none;} .article_List>ul>li>a {position: relative; display: block; text-decoration: none; color: #565656;} .article_List>ul>li>a:hover {filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1; color: #565656;} .article_List>ul>li>a>figure {overflow: hidden; padding: 0; margin: 0 auto 20px; /*height: 210px;*/} .article_List>ul>li>a>figure>img {width: 100%; height: auto; margin: 0 auto 10px; transform: scale(1); opacity: 1; transition: 1.1s;} /*.article_List>ul>li>a>figure>img:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); opacity: 1; transition: 0.5s;}*/ .article_List>ul>li>a>time {display: block; width: 100%; margin: 0 auto 5px; padding: 0; color: #998C8E; font-size: 14px; font-weight: 300; font-family: -apple-system,"BlinkMacSystemFont","Hiragino Kaku Gothic ProN","Hiragino Sans",YuGothic,"Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif; text-align: left;} .article_List>ul>li>a>.head {margin: 10px auto 20px; color: #808080; font-size: 17px; letter-spacing: 0.05em; line-height: 1.0;} .article_List>ul>li>a>.lead {margin: 0 auto 20px; color: #565656; font-size: 15px; letter-spacing: 0.01em; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} .article_List>ul>li>a>.recipe-icon {display: block; width: 100px; margin: 10px auto 10px 0; padding: 6px 0; color: #ffffff; font-size: 11px; text-align: center; letter-spacing: 0.01em; line-height: 1.0; background-color: #ff9600; border-radius: 5px; text-decoration: none;} .article_List>ul>li>a>.column-icon {display: block; width: 100px; margin: 10px auto 10px 0; padding: 6px 0; color: #ffffff; font-size: 11px; text-align: center; letter-spacing: 0.01em; line-height: 1.0; background-color: #565656; border-radius: 5px; text-decoration: none;} @media only screen and (max-width: 1000px) { .article_List {width: 100%;} .article_List>ul>li {width: -webkit-calc(100% / 2); width: calc(100% / 2 - 25px); margin: 0 2% 50px;} .article_List>ul>li:nth-child(2n+1) {margin-left: 0;} .article_List>ul>li:nth-child(2n) {margin-right: 0;} } .article_recommend {width: 95%; margin: 20px auto 80px;} .article_recommend>p {font-size: 16px; font-weight: 600; margin: 0 auto 20px; padding: 0; letter-spacing: 0.01em; line-height: 1.0;} .article_recommend>.recommend_Header {position: relative; width: 100%; margin: 0 auto 20px; border-top: 1px solid #565656;} .article_recommend>.recommend_Header:before {position: absolute; content: ''; width: 100px; height: 4px; top: 0; left: 0; background: #565656;} /*/////////////////// Company ///////////////////*/ .companyArea {width: 100%; margin: 0 auto 50px;} .companyArea>.company-content {width: 90%; margin: 0 auto 0;} .company-content__inner>table {width: 100%; border-top: none; border-left: none; border-spacing:0;} .company-content__inner>table th {width: 15%; padding: 18px 1%; border-right: none; border-bottom: 1px solid #cfcfcf; background-color: #ffffff; font-size: 17px; font-weight: 500; color: #565656; text-align: left;} .company-content__inner>table td {border-right: none; border-bottom: 1px solid #cfcfcf; background-color: #ffffff; font-size: 17px; font-weight: 400; color: #565656; padding: 10px 1%; text-align: justify;} @media only screen and (max-width: 1000px) { .company-content__inner>table th {display: block; width: 100%; padding: 10px 1% 0; border-bottom: none; font-size: 16px;} .company-content__inner>table td {display: block; width: 100%; padding: 5px 1% 10px; font-size: 14px;} } /*/////////////////// MyPage ///////////////////*/ #customer_info>.customer_detail>p>.f_weight {font-size: 120%; color: #d9b87e;} ul#mypage_nav.nav_list_style li a, ul#mypage_nav.nav_list_style li a:link, ul#mypage_nav.nav_list_style li a:visited {color: #ffffff; background-color: #565656;} ul#mypage_nav.nav_list_style li a:hover {color: #565656; background-color: #c8b9ae;} ul#mypage_nav li a i:before {color: #ffffff;} ul#mypage_nav li a i:hover::before {color: #565656;} .periodical_history_list .periodical_info span.periodical_status, #mycontents_area.periodical_order_history .periodical_order_detail_bloc span.periodical_status {background: #ed8a00;} #mycontents_area.mypage-top ul#mypage_nav {text-align: center;} /*/////////////////// MembarsPage ///////////////////*/ #members_detail {border: solid 1px #efefef; padding: 25px; width: 1000px; margin: 0 auto;} #members_detail #members_detail_info h2#company_name {color: #bc9f6c; padding: 0 0 2px; border-bottom: solid 1px #1a1a1a; margin-bottom: 10px;} /*/////////////////// COUPON ///////////////////*/ #message_pc_coupon_complete_upper {margin: 0 auto 20px; text-align: center;} #coupon_list #coupon_list_inner #coupon_list_right #coupon_info p#coupon_name {background: #eee7e0; color: #565656;} #coupon_list #coupon_list_inner #coupon_list_right #coupon_info dl h3 {padding: 4px 0; background: #565656; color: #ffffff;} #coupon_list #coupon_list_inner #coupon_list_right #coupon_info dl dt, #coupon_list #coupon_list_inner #coupon_list_right #coupon_info dl dd {float: left; border-bottom: none; padding: 10px 0; height: auto; font-size: 14px;} #coupon_list #coupon_list_inner #coupon_list_right #coupon_info p#coupon_code {text-align: left; font-size: 22px; color: #ed8a00;} #coupon_list #coupon_list_inner #coupon_list_right #coupon_info p#coupon_code::before {content: "クーポンコード"; font-size: 14px; margin-right: 10px;} /*/////////////////// Onedayword ///////////////////*/ #onedayword {width: 700px; margin: 0 auto 100px; padding: 0 0; background: none; text-align: center;} #onedayword>.onedaywordWrap {width: 100%; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-left: 2px solid #565656; border-right: 2px solid #565656;} #onedayword>.onedaywordWrap>div {display: inline-block; margin: 0 1%; padding: 20px 0;} #onedayword>.onedaywordWrap>div:first-child {margin-left: 0px;} /*#onedayword>.onedaywordWrap>div:last-child {margin-right: 0px;}*/ #onedayword>.onedaywordWrap>.ttl {width: 12%; border-right: 1px solid #565656;} #onedayword>.onedaywordWrap>.onedayword {width: 85%; padding: 10px 0;} #onedayword>.onedaywordWrap>.ttl>p, #onedayword>.onedaywordWrap>.onedayword>p {margin: 0 auto; padding: 0; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; letter-spacing: 0.02em;} #onedayword>.onedaywordWrap>.ttl>p {margin: 0 auto; padding: 0; font-size: 20px; font-weight: 300; line-height: 1.3; text-align: center;} #onedayword>.onedaywordWrap>.onedayword>p {margin: 0 auto; padding: 0; font-size: 20px; font-weight: 300; line-height: 1.4; text-align: center; word-break: break-all;} #onedayword>.onedaywordWrap>.onedayword>.author {margin: 5px auto 0; font-size: 17px;} @media only screen and (max-width: 1000px) { #onedayword {width: 90%; margin: 0 auto 80px;} #onedayword>.onedaywordWrap>div {display: block; margin: 0 auto; padding: 5px 0;} #onedayword>.onedaywordWrap>.ttl {width: 100%; margin: 0 auto 2px; border-right: none;} #onedayword>.onedaywordWrap>.onedayword {width: 100%;} #onedayword>.onedaywordWrap>.ttl>p {font-size: 15px;} #onedayword>.onedaywordWrap>.onedayword>p {font-size: 18px; line-height: 1.5; text-align: center;} #onedayword>.onedaywordWrap>.onedayword>.author {margin: 5px auto 0; font-size: 15px;} } /*/////////////////// jewelwater ///////////////////*/ #jewelwater {width: 100%; margin: 80px auto 100px; padding: 0;} #jewelwater>.kvWrap {width: 100%; margin: 0 auto 100px; padding: 0; position: relative;} #jewelwater>.kvWrap>img {width: 1100px; margin: 0 0 0 auto;} #jewelwater>.kvWrap>.maincatch {margin: 0 auto; padding: 0; position: absolute; top: 120px; left: 1070px;} #jewelwater>.kvWrap>.maincatch>h3 {margin: 0 auto; padding: 0; color: #595757; font-size: 36px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1.7; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: left;} #jewelwater>.conceptWrap {width: 1000px; margin: 0 auto; padding: 0;} #jewelwater>.conceptWrap>h4 {width: 100%; margin: 0 auto 120px; padding: 0; color: #595757; font-size: 28px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1.5; text-align: left;} #jewelwater>.conceptWrap>.lpBox {width: 100%; margin: 0 auto 80px; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; position: relative;} #jewelwater>.conceptWrap>.lpBox>.Lead-right {display: inline-block; width: 50%; margin: 0; padding: 0; list-style: none;} #jewelwater>.conceptWrap>.lpBox>.Lead-left {display: inline-block; width: 50%; margin: 0; padding: 0; list-style: none;} #jewelwater>.conceptWrap>.lpBox>.Lead-right>h5, #jewelwater>.conceptWrap>.lpBox>.Lead-left>h5 {margin: 0 auto 20px; list-style: none; font-size: 23px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; color: #595757; line-height: 1.5; letter-spacing: 0.01em; text-align: justify;} #jewelwater>.conceptWrap>.lpBox>.Lead-right>.text, #jewelwater>.conceptWrap>.lpBox>.Lead-left>.text {width: 100%; margin: 0 auto;} #jewelwater>.conceptWrap>.lpBox>.Lead-right>.text>p, #jewelwater>.conceptWrap>.lpBox>.Lead-left>.text>p {margin: 0 auto 15px; list-style: none; font-size: 15px; color: #595757; line-height: 1.7; letter-spacing: 0.01em; text-align: justify;} #jewelwater>.conceptWrap>.lpBox>.Picture-left {display: inline-block; width: 42%; margin: 0; padding: 0; list-style: none;} #jewelwater>.conceptWrap>.lpBox>.Picture-left>img {width: 100%; mix-blend-mode: multiply;} #jewelwater>.conceptWrap>.lpBox>.Picture-right {display: inline-block; width: 42%; margin: 0; padding: 0; list-style: none;} #jewelwater>.conceptWrap>.lpBox>.Picture-right>img {width: 100%; mix-blend-mode: multiply;} #jewelwater>.conceptWrap>.lpBox>.bg_glay {width: 400px; height: 1100px; background-color: #f3f4f5; position: absolute; top: 500px; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: -9999;} #jewelwater>.conceptWrap>.lpBox02 {width: 620px; margin: 150px auto 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; position: relative;} #jewelwater>.conceptWrap>.lpBox02>.Lead-left {display: inline-block; width: 55%; margin: 0; padding: 0; list-style: none;} #jewelwater>.conceptWrap>.lpBox02>.Lead-left>h5 {margin: 0 auto 20px; list-style: none; font-size: 23px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; color: #595757; line-height: 1.5; letter-spacing: 0.01em; text-align: justify;} #jewelwater>.conceptWrap>.lpBox02>.Picture-right {display: inline-block; width: 40%; margin: 0; padding: 0; list-style: none;} #jewelwater>.conceptWrap>.lpBox02>.Picture-right>img {width: 100%; mix-blend-mode: multiply;} #jewelwater>.jewelwaterWrap {width: 100%; margin: 0 auto; padding: 0;} #jewelwater>.jewelwaterWrap>img {width: 100%; margin: 0 auto 0;} #jewelwater>.jewelwaterWrap>.head {width: 100%; margin: -50px auto 0; padding: 0; text-align: center;} #jewelwater>.jewelwaterWrap>.head>p {margin: 0 auto 20px; padding: 0; color: #595757; font-size: 18px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1.0; text-align: center;} #jewelwater>.jewelwaterWrap>.head>h4 {margin: 0 auto 50px; padding: 0; color: #35acc3; font-size: 52px; font-family: "Marcellus", '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1.3; text-align: center;} #jewelwater>.jewelwaterWrap>.head>h4>span {display: block; margin: 0 auto; padding: 0; font-size: 35%; letter-spacing: 0.15em;} #jewelwater>.jewelwaterWrap>.merit {width: 600px; margin: 0 auto 80px; padding: 0; text-align: center;} #jewelwater>.jewelwaterWrap>.merit>p {margin: 0 auto 30px; padding: 0; color: #595757; font-size: 24px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1.4; text-align: center;} #jewelwater>.jewelwaterWrap>.merit>ul {margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; text-align: center;} #jewelwater>.jewelwaterWrap>.merit>ul>li {width: 48%; padding: 10px 0; color: #595757; font-size: 18px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; letter-spacing: 0.02em; line-height: 1.0; text-align: left;} #jewelwater>.jewelwaterWrap>.merit>ul>li:before {content: "● "; font-size: 80%;} #jewelwater>.jewelwaterWrap>.content {width: 100%; margin: 0 auto; padding: 80px 0 20px; background-color: #35acc3;} #jewelwater>.jewelwaterWrap>.content>.contentWrap {width: 800px; margin: 0 auto; padding: 0; text-align: center;} #jewelwater>.jewelwaterWrap>.content>.contentWrap>.lpBox03 {width: 100%; margin: 0 auto 80px; padding: 0;} #jewelwater>.jewelwaterWrap>.content>.contentWrap>.lpBox03>h5 {margin: 0 auto 20px; list-style: none; font-size: 23px; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 400; color: #ffffff; line-height: 1.0; letter-spacing: 0.01em; text-align: justify;} #jewelwater>.jewelwaterWrap>.content>.contentWrap>.lpBox03>img {width: 100%; margin: 0 auto 15px;} #jewelwater>.jewelwaterWrap>.content>.contentWrap>.lpBox03>p {margin: 0 auto 15px; list-style: none; font-size: 14px; font-weight: 300; color: #ffffff; line-height: 1.8; letter-spacing: 0.01em; text-align: justify;} @media only screen and (max-width: 1200px) { #jewelwater {width: 100%; margin: 0 auto 100px; padding: 0;} #jewelwater>.kvWrap {width: 100%; margin: 0 auto 100px; padding: 0; position: relative;} #jewelwater>.kvWrap>img {width: 80%; margin: 0 0 0 auto;} #jewelwater>.kvWrap>.maincatch {margin: 0 auto; padding: 0; position: absolute; top: 80px; left: 77%;} #jewelwater>.conceptWrap {width: 95%; margin: 0 auto; padding: 0;} }