@charset "UTF-8"; /* Site Name: 白山眼鏡店 - HAKUSAN MEGANE Description: Style Version: 2017/04/15 1:46 Author: Nagano Syouten Creative */ /* =================================================================== CONTENTS 1: IMPORT 1-1: FONT 1-2: MIX IN 01 2: BODY AND BASE SETTING 2-1: HTML + BODY 2-2: OPACITY 0 WITH JQUERY FADE IN 2-3: GENERAL PARAMS 2-4: LINK SETTING 2-5: CONTAINER 2-6: LINK HOVER EFFECT 3: MAIN CONTENTS (COMMON) 3-1: COMMON SETTING 3-1-1 : INVIEW SETTING 3-1-2 : 要素全体のLink 3-1-3 : 眼鏡カテゴリータイトル 3-1-4 : SECTION TITLE H1 3-1-5 : PAGE TITLE (COMMON) 背景設定は各ページごと 3-1-6 : CATEGORY TITLE (COMMON) 背景設定は各ページごと 3-1-7 : ENTRY TITLE (COMMON) 3-1-8 : MODAL 3-1-9 : CATEGORY NAV (UL LI の詳細は下記) 3-1-10 : ENTRY BODY (COMMON) 3-1-11 : ENTRY FOOTER NAV (COMMON) 3-2: TOP PAGE CONTENTS 3-2-1: SECTION 01 MAIN VISUAL 3-2-2: SECTION 02 INFO 3-2-3: SECTION 03 ABOUT 3-2-4: SECTION 04 ORIGINAL FRAME 3-2-5: SECTION 05 SHOP 3-3: INFOMATION (WITH INDEX) 3-3-1 : INFO ARCHIVES Lasn 3 3-3-2 : INFO ARCHIVES Wrapper 3-3-3: INFO ARCHIVES 3-3-4 : INFO ENTRY TITLE 3-4: ORIGINAL FRAME + ORIGINAL GOODS 3-4-1 : TOP CATEGORY NAV 3-4-2 : 眼鏡カテゴリータイトル　(共通 Fontサイズのみ変更) 3-4-3 : CATEGORY 一覧 3-4-4 : ENTRY SLIDE 3-5: SHOP / ACCESS 3-5-1 : MORDAL BTN 3-5-2 : CATEGORY 一覧 3-5-3 : Google MAP 3-6: SITE MAP 3-7: ABOUT 3-7-1 : 基本背景色 3-7-2 : 基本設定 3-7-3 : TITLE COLUMN 3-7-4 : FIXED BACKGROUND 3-7-5 : PHILOSOPHY WRAPPER 3-7-6 : MEASURE WRAPPER 3-7-7 : MEASURE INNER 3-7-8 : VERTICAL ALIGN CENTER 3-7-9 : ARROW BOX 3-7-10 : INNER BOX (PHILOSOPHY) 3-7-11 : WRAPPER WITH CHILDREN 4: IMPORT 2 4-1: MIX IN 02 =================================================================== */ /* ==================================================== 1: IMPORT ==================================================== */ /* -------------------------------------------------------------------------------------------- 1-1: FONT -------------------------------------------------------------------------------------------- */ @import url("//fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"); @import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,800,300,700); @import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900); @import url(//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,400italic,700,700italic,300italic); /* -------------------------------------------------------------------------------------------- 1-2: MIX IN 01 -------------------------------------------------------------------------------------------- */ /* ミックスイン、@extend、CSS3など */ /* Site Name: 白山眼鏡店 - HAKUSAN MEGANE Description: MixIn Setting Version: 2017/04/20 3:25 Author: Nagano Syouten Creative */ /* =================================================================== CONTENTS 1: =================================================================== */ /* ==================================================== : ====================================================*/ /*==== Image Path Setting ==== */ /*==== Link Setting ==== */ /*==== Font Margin Padding Defult Setting ==== */ /*==== Font BG Color Setting ==== */ /*==== Font Basic Setting ==== */ /*==== Font Basic Effect .3s Setting ==== */ /*==== Font Size ==== */ /* ==================================================== 2: BODY AND BASE SETTING ==================================================== */ /* -------------------------------------------------------------------------------------------- 2-1: HTML + BODY -------------------------------------------------------------------------------------------- */ * { margin: 0; padding: 0; } html { font-size: 62.5%; margin: 0; padding: 0; height: 100%; } /*======================== iPad 用 アドレスバー固定で左ナビのバグを解除。 (with css_browser_selector.js) /*========================*/ html.ipad { overflow: hidden; /**/ } html.ipad.overflow-auto, html.android.overflow-auto { overflow: visible; } body { width: 100%; min-width: 1080px; height: 100%; margin: 0; padding: 0; /*@include BasicBGColor;*/ font-family: 'Muli','YuGothic','Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; font-size: 15px; font-size: 1.5rem; font-weight: 500; color: #000; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; backface-visibility: hidden; /*左ナビ用背景 ipad 対策*/ } body:after { position: fixed; top: 0; left: 0; width: 100%; height: 120%; content: ""; background: url(./Img/LeftBack.jpg) 0 0 no-repeat; background-size: 240px 100%; z-index: -1; } /* -------------------------------------------------------------------------------------------- 2-2: OPACITY 0 WITH JQUERY FADE IN -------------------------------------------------------------------------------------------- */ /*======================== /*========================*/ body, .Fade-Layer { opacity: 0; } /* -------------------------------------------------------------------------------------------- 2-3: GENERAL PARAMS -------------------------------------------------------------------------------------------- */ img { border: none; vertical-align: bottom; -ms-interpolation-mode: bicubic; } p { width: 100%; font-size: 14px; font-size: 1.4rem; line-height: 1.6; margin-bottom: 1.5em; } /* -------------------------------------------------------------------------------------------- 2-4: LINK SETTING -------------------------------------------------------------------------------------------- */ a { color: #374C83; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; transition-property: all; transition: .3s linear; } a:hover { color: #0080FF; text-decoration: none; } strong { font-weight: normal; } /* -------------------------------------------------------------------------------------------- 2-5: CONTAINER -------------------------------------------------------------------------------------------- */ #Container { width: 100%; /*min-width: 980px;*/ height: 100%; margin: 0 auto; padding: 0; position: relative; } /* -------------------------------------------------------------------------------------------- 2-6: LINK HOVER EFFECT -------------------------------------------------------------------------------------------- */ /*======================== Normal Link Effect .2s .3s ========================*/ .lEffect1 { transition-property: all; transition: .1s linear; } .lEffect2 { transition-property: all; transition: .2s linear; } .lEffect3 { transition-property: all; transition: .3s linear; } .Delay01 { animation-delay: .1s; } .Delay02 { animation-delay: .2s; } .Delay03 { animation-delay: .3s; } .Delay04 { animation-delay: .4s; } .Delay05 { animation-delay: .5s; } .Delay06 { animation-delay: .6s; } .Delay07 { animation-delay: .7s; } .Delay08 { animation-delay: .7s; } .Delay09 { animation-delay: .7s; } .Delay10 { animation-delay: .7s; } /*======================== Img Hover (画像要素に .hovereffectをつける) /*========================*/ .hEffect a:hover img { opacity: 0.7 !important; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; transition-property: all; transition: .4s linear; background: transparent; display: inline-block; zoom: 1; } /* ==================================================== 3: MAIN CONTENTS (COMMON) ==================================================== */ #MainContents { box-sizing: border-box; margin: 0; padding-left: 240px; /**/ /*margin-left: 240px;*/ width: 100%; min-width: calc(100%-240px); /*min-width: 740px; /* 1080-240 を最小値へ*/ /*border: 1px solid #999;/**/ } /* -------------------------------------------------------------------------------------------- 3-1: COMMON SETTING -------------------------------------------------------------------------------------------- */ /*======================== 3-1-1 : INVIEW SETTING ========================*/ .fadeInbox, .fadeInUp, .fadeInDownTitle { opacity: 0; } .fadeInUp img { mix-blend-mode: multiply; /* オーバーレイを指定 */ } /*======================== 3-1-2 : 要素全体のLink ========================*/ .hBox > a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: inherit; /*border: 1px solid red;/**/ } /*======================== 3-1-3 : 眼鏡カテゴリータイトル ========================*/ h2.OFTitle { font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; font-size: 22px; font-size: 2.2rem; font-weight: 500; /*====== Glass Category Title ====== */ } h2.OFTitle a { margin: 0 auto; display: table; text-align: center; color: #000; } h2.OFTitle a:hover { color: rgba(0, 0, 0, 0.7); } h2.OFTitle span { display: table-cell; font-size: 13px; font-size: 1.3rem; vertical-align: middle; padding-right: 15px; padding-top: 2px; font-weight: 400; } /* //h2.OFTitle */ /*======================== 3-1-4 : SECTION TITLE H1 /*========================*/ h1.SectionTitle { font-size: 20px; font-size: 2rem; line-height: 1; margin: 0 auto 60px; font-family: 'Muli',sans-serif; font-weight: 500; letter-spacing: 0.15em; /* トラッキング数値(150) ÷ 1000*/ background: url(./Img/H1Back.png) 50% 0 no-repeat; background-size: 43px 22px; padding-top: 30px; } .White { color: #FFF; } /*======================== 3-1-5 : PAGE TITLE (COMMON) 背景設定は各ページごと /*========================*/ #PageTitleArea { /*width: 100%;*/ height: 330px; /*min-width: 740px;*/ margin: 0; padding: 0; position: relative; /*border: 1px solid red;/**/ background-size: 100% auto; } #PageTitleArea h1 { font-size: 24px; font-size: 2.4rem; line-height: 1; margin: 0 auto; font-weight: 500; letter-spacing: 0.15em; /* トラッキング数値(150) ÷ 1000*/ background: url(./Img/H1Back.png) 50% 0 no-repeat; background-size: 43px 22px; padding-top: 30px; color: #FFF; position: relative; top: 50%; transform: translateY(-50%); } #PageTitleArea h1.Copy { padding-top: 40px; font-size: 22px; font-size: 2.2rem; } /*/#PageTitleArea*/ /*====== PAGE SETTING ====== */ .information { background: url(./Img/H1IFBack.jpg) 0 0 no-repeat; } .originalframes { background: url(./Img/H1OFBack.jpg) 0 0 no-repeat; } .originalgoods { background: url(./Img/H1OGBack.jpg) 0 0 no-repeat; } .shop { background: url(./Img/H1SPBack.jpg) 0 0 no-repeat; } .sitemap { background: url(./Img/H1STBack.jpg) 0 0 no-repeat; } .about { background: url(./Img/H1ABBack.jpg) 0 0 no-repeat; } /*=== FAQ (ADD) 2021/07/26 22:54 === */ #PageTitleArea.faq { background: url(./Img/Faq-HeaderBG.jpg) 50% 50% no-repeat; background-size: 100% auto; /*height: auto!important; position: relative*/ /*=== H1 === */ /*=== BG === */ } #PageTitleArea.faq .Inner { width: 40.66985%; height: 100%; top: 0; left: 0; position: absolute; } #PageTitleArea.faq h1.PageTitle { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); text-shadow: 1px 2px 3px #000; } #PageTitleArea.faq .BG img { width: 100%; } /*/#PageTitleArea.faq */ /*======================== 3-1-6 : CATEGORY TITLE (COMMON) 背景設定は各ページごと /*========================*/ #CateTitleArea { width: 100%; min-width: 740px; height: auto; margin: 0; padding: 100px 80px; position: relative; /*====== H2 設定 ====== */ /*====== 説明文 ====== */ /********************** (PC 1240px 以下) ********************/ /********************** (PC /1240px 以下) ********************/ /********************** (PC 1080px 以下) ********************/ /********************** (/PC 1080px 以下) ********************/ } #CateTitleArea h2.OFTitle { font-size: 36px; font-size: 3.6rem; display: table; font-weight: 500; text-align: center; /*margin: 0 auto 25px;*/ margin: 0 auto; } #CateTitleArea h2.OFTitle span { font-size: 20px; font-size: 2rem; padding-right: 15px; font-weight: 400; } #CateTitleArea .CateDescription { font-size: 14px; font-size: 1.4rem; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; line-height: 2; margin: 0; padding: 0 20%; } @media screen and (min-width: 1240px) { #CateTitleArea .CateDescription { padding: 0 30%; } } @media screen and (max-width: 1080px) { #CateTitleArea .CateDescription { padding: 0 5%; } } /* //#CateTitleArea */ /*======================== 3-1-7 : ENTRY TITLE (COMMON) /*========================*/ #EntryTitleArea { width: 100%; min-width: 740px; height: auto; margin: 0; padding: 95px 0 30px; position: relative; /*background: red; /**/ /*====== H2 設定 ====== */ } #EntryTitleArea h2.OFTitle { font-size: 30px; font-size: 3rem; text-align: center; margin: 0 auto 0px; } /*======================== 3-1-8 : MODAL /*========================*/ /*====== モーダルボタン ====== */ .TopCaution { top: 40px; right: 30px; position: absolute; height: 45px; /*Add 2018/07/01 12:49*/ } .TopCaution a { border: 2px solid #c6b081; text-decoration: none; width: 175px; /*Add 2018/07/01 12:49*/ height: 45px; /*Add 2018/07/01 12:49*/ -webkit-display: flex; /*Add 2018/07/01 12:49*/ display: flex; /*Add 2018/07/01 12:49*/ -webkit-align-items: center; /*Add 2018/07/01 12:49*/ align-items: center; /*Add 2018/07/01 12:49*/ -webkit-ustify-content: center; /*Add 2018/07/01 12:49*/ justify-content: center; /*Add 2018/07/01 12:49*/ line-height: 0; background: url(./Img/Arrowo01_Nomal.png) 100% 48% no-repeat; /**/ font-size: 13px; font-size: 1.3rem; color: #c6b081; border-radius: 3px 3px 3px 3px; font-weight: 800; cursor: pointer; position: relative; } .TopCaution a span { margin-top: -2px; padding-right: 18px; } .TopCaution a:hover { background-image: url(./Img/Arrowo01_Over.png); background-color: #c6b081; color: #000; } /* //.TopCaution */ /*====== モーダルボタン ====== */ .TopCaution2 { top: 105px; right: 30px; position: absolute; height: 45px; /*Add 2018/07/01 12:49*/ } .TopCaution2 a { border: 2px solid #c6b081; text-decoration: none; width: 175px; /*Add 2018/07/01 12:49*/ height: 45px; /*Add 2018/07/01 12:49*/ -webkit-display: flex; /*Add 2018/07/01 12:49*/ display: flex; /*Add 2018/07/01 12:49*/ -webkit-align-items: center; /*Add 2018/07/01 12:49*/ align-items: center; /*Add 2018/07/01 12:49*/ -webkit-ustify-content: center; /*Add 2018/07/01 12:49*/ justify-content: center; /*Add 2018/07/01 12:49*/ line-height: 0; background: url(./Img/Arrowo01_Nomal.png) 100% 48% no-repeat; /**/ font-size: 13px; font-size: 1.3rem; color: #c6b081; border-radius: 3px 3px 3px 3px; font-weight: 800; cursor: pointer; position: relative; } .TopCaution2 a span { margin-top: -2px; padding-right: 15px; } .TopCaution2 a:hover { background-image: url(./Img/Arrowo01_Over.png); background-color: #c6b081; color: #000; } /* //.TopCaution */ /* == ADD 2018/07/01 13:02 == */ .MordalMore { border-radius: 3px 3px 3px 3px; height: 45px; width: 250px; margin: -15px auto 65px; } .MordalMore a { width: 100%; height: 45px; -webkit-display: flex; /*Add 2018/07/01 12:49*/ display: flex; /*Add 2018/07/01 12:49*/ -webkit-align-items: center; /*Add 2018/07/01 12:49*/ align-items: center; /*Add 2018/07/01 12:49*/ -webkit-ustify-content: center; /*Add 2018/07/01 12:49*/ justify-content: center; /*Add 2018/07/01 12:49*/ border: 1px solid #fff; color: white; } .MordalMore a:hover { color: white; background: rgba(255, 255, 255, 0.2); } /*====== SPNNER ====== */ #Stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.9); z-index: 1000; display: none; /**/ /*====== SETTING ====== */ /* //.Spinner */ } #Stage .Spinner { width: 500px; height: 500px; position: absolute; top: 50%; bottom: 0; right: 0; left: 0; margin: -250px auto 0; /*====== Bounce Layer ====== */ } #Stage .Spinner .Double-Bounce1, #Stage .Spinner .Double-Bounce2 { width: 500px; height: 500px; border-radius: 50%; /*background: rgba(255,255,255,.2); /*background: -webkit-linear-gradient(to bottom, #182848, #4b6cb7); background: linear-gradient(to bottom, #182848, #4b6cb7);*/ background-color: rgba(255, 241, 202, 0.8); -webkit-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -moz-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -ms-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -o-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); /*z-index: 5000;*/ transition-property: transform, opacity; ransition-duration: 2.5s; transition-timing-function: ease-out; -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 2.5s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform, opacity; -moz-transition-duration: 2.5s; -moz-transition-timing-function: ease-out; -ms-transition-property: -ms-transform, opacity; -ms-transition-duration: 2.5s; -ms-transition-timing-function: ease-out; -o-transition-property: -o-transform, opacity; -o-transition-duration: 2.5s; -o-transition-timing-function: ease-out; transition-property: transform, opacity; opacity: 0.3; position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } #Stage .Spinner .Double-Bounce1:after { border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.2); content: " "; } #Stage .Spinner .Double-Bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } /* //#Stage */ /*====== モーダル ====== */ .Modal-Content { position: fixed; display: none; z-index: 2; width: 80%; max-width: 860px; margin: 0; color: #FFF; z-index: 10001; font-family: 'Muli','YuGothic','Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; } .Modal-Content h1 { font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; font-size: 24px; font-size: 2.4rem; letter-spacing: 0.1em; font-weight: 400; margin-bottom: 60px; } .Modal-Content p { text-align: center; padding: 0; margin-bottom: 25px; line-height: 2.42; /* 34/14*/ } .Modal-Content p:last-of-type { margin-bottom: 60px; } /* //.Modal-Content */ /*====== モーダル OVER LAY ====== */ .Modal-Overlay { z-index: 1; display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.8); cursor: pointer; } .ModalBtmClose { font-size: 18px; font-size: 1.8rem; transition-property: all; transition: .2s linear; } .ModalBtmClose a { display: block; height: 30px; line-height: 30px; margin: 0 auto; text-align: center; cursor: pointer; text-decoration: none; color: #FFF; background: transparent; } .ModalBtmClose a:hover { opacity: 0.8; } .ModalBtmClose a img { padding-right: 15px; } /* //.ModalBtmClose*/ /*======================== 3-1-9 : CATEGORY NAV (UL LI の詳細は下記) /*========================*/ #TABCateNav { margin: 0; height: 75px; min-width: 740px; font-size: 16px; font-size: 1.6rem; /*-------- Font Setting -------- */ font-weight: 500; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; /*====== 共通 Inner ====== */ /*-------- -------- */ /*====== 共通 Li (Ul は下記で) ====== */ /* // li */ /*-------- Current -------- */ /* //li.Current a */ } #TABCateNav .Inner { width: 100%; height: 75px; display: flex; -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */ align-items: center; /* 縦方向中央揃え */ webkit-justify-content: center; /* 横方向中央揃え（Safari用） */ justify-content: center; /* 横方向中央揃え */ } #TABCateNav span { font-size: 10px; font-size: 1rem; padding-right: 5px; font-weight: 500; } #TABCateNav li { float: left; border-right: 1px solid #FFF; /*-------- A -------- */ /* // a */ /*-------- LAST Border None -------- */ } #TABCateNav li a { color: #FFF; font-weight: 600; display: block; width: 100%; height: 75px; background-color: #ADACA4; /* // &:hover */ } #TABCateNav li a:hover { background-color: #FFF; color: #000; position: relative; /*-------- Arrow Down -------- */ } #TABCateNav li a:hover:after { content: ' '; top: 0; right: 20px; position: absolute; height: 75px; width: 20px; background: url(./Img/TabArrow.png) 100% 50% no-repeat; } #TABCateNav li:last-child { border-right: none; } #TABCateNav li.Current a { color: #000; background-color: #FFF; position: relative; /*-------- Arrow Down -------- */ } #TABCateNav li.Current a:after { content: ''; top: 0; right: 20px; position: absolute; height: 75px; width: 20px; background: url(./Img/TabArrow.png) 100% 50% no-repeat; } /* //#TABCateNav */ /*======================== 3-1-10 : ENTRY BODY (COMMON) /*========================*/ #EntryBody { margin: 0 auto 90px; /*width: 100%; */ max-width: 850px; /*min-width: 740px; /* 1080-240 を最小値へ*/ overflow: hidden; font-size: 14px; font-size: 1.4rem; /*border: 1px solid #999;/**/ text-align: center; /********************** (PC 1240px 以下) ********************/ /********************** (PC /1240px 以下) ********************/ /*====== DETAIL TABLE ====== */ /* //table.DetailTable */ } @media screen and (max-width: 1240px) { #EntryBody { margin-left: 35px; margin-right: 35px; min-width: none; } } #EntryBody table.DetailTable { margin: 0 auto 15px; font-size: 14px; font-size: 1.4rem; text-align: left; width: 100%; /* //tr */ } #EntryBody table.DetailTable tr { border-bottom: 1px solid #E4E4E4; /* //td */ } #EntryBody table.DetailTable tr:first-child { border-top: 1px solid #E4E4E4; } #EntryBody table.DetailTable tr th { padding: 20px 0; width: 135px; background-color: #F8F7F4; text-align: center; vertical-align: middle; line-height: 1; font-weight: 500; border-bottom: 1px solid #E4E4E4; } #EntryBody table.DetailTable tr td { padding: 20px 25px; line-height: 1.6; font-weight: 500; text-align: left; background-color: #FFF; border-bottom: 1px solid #E4E4E4; } #EntryBody table.DetailTable tr td .Price { font-weight: 500; font-size: 16px; font-size: 1.6rem; } #EntryBody .OFCaution { font-size: 12px; font-size: 1.2rem; margin: 0 0 15px; text-align: left; color: #444444; } #EntryBody img { width: 100%; max-width: 850px; margin-bottom: 30px; height: auto; } #EntryBody p { font-size: 14px; font-size: 1.4rem; line-height: 2.1; margin-bottom: 30px; text-align: justify; text-justify: distribute; text-align-last: left; } /* //#EntryBody */ /* 2017/06/07 17:26 追加 */ #EntryBody .cell-overview p { line-height: 1.8; } #EntryBody .cell-overview p:last-child { margin-bottom: 0; } /*======================== 3-1-11 : ENTRY FOOTER NAV (COMMON) /*========================*/ #EntryFooterNav { background: #F8F7F4; height: 100px; width: 100%; padding: 30px 0 30px; /********************** (PC 1240px 以下) ********************/ /********************** (PC /1240px 以下) ********************/ /*====== Ol====== */ /* //ol */ } @media screen and (max-width: 1240px) { #EntryFooterNav { padding-left: 35px; padding-right: 35px; } } #EntryFooterNav ul.NewNav { margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; /*border: 1px solid red;*/ text-align: center; display: -webkit-box; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } #EntryFooterNav ul.NewNav li { height: 40px; font-weight: 400; transition-property: all; transition: .1s linear; position: relative; text-align: cener; /*=== Entry Prev ===*/ /*=== Entry Prev ===*/ /*=== LIST TOP ===*/ } #EntryFooterNav ul.NewNav li a { transition-property: all; transition: .1s linear; } #EntryFooterNav ul.NewNav li.EntryPrev2 { height: 40px; width: 40px; } #EntryFooterNav ul.NewNav li.EntryPrev2 a { background: url(./Img/EntryArrowLeft02.png) 50% 50% no-repeat; border: 1px solid #CFCEC9; border-right: none; /**/ } #EntryFooterNav ul.NewNav li.EntryPrev2 a:hover { background: url(./Img/EntryArrowLeft02_hover.png) 50% 50% no-repeat #C4C3BB; border: 1px solid #C4C3BB; border-right: none; /**/ } #EntryFooterNav ul.NewNav li.EntryNext2 { height: 40px; width: 40px; } #EntryFooterNav ul.NewNav li.EntryNext2 a { background: url(./Img/EntryArrowRight02.png) 50% 50% no-repeat; border: 1px solid #CFCEC9; border-left: none; /**/ } #EntryFooterNav ul.NewNav li.EntryNext2 a:hover { background: url(./Img/EntryArrowRight02_hover.png) 50% 50% no-repeat #C4C3BB; border: 1px solid #C4C3BB; border-left: none; /**/ } #EntryFooterNav ul.NewNav li.ListTop { letter-spacing: 0.1em; /* トラッキング数値(110) ÷ 1000*/ } #EntryFooterNav ul.NewNav li.ListTop a { height: 40px; display: block; padding: 11px 25px 0 50px; border: 1px solid #CFCEC9; /**/ font-size: 14px; font-size: 1.4rem; background: url(./Img/EntryArrowTop02.png) 23px 50% no-repeat; color: #000; } #EntryFooterNav ul.NewNav li.ListTop a:hover { color: #FFF; border: 1px solid #C4C3BB; /**/ background: url(./Img/EntryArrowTop02_hover.png) 23px 50% no-repeat #C4C3BB; } #EntryFooterNav ul.NewNav li.ListTop:hover { color: #FFF; } #EntryFooterNav ol { margin: 0 auto; width: 100%; max-width: 850px; overflow: hidden; /*background: #ccc;*/ /*====== li ====== */ /* //li */ /* //li.EntryPrev */ /* //li.EntryNext */ } #EntryFooterNav ol li { height: 40px; padding: 10px 0 0; margin: 0; float: left; width: 50%; /* 未対応ブラウザ用フォールバック */ font-size: 14px; font-size: 1.4rem; font-weight: 600; transition-property: all; transition: .3s linear; position: relative; /*====== 中央揃え Inner ====== */ /*====== a はhBox にて要素全体へ ====== */ /*====== Hover 一括 ====== */ } #EntryFooterNav ol li .Inner { display: table; } #EntryFooterNav ol li .Inner span { display: table-cell; vertical-align: middle; padding-top: 3px; width: 100%; } #EntryFooterNav ol li a { /*display: block;*/ color: #000; } #EntryFooterNav ol li:hover span { text-decoration: underline; } #EntryFooterNav ol li:hover img { opacity: .8; } #EntryFooterNav ol li.EntryPrev { display: block; text-align: left; /*border: 1px solid #999;*/ } #EntryFooterNav ol li.EntryPrev span { padding-left: 10px; } #EntryFooterNav ol li.EntryNext { display: block; text-align: right; /*border: 1px solid #990000;*/ } #EntryFooterNav ol li.EntryNext span { padding-right: 10px; } /* //#EntryFooterNav */ /* -------------------------------------------------------------------------------------------- 3-2: TOP PAGE CONTENTS -------------------------------------------------------------------------------------------- */ /*======================== 3-2-1: SECTION 01 MAIN VISUAL /*========================*/ #IndexMainImgSec01 { min-width: 100%; height: 100vh; background: url(./Img/MainVisual01.jpg) 100% 100%; background-size: cover; position: relative; /*====== Down Arrow ====== */ /* //.DownArrow */ /********************** (PC 1080px 以下) ********************/ /********************** (/PC 1080px 以下) ********************/ /*====== Main Img Setting ====== */ } #IndexMainImgSec01 .DownArrow { bottom: 30px; left: 0; position: absolute; width: 100%; } #IndexMainImgSec01 .DownArrow a { width: 43px; height: 43px; background: #FFF; display: inline-block; border-radius: 100%; padding-top: 10px; } @media screen and (max-width: 1080px) { #IndexMainImgSec01 .DownArrow { top: none; bottom: 5%; } } #IndexMainImgSec01 #IndexMainImg img { width: 100vw; height: auto; min-height: 100vh; min-width: 740px; } /* //#IndexMainImg */ /*======================== 3-2-2: SECTION 02 INFO /*========================*/ #IndexInfoSec02 { padding: 120px 0 100px; } /*======================== 3-2-3: SECTION 03 ABOUT /*========================*/ #IndexAboutSec03 { padding: 150px 0 130px; background: url(./Img/IndexAboutBack.jpg) 0 0 no-repeat; background-size: cover; /*background-attachment: fixed;*/ color: #FFF; text-align: center; /*====== COPY H2 ====== */ /*====== TEXT ====== */ } #IndexAboutSec03 h2 { font-size: 20px; font-size: 2rem; margin: 0 auto 30px; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; font-weight: 400; letter-spacing: 0.2em; /* トラッキング数値(150) ÷ 1000*/ } #IndexAboutSec03 p { font-size: 14px; font-size: 1.4rem; line-height: 46px; /*30/14行送り÷文字サイズ*/ text-align: center; margin-bottom: 0; } #IndexAboutSec03 p:last-of-type { margin-bottom: 55px; } /* //#IndexAboutSec03 */ /*======================== 3-2-4: SECTION 04 ORIGINAL FRAME /*========================*/ #IndexOriginalFrameSec04 { padding: 60px 0 0px; margin: 0 auto 0; overflow: hidden; /*====== Ul Li ====== */ /* //ul */ /********************** (PC 1080px 以下) ********************/ } #IndexOriginalFrameSec04 ul { width: 100%; margin: 0; overflow: hidden; height: 580px; /* //#li */ /*====== Hover は一括で変化させる。 ====== */ /*// IE10以上 */ /********************** (PC 1140px 以下) ********************/ /********************** (/PC 1140px 以下) ********************/ } #IndexOriginalFrameSec04 ul li { width: 50%; height: 290px; float: left; display: none; background: #FFF\9 ; /* IE10以下 以上は下記*/ overflow: hidden; position: relative; padding-top: 20px; box-sizing: border-box; margin: 0; /*====== Glass Img ====== */ /*====== Title Wrap (詳細は h2.OFTitle) ====== */ } #IndexOriginalFrameSec04 ul li figure { top: 40px; position: absolute; /**/ opacity: 0; width: 100%; transition-duration: 1.2s; transition-property: all; transition: 0.8 linear; } #IndexOriginalFrameSec04 ul li figure.fadeInUp2 { top: 20px; opacity: 1; } #IndexOriginalFrameSec04 ul li img { /*width: 100%;*/ width: 450px; transition-property: all; transition: .2s linear; cursor: pointer; mix-blend-mode: multiply; /* オーバーレイを指定 */ } #IndexOriginalFrameSec04 ul li .OFTitleWrap { position: absolute; top: 70px; width: 100%; z-index: 2; /*border: 1px solid red;*/ } #IndexOriginalFrameSec04 ul li:hover img, #IndexOriginalFrameSec04 ul li.hover img { opacity: 0.7; } #IndexOriginalFrameSec04 ul li:hover h2.OFTitle a, #IndexOriginalFrameSec04 ul li.hover h2.OFTitle a { opacity: 0.6; } #IndexOriginalFrameSec04 ul li:nth-of-type(1) { background: url(./Img/IndexOFBack01.png) 50% 100% repeat-x; background: none\9; } #IndexOriginalFrameSec04 ul li:nth-of-type(2) { background: url(./Img/IndexOFBack02.png) 50% 100% repeat-x; background: none\9; } #IndexOriginalFrameSec04 ul li:nth-of-type(3) { background: url(./Img/IndexOFBack03.png) 50% 100% repeat-x; background: none\9; } #IndexOriginalFrameSec04 ul li:nth-of-type(4) { background: url(./Img/IndexOFBack04.png) 50% 100% repeat-x; background: none\9; } @media all and (-ms-high-contrast: none) { #IndexOriginalFrameSec04 ul { /* IE10以上 */ } #IndexOriginalFrameSec04 ul li { background: #FFF; background: none\9; } #IndexOriginalFrameSec04 ul li:nth-of-type(1), #IndexOriginalFrameSec04 ul li:nth-of-type(2), #IndexOriginalFrameSec04 ul li:nth-of-type(3), #IndexOriginalFrameSec04 ul li:nth-of-type(4) { background: #FFF; background: none\9; } } @supports (-ms-ime-align: auto) { #IndexOriginalFrameSec04 ul li:nth-of-type(1), #IndexOriginalFrameSec04 ul li:nth-of-type(2), #IndexOriginalFrameSec04 ul li:nth-of-type(3), #IndexOriginalFrameSec04 ul li:nth-of-type(4) { background: #FFF; background: none; } } @media screen and (max-width: 1140px) { #IndexOriginalFrameSec04 ul li { width: 100%; float: none; } } @media screen and (max-width: 1140px) { #IndexOriginalFrameSec04 ul { height: 1160px; } } /* //#IndexOriginalFrameSec04 */ /*======================== 3-2-5: SECTION 05 SHOP /*========================*/ #IndexShopSec05 { padding: 140px 0 140px; background: url(./Img/IndexShopBack.jpg) 0 0 no-repeat; background-size: cover; position: relative; color: #FFF; /*====== COPY BOX ====== */ /* //ul */ } #IndexShopSec05 ul { margin: 0 auto 30px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; -webkit-justify-content: center; /* //li */ } #IndexShopSec05 ul li { /*display: inline-block;*/ opacity: 0; margin: 0 15px 30px; position: relative; width: 160px; height: 160px; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; font-size: 18px; font-size: 1.8rem; font-weight: 400; border: 1px solid white; /*====== FlexBox Inner ====== */ /* //.Inner */ } #IndexShopSec05 ul li .Inner { display: -webkit-flex; /* Safari用 */ display: flex; -webkit-justify-content: center; /* Safari用 */ justify-content: center; -webkit-align-items: center; /* Safari用 */ align-items: center; width: 100%; height: 100%; /*====== FlexBox Inner ====== */ } #IndexShopSec05 ul li .Inner a { background: rgba(255, 255, 255, 0); color: #FFF; } #IndexShopSec05 ul li .Inner a:hover { background: rgba(255, 255, 255, 0.3); } #IndexShopSec05 ul li .Inner h2 { width: 100%; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; font-size: 17px; font-size: 1.7rem; font-weight: 400; display: block; line-height: 1.6; /*border: 1px solid red;*/ } /* //#IndexShopSec04 */ /* -------------------------------------------------------------------------------------------- 3-3: INFOMATION (WITH INDEX) -------------------------------------------------------------------------------------------- */ /*======================== 3-3-1 : INFO ARCHIVES Lasn 3 /*========================*/ #PickUpWrapper { padding: 90px 0 20px; width: 100%; text-align: center; background: #F8F7F4; /*====== Title ====== */ /*====== Inner ====== */ /* //PickUp-Inner */ } #PickUpWrapper h2 { display: block; font-size: 20px; font-size: 2rem; color: #000; margin-bottom: 40px; font-weight: 700; font-family: 'Muli',sans-serif; letter-spacing: 0.15em; text-align: center; } #PickUpWrapper .PickUp-Inner { /*border: 1px solid red;*/ margin: 0 auto 45px; width: 100%; max-width: 850px; overflow: hidden; /********************** (PC 1140px 以下) ********************/ /********************** (PC /1140px 以下) ********************/ /*====== 3 Column Entry ====== */ /* //PickUpEntry */ } @media screen and (max-width: 1140px) { #PickUpWrapper .PickUp-Inner { margin-left: 35px; margin-right: 35px; } } #PickUpWrapper .PickUp-Inner .PickUpEntry { /*border: 1px solid #999;/**/ margin-bottom: 15px; overflow: hidden; width: calc(100% / 3 - 20px); height: auto; float: left; position: relative; text-align: left; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; font-size: 14px; font-size: 1.4rem; /*====== 真ん中 margin ====== */ /*====== Img Area ====== */ /*====== 日付 ====== */ /*====== タイトル ====== */ } #PickUpWrapper .PickUp-Inner .PickUpEntry a { color: #000; } #PickUpWrapper .PickUp-Inner .PickUpEntry a:hover { color: #000; } #PickUpWrapper .PickUp-Inner .PickUpEntry:nth-of-type(2) { margin-left: 30px; margin-right: 30px; } #PickUpWrapper .PickUp-Inner .PickUpEntry:nth-of-type(5) { margin-left: 30px; margin-right: 30px; } #PickUpWrapper .PickUp-Inner .PickUpEntry .PickUpImg { width: 100%; height: 160px; background: url(./Img/EntryBack.jpg) 50% 50% no-repeat #FFF; margin: 0 auto 20px; overflow: hidden; } #PickUpWrapper .PickUp-Inner .PickUpEntry .PickUpImg img { width: 100%; } #PickUpWrapper .PickUp-Inner .PickUpEntry .PickUpImg img { -webkit-backface-visibility: hidden; /* 追加 */ } #PickUpWrapper .PickUp-Inner .PickUpEntry a .InfoEnDate { margin-bottom: 10px; line-height: 1; color: #000; } a:hover #PickUpWrapper .PickUp-Inner .PickUpEntry a .InfoEnDate { color: #000; } #PickUpWrapper .PickUp-Inner .PickUpEntry h3 { font-weight: 500; line-height: 1.6; color: #000; } #PickUpWrapper .PickUp-Inner .PickUpEntry h3 a { color: #000; } #PickUpWrapper .PickUp-Inner .PickUpEntry h3 a:hover { text-decoration: underline; } #PickUpWrapper .PickUp-Inner .hBox a:hover { /*background: rgba(255,255,255, .3);*/ } #PickUpWrapper .PickUp-Inner a:hover h3 { text-decoration: underline; } /* //#PickUpWrapper */ /*== Copy Entries (ADD 2018/07/01 13:59) == */ #CopyEntries-Wrapper { padding: 90px 0 20px; width: 100%; text-align: center; background: #F8F7F4; /*====== Title ====== */ /* .CopyEntries-Inner */ } #CopyEntries-Wrapper h2 { display: block; font-size: 20px; font-size: 2rem; color: #000; margin-bottom: 40px; font-weight: 700; font-family: 'Muli',sans-serif; letter-spacing: 0.15em; text-align: center; } #CopyEntries-Wrapper .CopyEntries-Inner { margin: 0 auto 45px; width: 100%; max-width: 900px; position: relative; -webkit-display: flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; /*====== 3 Column Entry ====== */ /* /.CopyEntry */ } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry { /*border: 1px solid #999;/**/ margin: 0 14px 15px; width: calc(100% / 3 - 0px); overflow: hidden; width: 30%; height: auto; float: left; position: relative; text-align: left; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; font-size: 14px; font-size: 1.4rem; /*====== Img Area ====== */ /*====== 日付 ====== */ /*====== タイトル ====== */ } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry a { color: #000; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry a:hover { color: #000; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry .PickUpImg { width: 100%; height: 160px; background: url(./Img/EntryBack.jpg) 50% 50% no-repeat #FFF; margin: 0 auto 20px; overflow: hidden; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry .PickUpImg img { width: 100%; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry .PickUpImg img { -webkit-backface-visibility: hidden; /* 追加 */ } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry a .InfoEnDate { margin-bottom: 10px; line-height: 1; color: #000; } a:hover #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry a .InfoEnDate { color: #000; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry h3 { font-weight: 500; line-height: 1.6; color: #000; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry h3 a { color: #000; } #CopyEntries-Wrapper .CopyEntries-Inner .CopyEntry h3 a:hover { text-decoration: underline; } #CopyEntries-Wrapper .CopyEntries-Inner .hBox a:hover { /*background: rgba(255,255,255, .3);*/ } #CopyEntries-Wrapper .CopyEntries-Inner a:hover h3 { text-decoration: underline; } /* #CopyEntries-Wrapper */ /*======================== 3-3-2 : INFO ARCHIVES Wrapper /*========================*/ #InfoWrapper { padding: 80px 0 30px; width: 100%; background: #FFF; } /*======================== 3-3-3: INFO ARCHIVES /*========================*/ ul#InfoArchives { border-top: 1px solid #e5e5e5; margin: 0 auto 60px; max-width: 850px; overflow: hidden; /********************** (PC 1140px 以下) ********************/ /********************** (PC /1140px 以下) ********************/ /*====== LIST SETTING ====== */ /* //li */ } @media screen and (max-width: 1140px) { ul#InfoArchives { margin-left: 35px; margin-right: 35px; } } ul#InfoArchives li { line-height: 48px; border-bottom: 1px solid #e5e5e5; text-align: left; padding-left: 20px; margin: 0; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; position: relative; font-size: 14px; font-size: 1.4rem; } ul#InfoArchives li a { display: block; color: #000; /*====== CHILD SETTING ====== */ } ul#InfoArchives li a span, ul#InfoArchives li a h3 { display: inline-block; } ul#InfoArchives li a span { padding-right: 45px; /*background: #EFEFEF;*/ } ul#InfoArchives li a h3 { font-weight: 500; } ul#InfoArchives li a img { position: absolute; top: 15px; right: 20px; } ul#InfoArchives li a:hover h3 { text-decoration: underline; } /* //ul#InfoArchives */ /*======================== 3-3-4 : INFO ENTRY TITLE /*========================*/ /*== InforCaution == */ .InfoCaution { margin: 65px auto 0; max-width: 850px; width: 96%; background: rgba(255, 255, 255, 0.6); border: 3px solid #d50000; padding: 35px; line-height: 1.6; } .InfoCaution p:last-of-type { margin-bottom: 0; } #InfoEntryTitleArea { border-bottom: 1px solid #e5e5e5; padding: 100px 0 30px; margin: 0 auto 30px; max-width: 850px; text-align: center; /********************** (PC 1240px 以下) ********************/ /********************** (PC /1140px 以下) ********************/ /*====== DATE ====== */ /*====== TITLE ====== */ } @media screen and (max-width: 1240px) { #InfoEntryTitleArea { margin-left: 35px; margin-right: 35px; } } #InfoEntryTitleArea .IFEntryDate { font-size: 14px; font-size: 1.4rem; display: table-cell; width: 105px; vertical-align: middle; font-weight: 600; text-align: left; } #InfoEntryTitleArea h2 { font-size: 20px; font-size: 2rem; font-weight: 500; display: table-cell; vertical-align: middle; line-height: 1.6; text-align: left; } /*ADD 2017/06/20 21:07 */ /*======================== 3-3- : Info Entry Table /*========================*/ .InfoEntry { /* 2017/06/15 16:11 追加 */ } .InfoEntry table { /*border: 1px solid red;*/ margin: 0px auto 45px; width: 100%; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; font-size: 14px; font-size: 1.4rem; border-left: 1px solid #000; /**/ } .InfoEntry table:first-child { margin: 45px auto 0px; font-size: 14px; font-size: 1.4rem; /*background-color: #F8F7F4;*/ border-top: 1px solid #000; /**/ } .InfoEntry table:first-child td { font-size: 15px; font-size: 1.5rem; /*border-bottom: 1px solid #000; /**/ } .InfoEntry table th, .InfoEntry table td { font-size: 14px; font-size: 1.4rem; text-align: center; padding: 12px; border-right: 1px solid #000; font-weight: normal; vertical-align: middle; line-height: 1.5; border-bottom: 1px solid #000; /**/ } /* 2017/07/20 14:00 追加 */ #InfoEntryBody p { margin-bottom: 10px; line-height: 1.5; } /* -------------------------------------------------------------------------------------------- 3-4: ORIGINAL FRAME + ORIGINAL GOODS -------------------------------------------------------------------------------------------- */ /*======================== 3-4-1 : TOP CATEGORY NAV /*========================*/ ul#OFTopProductBox { margin: 0; width: 100%; /* //ul#OFTopProductBox li */ /*====== LIST HOVER SETTING ====== */ /********************** (PC 1140px 以下) ********************/ /********************** (PC /1140px 以下) ********************/ } ul#OFTopProductBox li { margin: 0; width: 100%; height: 340px; overflow: hidden; position: relative; border-bottom: 1px solid #EEEDE8; /*====== LEFT BOX SETTING (TEXT)====== */ /* //OFTPLeftBox */ /*====== RIHGT BOX SETTING (IMG)====== */ /* //OFTPRightBox */ /*// IE10以上 */ /********************** (PC 1370px 以下 可変) ********************/ /********************** (/PC 1370px 以下 可変) ********************/ /********************** (PC 1140px 以下) ********************/ /********************** (/PC 1140px 以下) ********************/ } ul#OFTopProductBox li:last-child { border-bottom: none; } ul#OFTopProductBox li .OFTPLeftBox { width: 560px; height: 340px; display: table-cell; background: url(./Img/OFTPLeftBoxBack.jpg) 100% 100% #F5F4F0; background-repeat: repeat-x; vertical-align: middle; float: left; padding: 0 130px; /*====== INNER ====== */ /* //Inner */ } ul#OFTopProductBox li .OFTPLeftBox .Inner { position: relative; top: 50%; transform: translateY(-50%); /*======================== 3-4-2 : 眼鏡カテゴリータイトル　(共通 Fontサイズのみ変更) ========================*/ /* //h2.OFTitle */ /*====== 説明文 ====== */ } ul#OFTopProductBox li .OFTPLeftBox .Inner h2.OFTitle { font-size: 32px; font-size: 3.2rem; font-weight: 500; line-height: 1; /*margin-bottom: 30px;*/ } ul#OFTopProductBox li .OFTPLeftBox .Inner h2.OFTitle span { padding-top: 5px; font-weight: 400; font-size: 18px; font-size: 1.8rem; } ul#OFTopProductBox li .OFTPLeftBox .Inner .OFDescription { font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; font-size: 14px; font-size: 1.4rem; font-weight: 500; line-height: 1.7; text-align: justify; text-justify: distribute; text-align-last: left; } ul#OFTopProductBox li .OFTPRightBox { float: right; width: -webkit-calc(100% - 560px); /* 2013年10月以前のSafariをサポートする場合 */ width: calc(100% - 560px); height: 340px; /**/ background: url(./Img/OFTPRightBoxBack.jpg) 50% 100% #F9F9F9; background-repeat: repeat-x; position: relative; /*------------------- FIGURE -------------------*/ /*------------------- 左矢印 -------------------*/ } ul#OFTopProductBox li .OFTPRightBox figure { /*width: 563px;*/ position: static; height: 340px; /*------------------- 画像設定 -------------------*/ } ul#OFTopProductBox li .OFTPRightBox figure img { cursor: pointer; mix-blend-mode: multiply; /* オーバーレイを指定 */ width: 563px; margin-top: -20px; /*376-340*/ } ul#OFTopProductBox li .OFTPRightBox:after { content: ''; width: 24px; background: url(./Img/OFTPRightBoxArrow.png) 0% 50% no-repeat; top: 0; left: 0; position: absolute; height: 340px; } @media all and (-ms-high-contrast: none) { ul#OFTopProductBox li { /* IE10以上 乗算なし */ } ul#OFTopProductBox li .OFTPRightBox { background: #FFF; background: none\9; } } @supports (-ms-ime-align: auto) { ul#OFTopProductBox li .OFTPRightBox { background: #FFF; background: none; } } @media screen and (max-width: 1370px) { ul#OFTopProductBox li .OFTPLeftBox { width: -webkit-calc(100% - 560px); /* 2013年10月以前のSafariをサポートする場合 */ width: calc(100% - 560px); padding: 0 5%; } ul#OFTopProductBox li .OFTPRightBox { width: 560px; } } @media screen and (max-width: 1140px) { ul#OFTopProductBox li .OFTPLeftBox { width: 100%; float: none; padding: 0px 10%; /**/ height: 280px; overflow: hidden; } ul#OFTopProductBox li .OFTPLeftBox .Inner { /*position: static;*/ top: 0; transform: translateY(0); } ul#OFTopProductBox li .OFTPRightBox { width: 100%; float: none; /*height: auto;*/ position: relative; } ul#OFTopProductBox li .OFTPRightBox figure { width: 563px; overflow: hidden; background: url(./Img/OFTPRightBoxBack.jpg) 50% 100% #FAF9F7; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); } ul#OFTopProductBox li .OFTPRightBox figure img { mix-blend-mode: multiply; /* オーバーレイを指定 */ } ul#OFTopProductBox li .OFTPRightBox:after { display: none; } } ul#OFTopProductBox:hover h2.OFTitle a { opacity: 0.7; } @media screen and (max-width: 1140px) { ul#OFTopProductBox li { /*260+340*/ height: 600px; } } /* //ul#OFTopProductBox */ /*======================== 3-4-3 : CATEGORY 一覧 /*========================*/ /*====== ORILNAL FRAME CATE LIST SETTING ====== */ ul#OFCate { width: 100%; height: 75px; overflow: hidden; /*-------- 4列 -------- */ } ul#OFCate li { width: 25%; /* 未対応ブラウザ用フォールバック */ width: -webkit-calc(100% / 4); width: calc(100% / 4); } /*====== Article ====== */ #OFWrapper { margin: 0; overflow: hidden; /*border: 1px solid red; */ /*====== 個別 Article ====== */ /*// IE10以上 */ /********************** (PC 1370px 以下) ********************/ /********************** (PC /1370px 以下) ********************/ /********************** (PC 1080px 以下) ********************/ /********************** (PC /1080px 以下) ********************/ } #OFWrapper article { width: 33.3333%; /* 未対応ブラウザ用フォールバック */ width: -webkit-calc(100% / 3); width: calc(100% / 3); height: 300px; float: left; position: relative; background: url(./Img/OFArticleBack.jpg) 0% 100% #FAF9F7; background-repeat: repeat-x; overflow: hidden; display: flex; -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */ align-items: center; /* 縦方向中央揃え */ webkit-justify-content: center; /* 横方向中央揃え（Safari用） */ justify-content: center; /* 横方向中央揃え */ /*border: 1px solid red; */ } #OFWrapper article figure img { transition-property: all; transition: .3s linear; width: 360px; mix-blend-mode: multiply; /* オーバーレイを指定 */ } #OFWrapper article h3 { bottom: 40px; left: 0; position: absolute; text-align: center; margin: 0 auto; display: block; width: 100%; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; font-size: 14px; font-size: 1.4rem; font-weight: 400; z-index: 3; } #OFWrapper article h3 a { color: #000; } #OFWrapper article h3 a:hover { color: #646363; } #OFWrapper article:hover h3 a { color: #646363; } #OFWrapper article:hover img { opacity: .7; } @media all and (-ms-high-contrast: none) { #OFWrapper { /* IE10以上 */ } #OFWrapper article { background: #FFF; background: none\9; width: 33.3333%; /* 未対応ブラウザ用フォールバック */ } } @supports (-ms-ime-align: auto) { #OFWrapper article { background: #FFF; background: none; } } @media screen and (max-width: 1370px) { #OFWrapper article { width: 50%; /* 未対応ブラウザ用フォールバック */ } } @media screen and (max-width: 1080px) { #OFWrapper article { width: 100%; /* 未対応ブラウザ用フォールバック */ float: none; } } /*======================== 3-4-4 : ENTRY SLIDE /*========================*/ #EntrySlideArea { margin: 0 auto 70px; max-width: 920px; min-width: 740px; text-align: center; position: relative; /*border: 1px solid #990000;*/ /*// .SlideInner */ /*// ul.Thumbnails */ /********************** (PC 1240px 以下) ********************/ /********************** (PC /1140px 以下) ********************/ } #EntrySlideArea .SlideInner { width: 100%; /**/ max-width: 850px; /**/ overflow: hidden; margin: 0 auto 20px; /*border: 1px solid blue;*/ /*// ul.MainSlider */ } #EntrySlideArea .SlideInner ul.MainSlider { width: 100%; /**/ margin: 0 auto; /*// li */ } #EntrySlideArea .SlideInner ul.MainSlider li { width: 100%; max-width: 850px; /**/ height: 565px; /*border: 1px solid red;*/ margin: 0 auto; position: relative; overflow: hidden; } #EntrySlideArea .SlideInner ul.MainSlider li img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; /**/ max-width: 100%; height: 565px; max-height: 100%; margin: auto; } #EntrySlideArea ul.Thumbnails { /*border: 1px solid #999;*/ overflow: hidden; height: 94px; width: 100%; font-size: 0; letter-spacing: -.4em; /* 文字間を詰めて隙間をなくす */ /*// lis */ } #EntrySlideArea ul.Thumbnails li { /*サムネイル*/ display: inline-block; margin: 0 5px; width: auto; height: 94px; /**/ overflow: hidden; border: 1px solid #F3F3F3; } #EntrySlideArea ul.Thumbnails li img { /*サムネイルの画像*/ display: block; width: auto; height: 94px; transition-property: all; transition: .3s linear; } #EntrySlideArea ul.Thumbnails li a img { opacity: 1; filter: alpha(opacity=100); } #EntrySlideArea ul.Thumbnails li a.active img { opacity: 0.3; filter: alpha(opacity=30); } #EntrySlideArea #PrevIcon a { /*矢印画像（前へ）*/ display: block; width: 18px; height: 565px; /**/ background: url(./Img/SlideLeftArrow.png) 0% 50% no-repeat; /*border: 1px solid red;*/ top: 0; left: 0px; position: absolute; text-indent: -9999px; } #EntrySlideArea #NextIcon a { /*矢印画像（次へ）*/ display: block; width: 18px; height: 565px; /**/ background: url(./Img/SlideRightArrow.png) 0% 50% no-repeat; /*border: 1px solid red;*/ top: 0; right: 0px; position: absolute; text-indent: -9999px; } #EntrySlideArea #PrevIcon a:hover, #EntrySlideArea #NextIcon a:hover { opacity: 0.7; filter: alpha(opacity=70); } @media screen and (max-width: 1240px) { #EntrySlideArea #PrevIcon a { left: 15px; } #EntrySlideArea #NextIcon a { right: 15px; } } /*// #EntrySlideArea */ /* -------------------------------------------------------------------------------------------- 3-5: SHOP / ACCESS -------------------------------------------------------------------------------------------- */ /*======================== 3-5-1 : MORDAL BTN /*========================*/ #SPModalArea { background: #BFB183; width: 100%; height: 80px; position: relative; cursor: pointer; display: -webkit-flex; /* Safari用 */ display: flex; -webkit-justify-content: center; /* Safari用 */ justify-content: center; -webkit-align-items: center; /* Safari用 */ align-items: center; transition-property: all; transition: .3s linear; } #SPModalArea .Inner { line-height: 20px; height: 20px; font-size: 16px; font-size: 1.6rem; } #SPModalArea .Inner span { padding-right: 10px; color: #FFF; } #SPModalArea:hover { background: #D2C8A9; } /*== ADD 2018/07/01 17:30 == */ #SPModalArea2 { background: #BFB183; width: 100%; height: 80px; position: relative; cursor: pointer; display: -webkit-flex; /* Safari用 */ display: flex; -webkit-justify-content: space-between; /* Safari用 */ justify-content: space-between; -webkit-align-items: center; /* Safari用 */ align-items: center; /* /.Inner */ } #SPModalArea2 .Inner { width: 50%; line-height: 20px; height: 100%; font-size: 16px; font-size: 1.6rem; border-right: 1px solid rgba(255, 255, 255, 0.9); } #SPModalArea2 .Inner a { width: 100%; height: 100%; display: -webkit-flex; /* Safari用 */ display: flex; -webkit-justify-content: center; /* Safari用 */ justify-content: center; -webkit-align-items: center; /* Safari用 */ align-items: center; transition-property: all; transition: .3s linear; } #SPModalArea2 .Inner a span { color: #FFF; } #SPModalArea2 .Inner a span img { padding-left: 10px; } #SPModalArea2 .Inner a:hover { background: #D2C8A9; } #SPModalArea2 .Inner:last-of-type { border-right: none; } /* /#SPModalArea2 */ /*======================== 3-5-2 : CATEGORY 一覧 /*========================*/ /*====== ORILNAL FRAME CATE LIST SETTING ====== */ ul#SPCate { width: 100%; height: 75px; overflow: hidden; /*-------- 4列 -------- */ } ul#SPCate li { width: 20%; /* 未対応ブラウザ用フォールバック */ width: -webkit-calc(100% / 5); width: calc(100% / 5); } ul#SPCate2 li { width: 33%; /* 未対応ブラウザ用フォールバック */ width: -webkit-calc(100% / 3); width: calc(100% / 3); } /*====== Article ====== */ #SPWrapper { margin: 0; overflow: hidden; background: url(./Img/SPBack.jpg) 100% 100% #FAF9F7; /*border: 1px solid red; */ /*====== 個別 Article ====== */ /*// article */ /********************** (PC 1300px 以下) ********************/ /********************** (PC /1300px 以下) ********************/ /*-------- A要素に Hover 一括 -------- */ /*-------- FEATURES (2020/03/12 18:54) ------- */ /*/&.Features */ } #SPWrapper article { width: 50%; /* 未対応ブラウザ用フォールバック */ height: 340px; float: left; position: relative; margin: 0; background: url(./Img/SPBack.jpg) 100% 100% #FAF9F7; background-repeat: repeat-x; overflow: hidden; display: flex; -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */ align-items: center; /* 縦方向中央揃え */ webkit-justify-content: center; /* 横方向中央揃え（Safari用） */ justify-content: center; /* 横方向中央揃え */ /*-------- Inner -------- */ /*// .SPInner */ } #SPWrapper article .SPInner { width: 100%; max-width: 520px; overflow: hidden; /*border: 1px solid red;*/ /*-------- 左詳細BOX -------- */ /*// .SPDetailLeftBox */ /*// figure */ /*-------- FriendShip H3 -------- */ /*-------- Detail -------- */ } #SPWrapper article .SPInner .SPDetailLeftBox { width: 50%; float: left; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; text-align: left; /*-------- H3 -------- */ /*-------- div 一括 -------- */ } #SPWrapper article .SPInner .SPDetailLeftBox h3 { font-size: 26px; font-size: 2.6rem; line-height: 1.4; } #SPWrapper article .SPInner .SPDetailLeftBox h3 a { display: block; color: #000; margin-bottom: 22px; font-weight: 400; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; letter-spacing: 0.05em; } #SPWrapper article .SPInner .SPDetailLeftBox div { font-size: 13px; font-size: 1.3rem; margin-bottom: 10px; } #SPWrapper article .SPInner .SPDetailLeftBox .SPOff { margin-bottom: 5px; } #SPWrapper article .SPInner .SPDetailLeftBox .SPOff2 { padding-left: 3.8em; } #SPWrapper article .SPInner figure { width: 50%; float: left; } #SPWrapper article .SPInner figure img { width: 230px; } #SPWrapper article .SPInner h3.Fr { display: block; font-size: 26px; font-size: 2.6rem; color: #000; margin-bottom: 25px; font-weight: 400; font-family: "游明朝", YuMincho,'Yu Mincho', 'Times New Roman' ,serif; letter-spacing: 0.05em; text-align: left; line-height: 1.4; /*-------- Span -------- */ } #SPWrapper article .SPInner h3.Fr:a { color: #000; } #SPWrapper article .SPInner h3.Fr span { font-size: 16px; font-size: 1.6rem; } #SPWrapper article .SPInner h3.Fr2 span { font-size: 16px; font-size: 1.6rem;clear: both;width: 100%;} #SPWrapper article .SPInner .FrDetail { font-size: 13px; font-size: 1.3rem; text-align: left; } @media screen and (max-width: 1300px) { #SPWrapper article { width: 100%; float: none; } } #SPWrapper .hBox > a:hover { background: rgba(255, 255, 255, 0.3); } #SPWrapper.Features { margin-bottom: 120px; background: none; /********************** (PC 1300px 以下) ********************/ /********************** (PC 1300px 以下) ********************/ /*/igure */ } #SPWrapper.Features article { background: none; height: 460px; } #SPWrapper.Features article h3 { font-weight: normal; } @media screen and (max-width: 1300px) { #SPWrapper.Features { margin-bottom: 60px; margin-top: 60px; } #SPWrapper.Features article { height: 480px; } } #SPWrapper.Features figure { margin-bottom: 30px; } #SPWrapper.Features figure img { width: auto; height: 300px; /********************** (PC 1300px 以下) ********************/ } @media screen and (max-width: 1300px) { #SPWrapper.Features figure img { height: 360px; } } /*// #SPWrapper */ h2#FriendShip { width: 100%; clear: both; display: block; padding: 90px 0 40px; margin: 0; background: #FFF; letter-spacing: 0.15em; font-size: 24px; font-size: 2.4rem; font-weight: 700; line-height: 1; } /*======================== 3-5-3 : Google MAP /*========================*/ #gMap { width: 100%; background: #FFF; padding: 0 0 90px; } #gMap #map { width: 100%; height: 400px; margin-bottom: 30px; } #gMap nav img { width: 230px; } /* -------------------------------------------------------------------------------------------- 3-6: SITE MAP -------------------------------------------------------------------------------------------- */ #SitemapWrapper { padding: 100px 0 0; overflow: hidden; text-align: center; } #SitemapWrapper .SitemapLeftBox { width: 50%; max-width: 380px; float: left; /*background: #EFEFEF;*/ } #SitemapWrapper .SitemapRightBox { width: 50%; max-width: 380px; float: right; /*background: #EFEFEF;*/ } #SitemapWrapper ul li a { font-size: 18px; font-size: 1.8rem; font-weight: 700; margin-bottom: 70px; color: #000; padding-bottom: 10px; line-height: 1; border-bottom: 2px solid #BFB183; display: block; letter-spacing: 0.15em; } #SitemapWrapper ul li a:hover { color: rgba(0, 0, 0, 0.5); } #SitemapWrapper ul li.wSub > a { margin-bottom: 25px; } #SitemapWrapper ol li a { border-bottom: none; display: block; font-size: 13px; font-size: 1.3rem; line-height: 0; margin-bottom: 12px; /*15px; */ padding: 0 0 15px; } #SitemapWrapper ol > li:last-child { margin-bottom: 70px; } /* -------------------------------------------------------------------------------------------- 3-7: ABOUT -------------------------------------------------------------------------------------------- */ /*======================== 3-7-1 : 基本背景色 /*========================*/ .BgC514F46 { background-color: #514F46; } .BgC706E66 { background-color: #706E66; } .BgC3A3530 { background-color: #3A3530; } .BgC5D5049 { background-color: #5D5049; } .BgC8E8A79 { background-color: #8E8A79; } .BgC787772 { background-color: #787772; } .BgC48463E { background-color: #48463E; } .BgC4C4549 { background-color: #4C4549; } .BgC44545A { background-color: #44545A; } .BgC6B6B6B { background-color: #6B6B6B; } .BgC53504D { background-color: #53504D; } .BgC363C48 { background-color: #363C48; } .BgCF4F4F4 { background-color: #F4F4F4; } .BgC44393A { background-color: #44393A; } .BgC4F5255 { background-color: #4F5255; } .BgC464B45 { background-color: #464B45; } .BgCEEE { background-color: #EEE; } .BgCEDEDED { background-color: #EDEDED; } .BgCF1F1F1 { background-color: #F1F1F1; } .BgCEFEFEF { background-color: #EFEFEF; } .BgC5F5F5F { background-color: #5F5F5F; } .BgC706D5F { background-color: #706D5F; } .BgC5B5459 { background-color: #5B5459; } .BgCF1F1EF { background-color: #F1F1EF; } .BgC40494D { background-color: #40494D; } .BgC656152 { background-color: #656152; } .BgCEAEAEA { background-color: #EAEAEA; } .BgC5D5C51 { background-color: #5D5C51; } /*=== ADD 2020/10/16 2:17 === */ .BgCECEBF0 { background-color: #ECEBF0; } .BgCDFE0EC { background-color: #dfe0ec; } .BgCFFF { background-color: #FFF; } .BgC363C2B { background-color: #363C2B; } /*眼鏡バック */ .BgCF0F0F0 { background-color: #F0F0F0; } /*FadeIn 前用*/ .BgCBeforeFade { background-color: #1C1B19; } /*FadeIn 前用*/ /*.BgCBeforeFadeFFF{ background-color: #FFF }*/ /*======================== 3-7-2 : 基本設定 /*========================*/ /*====== PC 非表示 ====== */ .NoPC { display: none; } /*====== SP 非表示 ====== */ .NoSP { display: block; } /*======================== 3-7-3 : TITLE COLUMN /*========================*/ .TitleColumn { padding: 320px 0; /*====== H1 ====== */ } .TitleColumn h1 { font-size: 46px; font-size: 4.6rem; line-height: 1.3; font-family: "游明朝", YuMincho,'Yu Mincho',serif; color: #FFF; letter-spacing: 0; margin: 0; font-weight: 400; } /*======================== 3-7-4 : FIXED BACKGROUND /*========================*/ .BGFixed { background-position: 200px 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .BGFixed02 { background-position: 100px 100%; background-size: Contain; background-repeat: no-repeat; background-attachment: fixed; } /*======================== 3-7-5 : PHILOSOPHY WRAPPER /*========================*/ #Philosophy01, #Philosophy02 { width: 100%; padding: 200px 0; } /*======================== 3-7-6 : MEASURE WRAPPER /*========================*/ .MeasureBack { background-image: url(./Img/TimeLines.png); background-position: 228px 0%; /*/50045.6%*/ background-repeat: repeat-y; background-size: 12px auto; } /* ------ 1970's~ Sec02 ------ */ .MeasureBack01 { background-image: url(./Img/TimeLines.png); background-position: 187px 0%; /*/50045.6%*/ background-repeat: repeat-y; background-size: 12px auto; } /* ------ Cagalog ------ */ .MeasureBackCatalog { background-image: url(./Img/TimeLines.png); background-position: 109px 0%; /*/50045.6%*/ background-repeat: repeat-y; background-size: 12px auto; } /*======================== 3-7-7 : MEASURE INNER /*========================*/ .MeasureInner { text-align: left; width: 100%; display: block; /*border: 1px solid red; */ /* ------UL ------ */ /* / UL */ } .MeasureInner ul { width: 100%; /*width: 500px;*/ display: table; /*---- Normal Time Area ----*/ /*---- MeasureBack01 Time Area w180 ---- */ /*---- MeasureBackCatalog Time Area w120 ---- */ /*---- Line Area Common w35 ---- */ /*---- Detail Area Common w35 ---- */ } .MeasureInner ul.mb30 { margin-bottom: 30px; } .MeasureInner ul span { font-size: 13px; font-size: 1.3rem; padding-top: 5px; display: block; } .MeasureInner ul li.Time { display: table-cell; width: 217px; /*218/500 43.5%*/ padding-right: 20px; /*padding-top: 3px; /*background: red;/**/ text-align: right; vertical-align: top; font-size: 17px; font-size: 1.7rem; color: #FFF; font-family: 'Muli',sans-serif; } .MeasureInner ul li.Time175 { display: table-cell; width: 176px; /*218/500 43.5%*/ padding-right: 20px; /*padding-top: 3px; /*background: red;/**/ text-align: right; vertical-align: top; font-size: 17px; font-size: 1.7rem; color: #FFF; font-family: 'Muli',sans-serif; } .MeasureInner ul li.Time100 { display: table-cell; width: 100px; /*218/500 43.5%*/ padding-right: 20px; /*padding-top: 3px; /*background: red;/**/ text-align: right; vertical-align: top; font-size: 17px; font-size: 1.7rem; color: #FFF; font-family: 'Muli',sans-serif; } .MeasureInner ul li.Line { display: table-cell; width: 35px; background: blue; text-align: center; vertical-align: top; background: url(./Img/Line.png) 0% 9px no-repeat; } .MeasureInner ul li.Detail { display: table-cell; /*width: 247px;*/ text-align: left; vertical-align: top; /*background: red;*/ padding: 0 20px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; color: #FFF; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; } @media all and (-ms-high-contrast: none) { .MeasureInner ul { /* IE10以上 */ } .MeasureInner ul li.Time175, .MeasureInner ul li.Time { padding-top: 0px; padding-top: 0px\9; } .MeasureInner ul li.Line { background: url(./Img/Line.png) 0% 8px no-repeat; } } /* / .MeasureInner */ /*======================== 3-7-8 : VERTICAL ALIGN CENTER /*========================*/ .VAlignCenter { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } /*======================== 3-7-9 : ARROW BOX /*========================*/ .ArrowBox { position: relative; /*---- Left ---- */ /*---- Left ---- */ } .ArrowBox .ArrowLeft { width: 23px; height: 100%; top: 0; left: 0; position: absolute; /*border: 1px solid red;*/ } .ArrowBox .ArrowRight { width: 22px; height: 100%; top: 0; Right: 0; position: absolute; /*border: 1px solid red;*/ /* 画像は回転させる */ } .ArrowBox .ArrowRight img { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* / .ArrowBox */ /*======================== 3-7-10 : INNER BOX (PHILOSOPHY) /*========================*/ .PBoxInner { width: 95%; max-width: 850px; /*====== Title ====== */ /*====== P 要素 ====== */ /*====== 注意書き 要素 ====== */ /* / .CautionBox */ } .PBoxInner h3 { display: block; font-size: 20px; font-size: 2rem; color: #FFF; margin-bottom: 65px; font-weight: 400; font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, serif; text-align: center; letter-spacing: 0.2em; } .PBoxInner h3 span { font-size: 14px; font-size: 1.4rem; } .PBoxInner p { font-size: 14px; font-size: 1.4rem; color: #FFF; line-height: 46px; /*30/14行送り÷文字サイズ*/ margin-bottom: 0px; } .PBoxInner p.last { margin-bottom: 0px; } .PBoxInner .CautionBox { border: 1px solid rgba(255, 255, 255, 0.5); padding: 35px 100px; text-align: left; margin-top: 65px; } .PBoxInner .CautionBox ul li { color: #FFF; margin-bottom: 15px; line-height: 1.4; font-size: 14px; font-size: 1.4rem; } .PBoxInner .CautionBox ul li:last-child { margin-bottom: 0px; } /* / .PBoxInner */ /*======================== 3-7-11 : WRAPPER WITH CHILDREN /*========================*/ #HistoryWrapper, #PhilosophyWrapper { padding: 90px 0 0px; margin: 0; width: 100%; overflow: hidden; /*background: #F8F7F4;*/ /*====== Title ====== */ /* Img Width Responisive */ /*====== Navigation ====== */ /* /.HistoryNav*/ /*====== Normal 2 Column BOX ====== */ /* /.TwoColumns */ /*------------ 縦 BOX 2列 ----------- */ /*------------ カタログ画像 2列 ----------- */ /*------------ カタログ画像 2列 FlexBox----------- */ /*//*----------- カタログ画像 2列 FlexBox ----------- */ /*====== 3 Column BOX 01 (T1970-Sec02) ====== */ /* */ /*====== ノベルティ ====== */ /*---1990's~ Sec03 ノベルティエリア --*/ /*====== ~ 1970's ====== */ /********************** (PC 1300px 以下) ********************/ /********************** (/PC 1300px 以下) ********************/ } #HistoryWrapper h2, #PhilosophyWrapper h2 { display: block; font-size: 24px; font-size: 2.4rem; color: #000; margin-bottom: 40px; font-weight: 700; font-family: 'Muli',sans-serif; letter-spacing: 0.15em; text-align: center; } #HistoryWrapper .w100, #PhilosophyWrapper .w100 { width: 100%; /**/ } #HistoryWrapper .mh500, #PhilosophyWrapper .mh500 { max-height: 500px; } #HistoryWrapper .mW386, #PhilosophyWrapper .mW386 { max-width: 386px; } #HistoryWrapper .mW540, #PhilosophyWrapper .mW540 { max-width: 540px; } #HistoryWrapper .mW680, #PhilosophyWrapper .mW680 { max-width: 680px; } #HistoryWrapper .mT40, #PhilosophyWrapper .mT40 { margin-top: 40px; } #HistoryWrapper .tLeft, #PhilosophyWrapper .tLeft { text-align: left; } #HistoryWrapper .tRight, #PhilosophyWrapper .tRight { text-align: right; } #HistoryWrapper .HistoryNav ul, #PhilosophyWrapper .HistoryNav ul { margin: 0 auto 50px; text-align: center; /*border: 1px solid red;/**/ /*height: 50px;*/ overflow: hidden; font-size: 0; } #HistoryWrapper .HistoryNav ul li, #PhilosophyWrapper .HistoryNav ul li { display: inline-block; } #HistoryWrapper .HistoryNav ul li a, #PhilosophyWrapper .HistoryNav ul li a { padding: 16px 40px 14px; margin: 0 0px; line-height: 50px; background-color: #BFB183; border-left: 1px solid #FFF; font-size: 14px; font-size: 1.4rem; color: #FFF; } #HistoryWrapper .HistoryNav ul li a:hover, #PhilosophyWrapper .HistoryNav ul li a:hover { background-color: #D2C8A9; } #HistoryWrapper .TwoColumns, #PhilosophyWrapper .TwoColumns { display: -webkit-flex; display: flex; -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap; /*====== Left BOX ====== */ /*====== Left BOX ====== */ /*====== Catalog Measure BOX ====== */ /*====== Catalog ImgBOX ====== */ /*====== Novelty Left BOX ====== */ /*====== Novelty Right BOX ====== */ /* Novelty Normal (10's Box) */ } #HistoryWrapper .TwoColumns .LeftBox, #PhilosophyWrapper .TwoColumns .LeftBox { width: 50%; } #HistoryWrapper .TwoColumns .RightBox, #PhilosophyWrapper .TwoColumns .RightBox { width: 50%; /*background: red;*/ } #HistoryWrapper .TwoColumns .CatalogMeasureBox, #PhilosophyWrapper .TwoColumns .CatalogMeasureBox { width: 35%; /* 480/1360*/ /*border: 1px solid red;*/ } #HistoryWrapper .TwoColumns .CatalogImgBox, #PhilosophyWrapper .TwoColumns .CatalogImgBox { width: 65%; /* 480/1360*/ padding: 60px 30px; /*border: 1px solid blue;*/ } #HistoryWrapper .TwoColumns .LeftBoxw60, #PhilosophyWrapper .TwoColumns .LeftBoxw60 { width: 60%; /*780/1360*/ /*====== Novelty Title BOX ====== */ } #HistoryWrapper .TwoColumns .LeftBoxw60 .LeftBoxw60TitleBox, #PhilosophyWrapper .TwoColumns .LeftBoxw60 .LeftBoxw60TitleBox { padding: 115px 0; } #HistoryWrapper .TwoColumns .LeftBoxw60 .NoveltyInnerBox, #PhilosophyWrapper .TwoColumns .LeftBoxw60 .NoveltyInnerBox { width: 50%; } #HistoryWrapper .TwoColumns .RightBoxw40, #PhilosophyWrapper .TwoColumns .RightBoxw40 { width: 40%; /*background: red;/**/ position: relative; } #HistoryWrapper .TwoColumns .RightBoxw40 img, #PhilosophyWrapper .TwoColumns .RightBoxw40 img { width: 100%; max-width: 581px; } #HistoryWrapper .TwoColumns .NoveltyTitleBoxw440, #PhilosophyWrapper .TwoColumns .NoveltyTitleBoxw440 { /*H1 Title No SP*/ width: 440px; } #HistoryWrapper .TwoColumns .NoveltyBoxw100, #PhilosophyWrapper .TwoColumns .NoveltyBoxw100 { width: calc(100% - 440px); /*400/1360*/ position: relative; } #HistoryWrapper .TwoColumns .NoveltyBoxw100 img, #PhilosophyWrapper .TwoColumns .NoveltyBoxw100 img { width: 100%; max-width: 920px; /**/ } #HistoryWrapper .Vertical2Box, #PhilosophyWrapper .Vertical2Box { width: 100%; height: 50%; /*border: 1px solid #990000;*/ } #HistoryWrapper ul.CatalogImg, #PhilosophyWrapper ul.CatalogImg { /*/------------ カタログ画像 2列 ----------- */ } #HistoryWrapper ul.CatalogImg li, #PhilosophyWrapper ul.CatalogImg li { display: inline-block; margin: 0 8px; /*border: 1px solid #999;*/ width: 40%; max-width: 318px; /*------------ カタログ画像 ----------- */ } #HistoryWrapper ul.CatalogImg li img, #PhilosophyWrapper ul.CatalogImg li img { width: 100%; max-width: 318px; } #HistoryWrapper ul.CatalogImgFlexBox, #PhilosophyWrapper ul.CatalogImgFlexBox { display: -webkit-flex; display: flex; -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; align-items: center; /*------------ カタログ FlexBox 画像 ----------- */ } #HistoryWrapper ul.CatalogImgFlexBox li, #PhilosophyWrapper ul.CatalogImgFlexBox li { margin: 0 16px; width: calc(40% - 30px); max-width: 320px; /*border: 1px solid red;/**/ } #HistoryWrapper ul.CatalogImgFlexBox img, #PhilosophyWrapper ul.CatalogImgFlexBox img { width: 100%; } #HistoryWrapper ul.CatalogImgFlexBox li.Horizon, #PhilosophyWrapper ul.CatalogImgFlexBox li.Horizon { width: calc(55% - 30px); max-width: 440px; /*border: 1px solid red;*/ } #HistoryWrapper .ThreeColumns, #PhilosophyWrapper .ThreeColumns { display: -webkit-flex; display: flex; -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap; /*1970's Sec04 */ /* Novelty Normal (80's Box) */ /* Novelty 変形 (2000's Box) */ } #HistoryWrapper .ThreeColumns .Box01, #PhilosophyWrapper .ThreeColumns .Box01 { width: 35%; /*380 - 1380 */ /*border: 1px solid red; */ } #HistoryWrapper .ThreeColumns .Box02, #PhilosophyWrapper .ThreeColumns .Box02 { padding: 40px; width: 35%; } #HistoryWrapper .ThreeColumns .Box03, #PhilosophyWrapper .ThreeColumns .Box03 { width: 30%; } #HistoryWrapper .ThreeColumns .NoveltyTitleBox, #PhilosophyWrapper .ThreeColumns .NoveltyTitleBox { /*H1 Title No SP*/ width: 400px; } #HistoryWrapper .ThreeColumns .NoveltyNormalBox, #PhilosophyWrapper .ThreeColumns .NoveltyNormalBox { /*H1 Title No SP*/ width: calc(50% - 200px); position: relative; } #HistoryWrapper .ThreeColumns .NoveltyNormalBox img, #PhilosophyWrapper .ThreeColumns .NoveltyNormalBox img { width: 100%; max-width: 480px; } #HistoryWrapper .ThreeColumns .NoveltyBoxw550, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw550 { width: calc(60% - 200px); /*550/1360*/ position: relative; } #HistoryWrapper .ThreeColumns .NoveltyBoxw550 img, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw550 img { width: 100%; max-width: 560px; /**/ } #HistoryWrapper .ThreeColumns .NoveltyBoxw400, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw400 { width: calc(40% - 200px); /*400/1360*/ position: relative; } #HistoryWrapper .ThreeColumns .NoveltyBoxw400 img, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw400 img { width: 100%; max-width: 400px; /**/ } #HistoryWrapper h2.NoveltyTitle, #PhilosophyWrapper h2.NoveltyTitle { font-size: 20px; font-size: 2rem; line-height: 1.3; font-family: 'Muli',sans-serif; color: #FFF; letter-spacing: 0; margin: 0; font-weight: 500; } #HistoryWrapper .NoveltyTitleBoxNoPC, #PhilosophyWrapper .NoveltyTitleBoxNoPC { display: none; } #HistoryWrapper h3.NoveltyItemTitle, #PhilosophyWrapper h3.NoveltyItemTitle { position: absolute; bottom: 30px; left: 0; text-align: center; width: 100%; font-size: 14px; font-size: 1.4rem; font-weight: 500; font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif; } #HistoryWrapper .TwoColumnsW100, #PhilosophyWrapper .TwoColumnsW100 { display: -webkit-flex; display: flex; -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #HistoryWrapper .TwoColumnsW100 .NoveltyInnerBox, #PhilosophyWrapper .TwoColumnsW100 .NoveltyInnerBox { width: 50%; position: relative; } #HistoryWrapper .TwoColumnsW100 .NoveltyInnerBox img, #PhilosophyWrapper .TwoColumnsW100 .NoveltyInnerBox img { width: 100%; } #HistoryWrapper .TwoColumnsW100 .NoveltyInnerBox, #PhilosophyWrapper .TwoColumnsW100 .NoveltyInnerBox { width: 50%; position: relative; } #HistoryWrapper .TwoColumnsW100 .NoveltyInnerBox img, #PhilosophyWrapper .TwoColumnsW100 .NoveltyInnerBox img { width: 100%; max-width: 680px; } #HistoryWrapper #B1970-Sec02, #PhilosophyWrapper #B1970-Sec02 { max-height: 500px; /**/ } #HistoryWrapper #B1970-Sec03, #PhilosophyWrapper #B1970-Sec03 { background: #454C44; } #HistoryWrapper #B1970-Sec03 img, #PhilosophyWrapper #B1970-Sec03 img { width: 100%; } #HistoryWrapper #B1970-Sec04 .Box02, #PhilosophyWrapper #B1970-Sec04 .Box02 { padding-top: 50px; padding-bottom: 50px; /*border: 1px solid #999;*/ } @media screen and (max-width: 1300px) { #HistoryWrapper, #PhilosophyWrapper { /* ------ 1970's~ Sec02 ------ */ /* SPのみメモリを表示する */ /*====== Normal 2 Column BOX ====== */ /*====== 3 Column BOX 01 (T1970-Sec02) ====== */ /*------------ 縦 BOX 2列 ----------- */ /*------------ カタログ画像 2列 ----------- */ /*------------ カタログ画像 2列 FlexBox ----------- */ /*------------ Padding Top Bottom Add for Vertical2Box ----------- */ /*====== ~ 1970's ====== */ /* /#B1970-Sec04 */ } #HistoryWrapper .TitleColumn, #PhilosophyWrapper .TitleColumn { padding: 240px 0; } #HistoryWrapper .BGFixed, #PhilosophyWrapper .BGFixed { background-size: cover; background-position: 50% 50%; background-attachment: scroll; } #HistoryWrapper .NoPC, #PhilosophyWrapper .NoPC { display: block; } #HistoryWrapper .NoSP, #PhilosophyWrapper .NoSP { display: none; } #HistoryWrapper .mW540, #PhilosophyWrapper .mW540 { max-width: 500px; } #HistoryWrapper .tRight, #PhilosophyWrapper .tRight { text-align: left; } #HistoryWrapper .ArrowBox, #PhilosophyWrapper .ArrowBox { display: block; } #HistoryWrapper .ArrowBox .ArrowLeft, #HistoryWrapper .ArrowBox .ArrowRight, #PhilosophyWrapper .ArrowBox .ArrowLeft, #PhilosophyWrapper .ArrowBox .ArrowRight { width: 100%; height: 10px; } #HistoryWrapper .ArrowBox .ArrowLeft img, #HistoryWrapper .ArrowBox .ArrowRight img, #PhilosophyWrapper .ArrowBox .ArrowLeft img, #PhilosophyWrapper .ArrowBox .ArrowRight img { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } #HistoryWrapper .MeasureBack01, #HistoryWrapper .MeasureBackCatalog, #PhilosophyWrapper .MeasureBack01, #PhilosophyWrapper .MeasureBackCatalog { background-position: 228px 0%; /*/50045.6%*/ } #HistoryWrapper .MeasureBackCatalog, #PhilosophyWrapper .MeasureBackCatalog { background-image: none; } #HistoryWrapper .SPMeasureBack, #PhilosophyWrapper .SPMeasureBack { background-image: url(./Img/TimeLines.png); background-position: 228px 0%; /*/50045.6%*/ background-repeat: repeat-y; background-size: 12px auto; } #HistoryWrapper li.Time175, #HistoryWrapper li.Time100, #PhilosophyWrapper li.Time175, #PhilosophyWrapper li.Time100 { width: 218px; } #HistoryWrapper .HistoryNav ul li a, #PhilosophyWrapper .HistoryNav ul li a { padding: 16px 30px 14px; } #HistoryWrapper .TwoColumns, #PhilosophyWrapper .TwoColumns { display: block; overflow: hidden; } #HistoryWrapper .TwoColumns .LeftBox, #HistoryWrapper .TwoColumns .RightBox, #HistoryWrapper .TwoColumns .CatalogImgBox, #HistoryWrapper .TwoColumns .CatalogMeasureBox, #HistoryWrapper .TwoColumns .LeftBoxw60, #HistoryWrapper .TwoColumns .NoveltyBoxw100, #PhilosophyWrapper .TwoColumns .LeftBox, #PhilosophyWrapper .TwoColumns .RightBox, #PhilosophyWrapper .TwoColumns .CatalogImgBox, #PhilosophyWrapper .TwoColumns .CatalogMeasureBox, #PhilosophyWrapper .TwoColumns .LeftBoxw60, #PhilosophyWrapper .TwoColumns .NoveltyBoxw100 { width: 100%; } #HistoryWrapper .TwoColumns .CatalogImgBox, #PhilosophyWrapper .TwoColumns .CatalogImgBox { padding: 0 0 80px 265px; text-align: left; } #HistoryWrapper .TwoColumns .LeftBoxw60 .LeftBoxw60TitleBox, #PhilosophyWrapper .TwoColumns .LeftBoxw60 .LeftBoxw60TitleBox { padding: 60px 0; } #HistoryWrapper .TwoColumns .LeftBoxw60 .NoveltyInnerBox, #PhilosophyWrapper .TwoColumns .LeftBoxw60 .NoveltyInnerBox { width: -webkit-calc(100% / 3); width: calc(100% / 3); } #HistoryWrapper .ThreeColumns, #PhilosophyWrapper .ThreeColumns { display: block; overflow: hidden; } #HistoryWrapper .ThreeColumns .Box01, #PhilosophyWrapper .ThreeColumns .Box01 { width: 100%; } #HistoryWrapper .ThreeColumns .Box02, #PhilosophyWrapper .ThreeColumns .Box02 { width: calc(100% - 275px); margin-left: 275px; padding: 60px 60px 0px 0; /*border: 1px solid blue;*/ text-align: left; } #HistoryWrapper .ThreeColumns .Box03, #PhilosophyWrapper .ThreeColumns .Box03 { display: none; } #HistoryWrapper .ThreeColumns .NoveltyTitleBox, #PhilosophyWrapper .ThreeColumns .NoveltyTitleBox { /*H1 Title No SP*/ width: 100%; padding: 60px 0; } #HistoryWrapper .ThreeColumns .NoveltyNormalBox, #PhilosophyWrapper .ThreeColumns .NoveltyNormalBox { /*H1 Title No SP*/ width: 50%; float: left; margin: 0; } #HistoryWrapper .ThreeColumns .NoveltyBoxw550, #HistoryWrapper .ThreeColumns .NoveltyBoxw400, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw550, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw400 { width: 50%; float: left; margin: 0; } #HistoryWrapper .ThreeColumns .NoveltyBoxw550 img, #HistoryWrapper .ThreeColumns .NoveltyBoxw400 img, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw550 img, #PhilosophyWrapper .ThreeColumns .NoveltyBoxw400 img { width: 100%; max-width: none; max-height: 400px; } #HistoryWrapper .NoveltyTitleBoxNoPC, #PhilosophyWrapper .NoveltyTitleBoxNoPC { /*H1 Title No SP*/ width: 100%; padding: 60px 0; display: block; } #HistoryWrapper .Vertical2Box, #PhilosophyWrapper .Vertical2Box { height: auto; /*border: 1px solid #990000;*/ } #HistoryWrapper ul.CatalogImg, #PhilosophyWrapper ul.CatalogImg { /*width: calc(100%-275px);*/ /*/------------ カタログ画像 2列 ----------- */ } #HistoryWrapper ul.CatalogImg li, #PhilosophyWrapper ul.CatalogImg li { /*border: 1px solid #999;*/ width: 40%; /*------------ カタログ画像 ----------- */ } #HistoryWrapper ul.CatalogImg li img, #PhilosophyWrapper ul.CatalogImg li img { width: 100%; max-width: 340px; } #HistoryWrapper ul.CatalogImgFlexBox, #PhilosophyWrapper ul.CatalogImgFlexBox { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; /*border: 1px solid #999;*/ } #HistoryWrapper ul.CatalogImgFlexBox li, #PhilosophyWrapper ul.CatalogImgFlexBox li { margin: 0 16px 0 8px; } #HistoryWrapper .pTB80, #PhilosophyWrapper .pTB80 { padding: 80px 0; } #HistoryWrapper .pT80B40, #PhilosophyWrapper .pT80B40 { padding: 80px 0 40px; } #HistoryWrapper #B1970-Sec02, #PhilosophyWrapper #B1970-Sec02 { max-height: none; } #HistoryWrapper #B1970-Sec04 .Box02, #PhilosophyWrapper #B1970-Sec04 .Box02 { /* 個別で上でトータルで設定 */ padding: 40px 00px 0px 0; /*画像は 2列 */ } #HistoryWrapper #B1970-Sec04 .Box02 figure, #PhilosophyWrapper #B1970-Sec04 .Box02 figure { width: 45%; display: inline-block; vertical-align: top; margin: 0 8px 0 0; overflow: hidden; } #HistoryWrapper #B1970-Sec04 .Box02 figure img, #PhilosophyWrapper #B1970-Sec04 .Box02 figure img { width: 100%; max-width: 340px; } } /* ==================================================== 5: FAQ ==================================================== */ #FaqWrapper { font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, serif; font-weight: 600; margin: 0 auto; /*=== h2 Img 01=== */ /*=== Accordion === */ /*=== Accordion Header (Click Area) === */ /*=== H3 Q === */ /*=== Text === */ /*=== Btn === */ /*/.I_Box */ /*==== Accordion_Inner(Answe rArea) ==== */ /*/.Accordion_Inner */ /*==== Open Setting ==== */ /*/.Accordion_Header.Open */ /*==== Img 01 ==== */ /*==== Img 02 ==== */ /*==== Footer Img 02 ==== */ } #FaqWrapper h2.Img01 { width: 646px; margin: 35px auto 30px; } #FaqWrapper .Accordion { width: 100%; margin: 0 auto 30px; background: #FFF; } #FaqWrapper .Accordion_Header { background: #f8f7f4; display: flex; -webkit-display: flex; font-size: 14px; padding: 20px; position: relative; z-index: +1; cursor: pointer; transition: all .6s; } #FaqWrapper h3 { padding-right: 15px; padding-top: 3px; color: #b78f1c; font-family: 'Shippori Mincho', serif; } #FaqWrapper .Q { padding-right: 60px; line-height: 1.6; text-align: left; letter-spacing: 0.25em; } #FaqWrapper .I_Box { display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 27px / 2); right: 20px; width: 25px; height: 25px; transition-duration: 0.2s; /*==== White Line ==== */ /*/span */ } #FaqWrapper .I_Box span { position: absolute; left: 0; width: 100%; height: 1px; display: inline-block; transition: all .6s; background: #b78f1c; } #FaqWrapper .I_Box span:nth-of-type(1) { top: calc(50% - 0.5px); } #FaqWrapper .I_Box span:nth-of-type(2) { top: calc(50% - 0.5px); } #FaqWrapper .Accordion_Inner { display: none; background: #f8f7f4; color: #b78f1c; padding: 30px 50px 50px; line-height: 1.8; text-align: left; letter-spacing: 0.25em; } #FaqWrapper .Accordion_Inner.Stay { display: block; } #FaqWrapper .Accordion_Header.Open { background: #b78f1c; /*==== Text ==== */ /*==== Line ==== */ /*/.I_Box span */ } #FaqWrapper .Accordion_Header.Open h3, #FaqWrapper .Accordion_Header.Open .Q { color: #f8f7f4; } #FaqWrapper .Accordion_Header.Open .I_Box span { background: #f8f7f4; /*==== Line 2 ==== */ } #FaqWrapper .Accordion_Header.Open .I_Box span:nth-of-type(2) { opacity: 1; top: calc(50% - 0.5px); -webkit-transform: translateY(0px) rotate(90deg); transform: translateY(0px) rotate(90deg); } #FaqWrapper .InnerImg01 { width: 194px; margin: 0 auto; } #FaqWrapper .InnerImg02 { width: 860px; margin: 20px auto 20px; } #FaqWrapper .FaqFooterNav { width: 364px; margin: 0 auto; } /*/#FaqWrapper*/ /* ==================================================== 4: IMPORT 2 ==================================================== */ /* -------------------------------------------------------------------------------------------- 4-2: MIX IN 01 -------------------------------------------------------------------------------------------- */ /* 共通モジュールやパーツ*/ /* Site Name: 白山眼鏡店 - HAKUSAN MEGANE Description: Module Setting Version: 2017/04/20 3:20 Author: Nagano Syouten Creative */ /* =================================================================== CONTENTS 1: FIXED LEFT COLUMN 2: COMMON FOOTER 3: READ MORE =================================================================== */ /* ==================================================== 1: FIXED LEFT COLUMN ==================================================== */ #FixedLeftColumn { width: 240px; height: 100%; /**/ background: url(./Img/LeftBack.jpg) 0 0 no-repeat; position: fixed; top: 0; left: 0; z-index: 999; /* -------------------------------------------------------------------------------------------- 3-1: INNER (RELATIVE) -------------------------------------------------------------------------------------------- */ /* //#FlcInner */ } #FixedLeftColumn .FlcInner { /*position: relative;*/ height: 100%; /**/ width: 240px; height: 100%; /*border: 1px solid red;/**/ /*======================== H1 タイトル画像 /*========================*/ /*====== 画像 ====== */ /* -------------------------------------------------------------------------------------------- 3-2: BOTTOM NAV AREA -------------------------------------------------------------------------------------------- */ /* //#BottomNav */ } #FixedLeftColumn .FlcInner h1 { opacity: 0; /* FadeIn with Jqeury*/ padding-top: 80px; } #FixedLeftColumn .FlcInner h1 img { height: 53px; } #FixedLeftColumn .FlcInner #BottomNav { position: absolute; bottom: 30px; left: 0; width: 100%; transition-delay: 6s; /*border: 1px solid red;*/ /*======================== Banner (Add 2018/09/25 22:47) /*========================*/ /*======================== Instagram Icon /*========================*/ /* //.Circle */ /* -------------------------------------------------------------------------------------------- 3-3: NAVIGATION -------------------------------------------------------------------------------------------- */ /* //#LeftNav */ /*======================== Google Translate /*========================*/ /* //.google_translate_element */ } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner { margin: 0 0 25px; opacity: 0; /* FadeIn with Jqeury*/ } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner img { margin-left: auto; margin-right: auto; transition-property: all; } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner img.h768 { display: none; } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner img.h769 { display: block; } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner:hover img { opacity: .8; } @media screen and (max-height: 768px) { #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner img { width: 200px; margin-left: auto; margin-right: auto; } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner img.h768 { display: block; } #FixedLeftColumn .FlcInner #BottomNav .FeaturesBanner img.h769 { display: none; } } #FixedLeftColumn .FlcInner #BottomNav .Circle { opacity: 1; /* FadeIn with Jqeury*/ margin: 0 0 25px; display: inline-block; text-align: center; /*====== Instagram ====== */ /*=== Add 20230306 == */ } #FixedLeftColumn .FlcInner #BottomNav .Circle a { border-radius: 50%; width: 40px; height: 40px; line-height: 40px; color: #fff; border: 1px solid #FFF; padding: 1px 0 0; display: block; } #FixedLeftColumn .FlcInner #BottomNav .Circle a:hover { color: #000; background: #FFF; } #FixedLeftColumn .FlcInner #BottomNav .Circle i { font-size: 18px; font-size: 1.8rem; } #FixedLeftColumn .FlcInner #BottomNav .Circle.NoCircle { display: flex; justify-content: center; -webkit-justify-content: center; } #FixedLeftColumn .FlcInner #BottomNav .Circle.NoCircle a { border: none; border-radius: 0; width: auto; height: auto; line-height: auto; margin: 0 14px; opacity: 0; } #FixedLeftColumn .FlcInner #BottomNav .Circle.NoCircle a:hover { background: none; color: rgba(255, 255, 255, 0.6); } #FixedLeftColumn .FlcInner #BottomNav #LeftNav { margin: 0 auto 20px; /* //ul li */ } #FixedLeftColumn .FlcInner #BottomNav #LeftNav ul li { opacity: 0; /* FadeIn with Jqeury*/ line-height: 1; margin: 0 auto 0px; font-family: 'Muli',sans-serif; font-size: 13px; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.15em; /* トラッキング数値(150) ÷ 1000*/ transition-property: all; } #FixedLeftColumn .FlcInner #BottomNav #LeftNav ul li a { padding: 15px 0; color: #FFF; display: Inline-block; transition: .4s linear; background: url(./Img/LeftNavHover.png) 50% 65% no-repeat; background-size: 0px 73px; } #FixedLeftColumn .FlcInner #BottomNav #LeftNav ul li a:hover { color: rgba(255, 255, 255, 0.7); /**/ background: url(./Img/LeftNavHover.png) 50% 65% no-repeat; background-size: 320px 73px; } #FixedLeftColumn .FlcInner #BottomNav #LeftNav ul li.Current a { color: rgba(255, 255, 255, 0.7); /**/ background: url(./Img/LeftNavHover.png) 50% 65% no-repeat; background-size: 320px 73px; } #FixedLeftColumn .FlcInner #BottomNav #google_translate_element { opacity: 0; /* FadeIn with Jqeury*/ text-align: center; min-height: 25px; } #FixedLeftColumn .FlcInner #BottomNav #google_translate_element #google_translate_element img { display: inline; } /* //#FixedLeftColumn */ #FixedLeftColumn.ipad, #FixedLeftColumn.android { background: none; } /* ==================================================== 2: COMMON FOOTER ==================================================== */ #CommonFooter { width: 100%; clear: both; /* -------------------------------------------------------------------------------------------- 2-1: PAGE TOP -------------------------------------------------------------------------------------------- */ /* //#PageTop */ /* -------------------------------------------------------------------------------------------- 2-2: FOOTER -------------------------------------------------------------------------------------------- */ /* //#Footer */ } #CommonFooter #PageTop { width: 100%; } #CommonFooter #PageTop a { height: 60px; line-height: 35px; background-color: #C4C3BB; display: block; } #CommonFooter #PageTop a:hover { background-color: #D6D5D0; } #CommonFooter #Footer { width: 100%; height: 60px; line-height: 60px; overflow: hidden; background-color: #FFF; font-family: 'Muli',sans-serif; font-size: 11px; font-size: 1.1rem; color: #838383; /*====== Footer Nav ====== */ /* //.fNav */ /*====== Copyright ====== */ } #CommonFooter #Footer .fNav { float: left; margin-left: 30px; font-size: 11px; font-size: 1.1rem; } #CommonFooter #Footer .fNav a { color: #838383; } #CommonFooter #Footer .fNav a:hover { text-decoration: underline; } #CommonFooter #Footer .fCopy { float: right; margin-right: 30px; } /* //#CommonFooter */ /* ==================================================== 3: READ MORE ==================================================== */ #More { clear: both; margin: 0 auto 20px; width: 230px; height: 46px; line-height: 46px; background: url(./Img/MoreBack_Hover.png) 50% 50% no-repeat #000; position: relative; /**/ border-radius: 5px 5px 5px 5px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); /*====== ANCHOR SETTING ====== */ } #More a { color: #FFF; background: url(./Img/MoreBack.png) 50% 50% no-repeat; width: 230px; height: 46px; line-height: 46px; display: block; /*@include MuliFont; @include FontSize(14); font-weight: 600; letter-spacing : 0.10em ; /* トラッキング数値(100) ÷ 1000*/ border-radius: 5px 5px 5px 5px; } /* //#More*/ /*# sourceMappingURL=Style.css.map */ .fs_subtit{padding: 0 0 0 10px; } .new_twitter .fa-twitter:before { content: '𝕏' !important; font-family: sans-serif !important; font-weight: bold; }