/* Theme Name:シーホースジャパン専用テーマ Theme URI: http://www.seahorsejp.com/ Description:シーホースジャパン専用テーマです。 Author: シーホースジャパン Author URI: http://www.seahorsejp.com/ Version: 2.0.0 */ /* The CSS has been optimized in 126 column (tab size:4) of sublimetext. */ /* Each style must be extended based on the framework. */ /* ======================================================================================================================== */ /* reset style */ /* ======================================================================================================================== */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{font-weight:normal;text-align:left;vertical-align:top}html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}del{color:#333}ins{background:#fff9c0;text-decoration:none}hr{background-color:#ccc;border:0;height:1px;margin:24px;margin-bottom:1.714285714rem}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}small{font-size:smaller}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box} /* ======================================================================================================================== */ /* default pl framework */ /* ======================================================================================================================== */ /* -------------------------------------------------------------------------------------------------------------------- */ /* margin and padding */ /* 00 05 08 10 15 16 20 24 25 30 32 35 40 45 48 50 56 64 104 112 120 */ /* -------------------------------------------------------------------------------------------------------------------- */ .ma00{margin:0!important}.mt00{margin-top:0!important}.mr00{margin-right:0!important}.mb00{margin-bottom:0!important}.ml00{margin-left:0!important}.pa00{padding:0!important}.pt00{padding-top:0!important}.pr00{padding-right:0!important}.pb00{padding-bottom:0!important}.pl00{padding-left:0!important}.ma05{margin:5px!important}.ma10{margin:10px!important}.ma15{margin:15px!important}.ma20{margin:20px!important}.ma25{margin:25px!important}.ma30{margin:30px!important}.ma35{margin:35px!important}.ma40{margin:40px!important}.ma45{margin:45px!important}.ma50{margin:50px!important}.mt05{margin-top:5px!important}.mt10{margin-top:10px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt25{margin-top:25px!important}.mt30{margin-top:30px!important}.mt35{margin-top:35px!important}.mt40{margin-top:40px!important}.mt45{margin-top:45px!important}.mt50{margin-top:50px!important}.mr05{margin-right:5px!important}.mr10{margin-right:10px!important}.mr15{margin-right:15px!important}.mr20{margin-right:20px!important}.mr25{margin-right:25px!important}.mr30{margin-right:30px!important}.mr35{margin-right:35px!important}.mr40{margin-right:40px!important}.mr45{margin-right:45px!important}.mr50{margin-right:50px!important}.mb05{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.mb20{margin-bottom:20px!important}.mb25{margin-bottom:25px!important}.mb30{margin-bottom:30px!important}.mb35{margin-bottom:35px!important}.mb40{margin-bottom:40px!important}.mb45{margin-bottom:45px!important}.mb50{margin-bottom:50px!important}.ml05{margin-left:5px!important}.ml10{margin-left:10px!important}.ml15{margin-left:15px!important}.ml20{margin-left:20px!important}.ml25{margin-left:25px!important}.ml30{margin-left:30px!important}.ml35{margin-left:35px!important}.ml40{margin-left:40px!important}.ml45{margin-left:45px!important}.ml50{margin-left:50px!important}.pa05{padding:5px!important}.pa10{padding:10px!important}.pa15{padding:15px!important}.pa20{padding:20px!important}.pa25{padding:25px!important}.pa30{padding:30px!important}.pa35{padding:35px!important}.pa40{padding:40px!important}.pa45{padding:45px!important}.pa50{padding:50px!important}.pt05{padding-top:5px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt20{padding-top:20px!important}.pt25{padding-top:25px!important}.pt30{padding-top:30px!important}.pt35{padding-top:35px!important}.pt40{padding-top:40px!important}.pt45{padding-top:45px!important}.pt50{padding-top:50px!important}.pr05{padding-right:5px!important}.pr10{padding-right:10px!important}.pr15{padding-right:10px!important}.pr20{padding-right:20px!important}.pr20{padding-right:20px!important}.pr30{padding-right:30px!important}.pr30{padding-right:30px!important}.pr40{padding-right:40px!important}.pr45{padding-right:45px!important}.pr50{padding-right:50px!important}.pb05{padding-bottom:5px!important}.pb10{padding-bottom:10px!important}.pb15{padding-bottom:15px!important}.pb20{padding-bottom:20px!important}.pb25{padding-bottom:25px!important}.pb30{padding-bottom:30px!important}.pb35{padding-bottom:35px!important}.pb40{padding-bottom:40px!important}.pb45{padding-bottom:45px!important}.pb50{padding-bottom:50px!important}.pl05{padding-left:5px!important}.pl10{padding-left:10px!important}.pl15{padding-left:15px!important}.pl20{padding-left:20px!important}.pl25{padding-left:25px!important}.pl30{padding-left:30px!important}.pl35{padding-left:35px!important}.pl40{padding-left:40px!important}.pl45{padding-left:45px!important}.pl50{padding-left:50px!important}.ma08{margin:8px!important}.ma16{margin:16px!important}.ma24{margin:24px!important}.ma32{margin:32px!important}.ma40{margin:40px!important}.ma48{margin:48px!important}.ma56{margin:56px!important}.ma64{margin:64px!important}.ma72{margin:72px!important}.ma80{margin:80px!important}.ma88{margin:88px!important}.ma96{margin:96px!important}.ma104{margin:104px!important}.ma112{margin:112px!important}.ma120{margin:120px!important}.mt08{margin-top:8px!important}.mt16{margin-top:16px!important}.mt24{margin-top:24px!important}.mt32{margin-top:32px!important}.mt40{margin-top:40px!important}.mt48{margin-top:48px!important}.mt56{margin-top:56px!important}.mt64{margin-top:64px!important}.mt72{margin-top:72px!important}.mt80{margin-top:80px!important}.mt88{margin-top:88px!important}.mt96{margin-top:96px!important}.mt104{margin-top:104px!important}.mt112{margin-top:112px!important}.mt120{margin-top:120px!important}.mr08{margin-right:8px!important}.mr16{margin-right:16px!important}.mr24{margin-right:24px!important}.mr32{margin-right:32px!important}.mr40{margin-right:40px!important}.mr48{margin-right:48px!important}.mr56{margin-right:56px!important}.mr64{margin-right:64px!important}.mr72{margin-right:72px!important}.mr80{margin-right:80px!important}.mr88{margin-right:88px!important}.mr96{margin-right:96px!important}.mr104{margin-right:104px!important}.mr112{margin-right:112px!important}.mr120{margin-right:120px!important}.mb08{margin-bottom:8px!important}.mb16{margin-bottom:16px!important}.mb24{margin-bottom:24px!important}.mb32{margin-bottom:32px!important}.mb40{margin-bottom:40px!important}.mb48{margin-bottom:48px!important}.mb56{margin-bottom:56px!important}.mb64{margin-bottom:64px!important}.mb72{margin-bottom:72px!important}.mb80{margin-bottom:80px!important}.mb88{margin-bottom:88px!important}.mb96{margin-bottom:96px!important}.mb104{margin-bottom:104px!important}.mb112{margin-bottom:112px!important}.mb120{margin-bottom:120px!important}.ml08{margin-left:8px!important}.ml16{margin-left:16px!important}.ml24{margin-left:24px!important}.ml32{margin-left:32px!important}.ml40{margin-left:40px!important}.ml48{margin-left:48px!important}.ml56{margin-left:56px!important}.ml64{margin-left:64px!important}.ml72{margin-left:72px!important}.ml80{margin-left:80px!important}.ml88{margin-left:88px!important}.ml96{margin-left:96px!important}.ml104{margin-left:104px!important}.ml112{margin-left:112px!important}.ml120{margin-left:120px!important}.pa08{padding:8px!important}.pa16{padding:16px!important}.pa24{padding:24px!important}.pa32{padding:32px!important}.pa40{padding:40px!important}.pa48{padding:48px!important}.pa56{padding:56px!important}.pa64{padding:64px!important}.pa72{padding:72px!important}.pa80{padding:80px!important}.pa88{padding:88px!important}.pa96{padding:96px!important}.pa104{padding:104px!important}.pa112{padding:112px!important}.pa120{padding:120px!important}.pt08{padding-top:8px!important}.pt16{padding-top:16px!important}.pt24{padding-top:24px!important}.pt32{padding-top:32px!important}.pt40{padding-top:40px!important}.pt48{padding-top:48px!important}.pt56{padding-top:56px!important}.pt64{padding-top:64px!important}.pt72{padding-top:72px!important}.pt80{padding-top:80px!important}.pt88{padding-top:88px!important}.pt96{padding-top:96px!important}.mt104{padding-top:104px!important}.mt112{padding-top:112px!important}.mt120{padding-top:120px!important}.pr08{padding-right:8px!important}.pr16{padding-right:16px!important}.pr24{padding-right:24px!important}.pr32{padding-right:32px!important}.pr40{padding-right:40px!important}.pr48{padding-right:48px!important}.pr56{padding-right:56px!important}.pr64{padding-right:64px!important}.pr72{padding-right:72px!important}.pr80{padding-right:80px!important}.pr88{padding-right:88px!important}.pr96{padding-right:96px!important}.pr104{padding-right:104px!important}.pr112{padding-right:112px!important}.pr120{padding-right:120px!important}.pb08{padding-bottom:8px!important}.pb16{padding-bottom:16px!important}.pb24{padding-bottom:24px!important}.pb32{padding-bottom:32px!important}.pb40{padding-bottom:40px!important}.pb48{padding-bottom:48px!important}.pb56{padding-bottom:56px!important}.pb64{padding-bottom:64px!important}.pb72{padding-bottom:72px!important}.pb80{padding-bottom:80px!important}.pb88{padding-bottom:88px!important}.pb96{padding-bottom:96px!important}.pb104{padding-bottom:104px!important}.pb112{padding-bottom:112px!important}.pb120{padding-bottom:120px!important}.pl08{padding-left:8px!important}.pl16{padding-left:16px!important}.pl24{padding-left:24px!important}.pl32{padding-left:32px!important}.pl40{padding-left:40px!important}.pl48{padding-left:48px!important}.pl56{padding-left:56px!important}.pl64{padding-left:64px!important}.pl72{padding-left:72px!important}.pl80{padding-left:80px!important}.pl88{padding-left:88px!important}.pl96{padding-left:96px!important}.pl104{padding-left:104px!important}.pl112{padding-left:112px!important}.pl120{padding-left:120px!important} /* -------------------------------------------------------------------------------------------------------------------- */ /* font size */ /* -------------------------------------------------------------------------------------------------------------------- */ /* initialize */ html {font-size: 62.5%} body {font-size: 1.0rem;} /* rem 08-60 */ .fs08{font-size:0.8rem!important}.fs09{font-size:0.9rem!important}.fs10{font-size:1.0rem!important}.fs11{font-size:1.1rem!important}.fs12{font-size:1.2rem!important}.fs13{font-size:1.3rem!important}.fs14{font-size:1.4rem!important}.fs15{font-size:1.5rem!important}.fs16{font-size:1.6rem!important}.fs17{font-size:1.7rem!important}.fs18{font-size:1.8rem!important}.fs19{font-size:1.9rem!important}.fs20{font-size:2.0rem!important}.fs21{font-size:2.1rem!important}.fs22{font-size:2.2rem!important}.fs23{font-size:2.3rem!important}.fs24{font-size:2.4rem!important}.fs25{font-size:2.5rem!important}.fs26{font-size:2.6rem!important}.fs27{font-size:2.7rem!important}.fs28{font-size:2.8rem!important}.fs29{font-size:2.9rem!important}.fs30{font-size:3.0rem!important}.fs31{font-size:3.1rem!important}.fs32{font-size:3.2rem!important}.fs33{font-size:3.3rem!important}.fs34{font-size:3.4rem!important}.fs35{font-size:3.5rem!important}.fs36{font-size:3.6rem!important}.fs37{font-size:3.7rem!important}.fs38{font-size:3.8rem!important}.fs39{font-size:3.9rem!important}.fs40{font-size:4.0rem!important}.fs41{font-size:4.1rem!important}.fs42{font-size:4.2rem!important}.fs43{font-size:4.3rem!important}.fs44{font-size:4.4rem!important}.fs45{font-size:4.5rem!important}.fs46{font-size:4.6rem!important}.fs47{font-size:4.7rem!important}.fs48{font-size:4.8rem!important}.fs49{font-size:4.9rem!important}.fs50{font-size:5.0rem!important}.fs51{font-size:5.1rem!important}.fs52{font-size:5.2rem!important}.fs53{font-size:5.3rem!important}.fs54{font-size:5.4rem!important}.fs55{font-size:5.5rem!important}.fs56{font-size:5.6rem!important}.fs57{font-size:5.7rem!important}.fs58{font-size:5.8rem!important}.fs59{font-size:5.9rem!important}.fs60{font-size:6.0rem!important} /* ======================================================================================================================== */ /* Utility */ /* ======================================================================================================================== */ /* radius styles "03 05 10 15 20" */ .r03{border-radius: 3px}.r05{border-radius: 5px}.r10{border-radius:10px} .r15{border-radius:15px}.r20{border-radius:20px}.r25{border-radius:25px} /* float styles "fl fr" */ .fl {float: left;} .fr {float:right;} /* list style */ .ol {} ol.number li {list-style-type: number;} .ul {} ul.list li {list-style-type: square;} /* status */ .active {color: #23B8C5; font-weight: bold;} .success {color: #23D4B9; font-weight: bold;} .warning {color: #DF7514; font-weight: bold;} .danger {color: #FF0060; font-weight: bold;} .error {color: #CA3C3C; font-weight: bold;} .alert {color: #FF6000; font-weight: bold;} /* display */ .clear {clear : both;} .hide {display: none;} .block {display: block;} .inline {display: inline;} .inlineB {display: inline-block;} /* default hover */ .ov * { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; } .ov:hover * {filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;} .shadow {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);} .en {font-family: 'Lora', serif;} .fsm {font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;} /* -------------------------------------------------------------------------------------------------------------------- */ /* table */ /* -------------------------------------------------------------------------------------------------------------------- */ table {} tr {border-top: 1px #ccc solid;} tr:first-child {border-top: 2px #ccc solid; vertical-align: middle;} tr:last-child {border-bottom: 2px #ccc solid; vertical-align: middle;} th {padding: 10px; vertical-align: top;} td {padding: 10px; vertical-align: middle; word-wrap: break-word;} table.form-table {} .form-table tr:nth-child(odd) {background: #f2f2f2;} .form-table th {padding: 15px; vertical-align: middle;} .form-table td {padding: 15px; vertical-align: middle;} span.required {color: #D31414; font-size: 12px; display: block; clear: both;} p {line-height: 1.5;} /* -------------------------------------------------------------------------------------------------------------------- */ /* form */ /* -------------------------------------------------------------------------------------------------------------------- */ /* area */ .submitArea {display: block; text-align: center; padding: 20px;} /* input */ input {padding: 5px 8px; background: #23B8C5; color: #fff; border-radius: 5px;} input:hover {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);} input:focus {box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);} /* type */ input[type="text"] {padding: 10px; border: #ccc 1px solid;} input[type="text"]:focus {border: #23B8C5 1px solid;} input[type="email"] {padding: 10px; border: #ccc 1px solid;} input[type="email"]:focus {border: #23B8C5 1px solid;} input[type="password"] {} input[type="password"] {} input[type="checkbox"] {} input[type="checkbox"]:focus {} input[type="radio"] {} input[type="radio"]:focus {} input[type="file"] {} input[type="file"]:focus {} input[type="hidden"] {} input[type="hidden"]:focus {} input[type="button"] {} input[type="button"]:focus {} input[type="image"] {} input[type="image"]:focus {} /* submit */ input[type="submit"] {background-color: #23D4B9;} input[type="submit"]:hover {cursor: pointer;} input[type="reset"] {} input[type="reset"]:focus {} input[name="submitBack"] {} /* input placeholder */ ::-webkit-input-placeholder {color: #999;} :-ms-input-placeholder {color: #999;} ::-moz-placeholder {color: #999;} :-moz-placeholder {color: #999;} textarea {padding: 10px;} /* -------------------------------------------------------------------------------------------------------------------- */ /* clearFix */ /* -------------------------------------------------------------------------------------------------------------------- */ .cfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;} .cfix {min-height: 1px;} * html .cfix {height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/} /* ======================================================================================================================== */ /* WordPress Native Styles */ /* ======================================================================================================================== */ /* default */ p {display: block;} strong { font-weight: bold; } blockquote { display : block; -webkit-margin-before : 1em; -webkit-margin-after : 1em; -webkit-margin-start : 40px; -webkit-margin-end : 40px; } /* img */ .aligncenter {display: block; margin: 0 auto;} .alignright {float: right;} .alignleft {float: left; } img[class*="wp-image-"], img[class*="attachment-"] {height: auto; max-width: 100%;} /* ======================================================================================================================== */ /* Accessibility */ /* ======================================================================================================================== */ /* Recognition of text */ body { background-color : #fff; color : #333; font-size : 1.6rem; font-family : -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; } @media all and (-ms-high-contrast:none) { body { font-family : -apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; } } /* Recognition of the link */ a {text-decoration: none; color: #666; outline: none;} a:hover {text-decoration: underline; outline:none;} a:after {color: #666; outline: none;} /* Brevity of the sentence */ h1 {} h2 {} h3 {} h4 {} h5 {} h6 {} .lead {} .caption {} .sentence {} .lh-15 {line-height: 1.5;} .lh-17 {line-height: 1.7;} .lh-18 {line-height: 1.8;} .sp-br {display: none;} /* ======================================================================================================================== */ /* layout */ /* ======================================================================================================================== */ .out-container {width: 100%;} .container {width: 980px; margin: 0 auto; clear: both;} .container:after {content: ""; display: block; clear: both; height: 1px; overflow: hidden;} /* header */ header { width: 100%; height : 90px; position : fixed; z-index : 999999; -webkit-transition : all .15s ease; -moz-transition : all .15s ease; -o-transition : all .15s ease; } .nav-margin {padding-top: 90px;} .header-area-hover {background: #fff;} .logo-area { float : left; height : 90px; width : 200px; position : relative; margin-right: 60px; } .logo { width : 200px; height : 20px; position : absolute; margin : auto; top : 0; bottom : 0; right : 0; left : 0; } /* navigation */ nav {color : #464646;} nav ul { display : flex; justify-content : space-between; flex-wrap : wrap; width : 720px; } nav li a:hover {text-decoration: none;} nav li { float : left; display : block; padding-top : 36px; letter-spacing : 1px; } .n-lnk { color : #464646; font-weight : bold; position : relative; display : inline-block; } .n-lnk:before, .n-lnk:after{ position : absolute; top : 1.6em; content : ""; display : inline-block; width : 0; height : 1px; background : #464646; transition : .25s; } .n-lnk:before{left: 50%;} .n-lnk:after{right: 50%;} .n-lnk:hover:before, .n-lnk:hover:after{width: 50%;} .r-nav { color : #464646; border : 1px #464646 solid; padding : 10px 20px; display : inline-block; float : right; margin-top : -14px; line-height : 1; font-weight : bold; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; } .r-nav img { -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; } .r-nav:hover {background: #464646; color: #fff;} .r-nav:hover img { -webkit-filter : brightness(10); -moz-filter : brightness(10); -o-filter : brightness(10); -ms-filter : brightness(10); filter : brightness(10); } /* main */ main {display: block;} /* footer area */ footer {background: #333; text-align: center;} .copyright {font-size: 1.2rem; color: #b2b2b2;} address {} .bgc-insta {background: #ededed;} /* btn */ .btn {padding: 20px 35px; text-decoration: none; background: #fff;} .btn:hover {text-decoration: none;} .btn-link { border : 1px solid #A18B64; color : #b09d7c; width : 310px; display : inline-block; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; } .btn-link:hover {background: #A18B64; color: #fff;} .btn-tel { border : 1px solid #A18B64; color : #fff; display : block; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; background : #A18B64; font-size : 3.5vw; letter-spacing : 2px; padding : 15px 15px 10px 15px } .btn-tel:hover {background: #A18B64; color: #fff;} .btn-tel img {vertical-align: middle;} .col-box {display: flex; justify-content: space-between; flex-wrap: wrap;} .col-box .col-1 {width: 100%;} .col-box .col-2 {width: 47%;} .col-box .col-3 {width: 30%;} .col-box .col-4 {width: 24%;} .col-box .col-sub-nav {width: 49.5%; margin-bottom: 10px;} .col-1 *, .col-2 * , .col-3 *, .col-4 * {max-width: 100%;} .col-1 img, .col-2 img, .col-3 img,.col-4 img, .col-sub-nav img {max-width: 100%; height: auto!important;} /* ======================================================================================================================== */ /* common */ /* ======================================================================================================================== */ .sp-disp {display: none;} .pc-disp {display: block;} span.pc-disp {display: inline;} @media screen and (max-width:980px) { .sp-disp {display: block;} span.pc-disp {display: inline;} .pc-disp {display: none;} } /* -------------------------------------------------------------------------------------------------------------------- */ /* common */ /* -------------------------------------------------------------------------------------------------------------------- */ .ani02 { -webkit-transition : all .25s ease; -moz-transition : all .25s ease; -o-transition : all .25s ease; } .ani05 { -webkit-transition : all .5s ease; -moz-transition : all .5s ease; -o-transition : all .5s ease; } /* text-align */ .txt-c {text-align: center!important;} .txt-l {text-align: left!important;} .txt-r {text-align: right!important;} /* block */ section {} section:after {content: ""; display: block; clear: both; height: 1px; overflow: hidden;} section + section {} /* element */ .rep-img { background-repeat : no-repeat; background-position : left top; display : block; height : 0; line-height : 1.5; overflow : hidden; } /* rep-img format */ /* .ex {background:url(); padding-top:100px; width:100px;} */ .ttl { display : block; text-align : center; font-size : 4.2rem; color : #5e5e5e; margin-bottom : 20px; letter-spacing : 2px; } p.ttl,.subttl { font-weight: bold; } .bgc-path {background: #f5f5f5;} .footer-nav {position: relative; overflow: hidden;} .footer-nav ul {position: relative; left: 50%; float: left;} .footer-nav li {left: -50%; position: relative; float: left; border-left: 1px solid #fff; padding-left: 10px; margin-right: 10px;} .footer-nav li:last-child {border-right: 1px solid #fff; padding-right: 10px; display: inline-block;} .footer-nav li a {color: #fff;} .img-max {width: 100%; height: auto;} .subtext-area p { font-size: 1.8rem; line-height: 3rem; } #nail .subtext-area {text-align: center;} #hairestetic .subtext-area { text-align: left; background: url(img/hairestetic/img_hairestetic_pc.png) no-repeat; width: 980px; height: 655px; } #hairestetic .subtext-area p {padding-left: 340px;} .subvisual-area { background: #f7f7f4; padding:10px 0; position:relative; bottom:350px; margin-bottom:-250px; } .subvisual img { position:relative; left:60%; width:410px; bottom:80px; z-index:2; } .wp-pagenavi .pages {display: none;} .wp-pagenavi .current {background: #b09d7c!important; border: 1px solid #b09d7c!important;} .wp-pagenavi .page {border: 1px solid #b09d7c!important;} .share-btm img {height: 50px; border: none!important;} .facebook-share-btn {background: #374F8B;} .twitter-share-btn {background: #55ACEE;} /* -------------------------------------------------------------------------------------------------------------------- */ /* price */ /* -------------------------------------------------------------------------------------------------------------------- */ .price-area { background-color: #fff9f9; width: 100%; padding: 40px 0; margin:5rem auto; } .price-area h2 { font-family: 'Garamond','Times New Roman','serif'; font-style: italic; font-weight: bold; font-size: 6rem; letter-spacing: 0.5rem; text-align: center; } .price-box { background-color: #fff; border: 1px solid #e5e5e5; box-shadow: 7px 7px #fddfde; font-size: 1.6rem; padding:30px; margin-right: 7px; line-height: 3rem; } p.price { color: #ff8585; font-family: 'Century Gothic','Avenir-Light', sans-serif; font-size: 2.4rem; } .side-menu-wide {width: 292px;} .side-menu-wide .btn-link {width: 292px!important; text-align: center;} /* -------------------------------------------------------------------------------------------------------------------- */ /* home */ /* -------------------------------------------------------------------------------------------------------------------- */ .brand-ico-area {} .brand-ico {} .bgp-style-brand {background: #fff url(img/home/bgp_home.png) no-repeat top center;} .mv-slideshow-1, .mv-slideshow-2 { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .mv-slideshow-1 .mv-item, .mv-slideshow-2 .mv-item { width: 100%; height: 100%; position: absolute; top: 0; display: none; background-size: cover; background-position: center center; } .mv-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: 2; } .mv-out { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); -webkit-transition: 4s; transition: 4s; z-index: 1; } .mv-wrap { position: relative; } .home-sns-area {vertical-align: middle;} .btn-insta { display : block; width : 49.5%; background : #c2a591; float : left; font-size : 2.0rem; letter-spacing : 2px; text-align : center; padding : 10px 20px; color : #fff; vertical-align : middle; -webkit-transition : all .5s ease; -moz-transition : all .5s ease; -o-transition : all .5s ease; } .btn-insta:hover { opacity : 0.8; filter : alpha(opacity=80); zoom : 1; text-decoration : none; } .btn-insta img {vertical-align: middle;} .btn-twitter { display : block; width : 49.5%; background : #55acee; float : right; font-size : 2.0rem; letter-spacing : 2px; text-align : center; padding : 10px 20px; color : #fff; vertical-align : middle; -webkit-transition : all .5s ease; -moz-transition : all .5s ease; -o-transition : all .5s ease; } .btn-twitter:hover { opacity : 0.8; filter : alpha(opacity=80); zoom : 1; text-decoration : none; } .btn-twitter img {vertical-align: middle;} .low-main-visual {text-align: center;} .brand-text { line-height: 1.8; font-size: 1.6rem; text-align: left; margin-top: 60px; margin-bottom: 40px; } .info-ico {padding: 5px 12px; display: inline-block; color: #fff; font-size: 1.3rem;} .ico-kaze {background: #50c69e;} .ico-media {background: #e46a9a;} .ico-info {background: #eb8f8f;} .ico-salon {background: #d3b77c;} .ico-column {background: #eb9a4b;} .info-time {display: block; font-size: 1.4rem; letter-spacing : 1px; } a.block-link {text-decoration: none;} .concept-text-area {line-height: 3rem;} .concept-sub-title {color: #baa47d;} .topic-title {font-size: 1.4rem;} .news-text-area img {margin-bottom: 20px;} /* -------------------------------------------------------------------------------------------------------------------- */ /* make */ /* -------------------------------------------------------------------------------------------------------------------- */ .subvisual-area-make-01 { background: #f7f7f4; padding: 10px 0; position: relative; bottom: 320px; margin-bottom: -250px; } .ico-boder { display: inline-block; border-bottom: 1px solid #baa47d; padding-bottom: 3px; margin-bottom: 10px; } .make-subvisual img { position: relative; left: 65%; width: 410px; bottom: 80px; z-index: 2; } .make-subvisual-l img { position: relative; left: calc(50% - 670px); width: 460px; bottom: 60px; z-index: 2; } .make-left-spacing {padding-left: 350px;} /* -------------------------------------------------------------------------------------------------------------------- */ /* news */ /* -------------------------------------------------------------------------------------------------------------------- */ .col-box main {width: 65%; line-height: 1.8;} .col-box main img {width: 100%; border: 1px solid #ccc;} .col-box aside {width: 30%;} .news-title-info { border-top: 1px double #d1ccc0; border-bottom: 1px double #d1ccc0; padding: 30px 0; margin-bottom: 50px; } .news-title-info time {letter-spacing: 1px;} .news-title-info p {margin-top: 15px;} .news-icon {padding: 0 20px; color: #fff; display: inline-block;} .news-column {background: #eb9a4b;} .news-salon {background: #d3b77c;} .news-info {background: #eb8f8f;} .news-message { background: #85c19d;} .news-color {background: #cf93be;} aside .sideTitle { padding: 15px; background: #f5f3ef; text-align: center; color: #b09d7c; font-weight: normal; border-top: #d6d1c6 1px solid; border-left: #d6d1c6 1px solid; border-right: #d6d1c6 1px solid; } .catList {border: #d6d1c6 1px solid; padding-left: 0; margin-top: 0; padding-top: 0;} .catList li {padding: 12px 12px 12px 20px; text-align: left; border-top: #d6d1c6 1px dotted;line-height: 1.5;} .catList li:first-child {border-top: none;} .catList li:hover {background: #b09d7c; color: #fff;} .catList li:hover a {color: #fff;} .catList li a:hover {color: #fff;} /* -------------------------------------------------------------------------------------------------------------------- */ /* salon */ /* -------------------------------------------------------------------------------------------------------------------- */ .localtitle { background : #F5F5F5; font-size : 140%; font-weight : bold; letter-spacing : 0.15em; margin-top : 50px; padding : 18px 0px 16px 0px; border-top : #e1e1e1 1px solid; text-align : center; clear : both; } .salon-ttl a{ color : #62be9e; font-size : 140%; font-weight : bold; display : inline-block; float : left; } .salon-map-btn { float : right; background : #83C6AF; padding : 5px 7px; color : #fff; } .salon-map-btn:hover {background: #ccc; text-decoration: none;} .salon-box {border-top: 2px solid #00615D; border-bottom: 1px solid #00615D; padding: 20px 0;} .salon-info {width: 53%!important; line-height: 1.8;} .salon-info img {vertical-align: middle; margin-right: 5px;} .salon-info .address {font-size: 1.5rem;} .salon-more-btn {display: block; text-align: right; font-size: 1.5rem;} .salon-more-btn::aftter {content: "＞";} .salon-reservation-btn { border: 1px #464646 solid; padding: 5px 8px; display: inline-block; line-height: 1; font-size: 1.5rem; -webkit-transition: all 0.5s ease; } .salon-reservation-btn:hover { background:#464646; color: #fff; text-decoration: none; } .map-area iframe {width: 100%;} .salon-info .icon img {width: auto!important; height: auto!important;} .salon-area-nav li {width: 33%; float: left; border-right: 1px solid #ccc; text-align: center; padding: 15px 0;} .salon-area-nav li:last-child {border-right: none;} .salon-area-nav .area-title {border:1px solid #baa47d; color: #baa47d;} .sub-sup-text {margin-bottom: 30px; text-align: right;} .wa_red { border: #cc4651 solid 1px; text-align: center; padding: 8px 3px 6px 3px; margin: 30px 0 8px; width: 145px; font-weight: bold; font-size: 14px; letter-spacing: 1px; color: #cd545e; clear: both; } .a-arrow { position : relative; display : inline-block; padding-right: 10px; } .a-arrow::after { content : ''; width : 6px; height : 6px; border : 0px; border-top : solid 2px #666; border-right : solid 2px #666; -ms-transform : rotate(45deg); -webkit-transform : rotate(45deg); transform : rotate(45deg); position : absolute; top : 50%; right : 0; margin-top : -4px; } .salon-menu-ttl { width : 100%; padding : 10px 20px; margin-bottom : 20px; text-align : center; background : #baa47d; color : #fff; clear : both; font-size : 1.8rem; font-weight : bold; } .menu-area dl {margin-bottom: 20px; width: 90%; margin: 0 auto; display: block; margin-bottom: 20px;} .menu-area dl:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;} .menu-area dt, .menu-area dd {width: 50%; float: left; padding: 10px 0; line-height: 1.6;} .menu-area dd {text-align: right;} .salon-detail-title {font-weight: bold; font-size: 2.2rem; margin-bottom: 1.8rem; line-height: 1.5;} .salon-detail-text {line-height: 1.8;} .salon-detail-info {width: 100%; line-height: 1.8; margin-top: 20px; table-layout: fixed;} .salon-detail-info th {width: 30%;} .salon-detail-info td {width: 70%;} .sp-col-salon-photo {width: 50%;} .sp-col-salon-photo img {width: 100%; height: auto;} .bgc-salon-sp-info {background: #F3F3F3 url(img/salon/bgp_tilt.png) no-repeat bottom center;} .bgc-pc-salon-info {background: #f5f5f5; padding: 20px; margin-top: 20px; margin-bottom: 40px;} .bgc-pc-salon-info:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;} .bgc-pc-salon-info img {float: left;} .pc-salon-info-1 { float: left; margin-left: 20px; margin-top: 15px; } .pc-salon-info-1 h3 { font-size: 2.6rem; margin-bottom: 10px; } .pc-salon-info-2 { float: left; margin-left: 40px; padding-top: 15px; font-size: 1.8rem; min-width: 270px; } .salon-tel-info a { color: #f00; font-weight: bold; } .salon-tel-sta img { vertical-align: middle; padding-top: 3px;} .salon-tel-info img { vertical-align: middle; padding-top: 5px;} .btn-blog { width: 460px; padding-top: 62px; background: url(img/salon/btn_blog.png)no-repeat top center; background-size: cover; } .btn-blog:hover { background: url(img/salon/btn_blog.png)no-repeat bottom center; } .btn-reservation { width: 460px; padding-top: 62px; background: url(img/salon/btn_reservation.png)no-repeat top center; background-size: cover; } .btn-reservation:hover { background: url(img/salon/btn_reservation.png)no-repeat bottom center; } /* -------------------------------------------------------------------------------------------------------------------- */ /* PRODUCT */ /* -------------------------------------------------------------------------------------------------------------------- */ .prod-area {position: absolute; top: 30vh; left:0; right: 0;} .prod-title {font-size: 3.6rem; color: #ff8813;} .prod-copy { font-size : 3.6rem; color : #759700; margin-top : 20px; padding-top : 20px; border-top : 1px solid #759700; display : inline-block; } #product .low-main-visual {position: relative;} .prod-title-boder {border-bottom: 1px solid #ccc; margin-bottom: 40px; text-align: center;} .prod-title-sub {border: 1px solid #ccc; padding: 10px; display: inline-block; margin-bottom: -1px;} .prod-item-l {float: left; width: 30%; text-align: center;} .prod-item-r {float: left; width: 60%; margin-left: 5%;} .prod-info-lead {line-height: 1.8; color: #f00;} .prod-info-name {margin-top: 30px; margin-bottom: 30px; font-weight: bold;} .prod-info-text {line-height: 1.8;} .prod-pc-top {margin-top: 150px;} .more-shop-serif { position : relative; background : #ffffff; border-bottom : 2px solid #ccc; display : inline-block; padding-bottom : 10px; font-size : 2.2rem; } .price-area .more-shop-serif { background-color: #fff9f9;} .more-shop-serif:after, .more-shop-serif:before { top : 100%; left : 50%; border : solid transparent; content : " "; height : 0; width : 0; position : absolute; pointer-events : none; } .more-shop-serif:after { border-color : rgba(255, 255, 255, 0); border-top-color : #ffffff; border-width : 10px; margin-left : -10px; } .price-area .more-shop-serif:after { border-top-color: #fff9f9;} .more-shop-serif:before { border-color : rgba(204, 204, 204, 0); border-top-color : #ccc; border-width : 13px; margin-left : -13px; } /* -------------------------------------------------------------------------------------------------------------------- */ /* NAIL */ /* -------------------------------------------------------------------------------------------------------------------- */ .nail-img-list {padding:0 1rem 4rem;} /* -------------------------------------------------------------------------------------------------------------------- */ /* privacy policy */ /* -------------------------------------------------------------------------------------------------------------------- */ #cTitle h2 {font-size: 2.6rem; background: url(img/policy/bgp_h2.png) no-repeat top center; padding: 45px 0 70px 0;} .privacy {line-height: 1.5; margin-bottom: 30px;} .privacy h3 { padding : 5px 0 0 20px; border-top : #ecece4 1px solid; background-color : #f9f9f4; text-align : left; font-size : 125%; font-weight : normal; line-height : 230%; } .privacy ol { margin: 15px 15px 40px 20px; text-align: left; } .privacy ol.sub {margin: 10px 0 15px 20px;} .privacy ol li.sub { list-style: disc outside; padding-left: 1em; text-indent: -1em; } .privacy p { margin: 15px 15px 0 20px; padding: 0 0 0px 0; text-align: left; } .privacy ul.dot { list-style: disc outside; text-align: left; margin: 15px 0 20px 40px; } /*======================================== company profile ========================================*/ .profile { overflow: hidden; text-align: left; margin: 0 auto; position: relative; padding: 0px 0 30px 0; clear: both; } .profile img {float: right;} .profile table { border-collapse: collapse; border-top: #ebebeb solid 1px; border-bottom: #ebebeb solid 1px; font-size: 1.4rem; line-height: 2.0rem; } .profile table th { padding: 20px 24px; font-weight: bold; background: #ebebeb ; } .profile table tr {border-bottom: dotted #f5f5f5 ;} .profile table tr:first-child {border-top: #ebebeb solid 2px;} .profile table tr:last-child {border-bottom: #ebebeb solid 2px;} .profile table td {padding: 20px 24px;} .profile h4 { margin: 10px 0px 0px 5px; font-size: 14px; font-weight: normal; clear: both; } .profile .map { text-align: left; margin: 10px 0 0; float: left; clear: both; } .profile .map .box { background-color: #f6f7f6; padding: 10px 10px 5px 10px; } .map-btn { display: inline-block; padding: 0.5rem 2rem; border-radius: 15px; background: #baa47d; color: #fff; margin-left: 1.4rem; } .company-img { width: 310px; position: absolute; right: 0; top: 0; } .company-img img {width: 310px;} .map { width: 100%; height: 400px; } /* -------------------------------------------------------------------------------------------------------------------- */ /* sitemap */ /* -------------------------------------------------------------------------------------------------------------------- */ .arrow-li li { font-weight : bold; border-top: 1px dashed #eee; border-bottom: 1px dashed #eee; padding: 2rem 0; } .arrow-li li a { background: url(img/sitemap/icon_arrow_right.png) no-repeat left center; background-size: 1rem auto; padding-left: 2rem; } .sub-arrow-li li { border: none; padding: 2rem 0 0 2rem; } .sub-arrow-li li a { line-height: 2rem; font-weight: lighter; padding-left: 1.5rem; background: url(img/sitemap/icon_arrow_right_small.png) no-repeat left center; background-size: 0.5rem auto; margin-bottom: 2rem; } .totop-btn { position: fixed; width: 50px; height: 50px; bottom: 0px; right: 0; } .totop-btn img{ width: 50px; height: 50px;} .mv-slideshow-1, .mv-slideshow-2 {width: 100%!important;} /* -------------------------------------------------------------------------------------------------------------------- */ /* single common */ /* -------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------- */ /* archive common */ /* -------------------------------------------------------------------------------------------------------------------- */ /* ======================================================================================================================== */ /* custom */ /* ======================================================================================================================== */ /* ======================================================================================================================== */ /* animation */ /* ======================================================================================================================== */ /* ======================================================================================================================== */ /* responsive */ /* ======================================================================================================================== */ @media screen and (max-width:1620px) { /* ---------------------------------------------------------------------------------------------------------------- */ .low-main-visual picture img {max-width: 100%;} /* ---------------------------------------------------------------------------------------------------------------- */ } @media screen and (max-width:1200px) { .prod-area {top: 30vh;} } /* -------------------------------------------------------------------------------------------------------------------- */ /* 980 */ /* -------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:980px) { body#home {background: #fff;} .prod-area {top: 23vh;} /* ---------------------------------------------------------------------------------------------------------------- */ /* nav {display: none;} */ .container {width: 90%;} .col-box .col-1 {width: 100%;} .col-box .col-2 {width: 47%;} .col-box .col-3 {width: 30%;} .col-box .col-4 {width: 30%;} .col-box .col-sub-nav {width: 49.5%; margin-bottom: 10px;} .col-1 img, .col-2 img, .col-3 img, .col-4 img {width: 100%;} .pc-salon-info-2 {margin-left: 20px;} .salon-tel-sta, .salon-tel-info {float: left;} .salon-tel-sta {margin-left: 20px;} .sp-nav-btn { float: right; display: block; width: 50px; height: 50px;} header {height : 50px;} .logo-area {height: 50px;} .logo {left: 10%;} nav { clear : both; position : absolute; width : 120%; background : #fff; display : none; margin-top : 50px; z-index : 9999; margin-left : -10%; padding : 0 10% 0 10%; } nav ul {display: block; width: 90%;} nav ul li {width: 100%; clear: both; padding: 20px; border-bottom: 1px solid #ccc; text-align: center;} nav ul li:last-child {border-bottom: 0;} nav ul li:first-child {border-top: 1px solid #ccc;} nav ul li:last-child {padding: 20px 0;} .nav-margin {padding-top: 50px;} .r-nav {float: none; border: none; color: #fff; background: #122a88; width: 100%; border-radius: 5px; padding: 20px 0;} .r-nav img {display: none;} .logo-area {margin-right: 0; z-index: 9999999;} .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 25px; right: 5px; top: 13px;} .menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #333; border-radius: 4px; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 11px; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger::after { position : absolute; top : 100%; left : 100%; display : block; content : ''; width : 30px; height : 30px; margin : -31px 0 0 -29px; border-radius : 50%; border : 4px solid transparent; transition : all .75s; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(11px) translateX(5px) rotate(-45deg); transform: translateY(11px) translateX(5px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(2) { left: 60%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards; } @-webkit-keyframes active-menu-bar02 { 100% { height: 0; } } @keyframes active-menu-bar02 { 100% { height: 0; } } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) translateX(5px) rotate(45deg); transform: translateY(-10px) translateX(5px) rotate(45deg); } .menu-trigger.active::after { -webkit-animation: circle .4s .25s forwards; animation: circle .4s .25s forwards; } @-webkit-keyframes circle { 0% { border-color: transparent; -webkit-transform: rotate(0); } 25% { border-color: transparent #333 transparent transparent; } 50% { border-color: transparent #333 #333 transparent; } 75% { border-color: transparent #333 #333 #333; } 100% { border-color: #333; -webkit-transform: rotate(-680deg); } } @keyframes circle { 0% { border-color: transparent; transform: rotate(0); } 25% { border-color: transparent #333 transparent transparent; } 50% { border-color: transparent #333 #333 transparent; } 75% { border-color: transparent #333 #333 #333; } 100% { border-color: #333; transform: rotate(-680deg); } } .subvisual { position:static; background: #ffffff; /* Old browsers */ background: -webkit-linear-gradient(#ffffff 0%, #ffffff 25%, #f7f7f4 25%, #f7f7f4 50%, #f7f7f4 76%, #ffffff 76%, #ffffff 100%); background: -o-linear-gradient(#ffffff 0%, #ffffff 25%, #f7f7f4 25%, #f7f7f4 50%, #f7f7f4 76%, #ffffff 76%, #ffffff 100%); background: linear-gradient(#ffffff 0%, #ffffff 25%, #f7f7f4 25%, #f7f7f4 50%, #f7f7f4 76%, #ffffff 76%, #ffffff 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ width: 100%; } /*subarea*/ .subttl { text-align: center; } .subvisual img { position: relative; width: 80%; left: 16%; bottom: 0; } .subvisual-area { background-color: #fff; position: static; margin-bottom: 0px; } /* hairestetic */ #hairestetic .subtext-area { background-image: none; width: 100%; height: auto; } #hairestetic .subtext-area p { padding-left: 0px; } #hairestetic .sp-disp { margin:0 auto; text-align: center; } /*#bridal .col-box img { margin-bottom:20px; }*/ /*COMPANY*/ .company-img { width: 100%; position: relative; padding-top: 40px; } .company-img img { width: auto; max-height: 270px; float: left; } .profile { position: static; display: block; margin: 0 auto; } .profile table {width: 100%;} .map iframe { width: 100%!important; height: 400px; } .map-btn {margin: 1rem ;} /* ---------------------------------------------------------------------------------------------------------------- */ } @media screen and (max-width:860px) { .prod-area {top: 22vh;} } @media screen and (max-width:800px) { .prod-area {top: 20vh;} } /* -------------------------------------------------------------------------------------------------------------------- */ /* tablet */ /* -------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:768px) { /* S tablet */ /* ---------------------------------------------------------------------------------------------------------------- */ .col-box .col-1 {width: 100%;} .col-box .col-2 {width: 47%;} .col-box .col-3 {width: 30%;} .col-box .col-sub-nav {width: 49.5%; margin-bottom: 10px;} .prod-area {top: 12vh;} .sp-col-1 {width: 100%;} .sp-col-2 {width: 47%;} .col-box main {width: 100%;} .col-box aside {width: 100%;} .tab-max {width: 100%!important;} .btn-tel img {width: 3.5vw;} .menu-area dd {width: 30%;} .menu-area dt {clear: both; width: 70%;} .wp-pagenavi span.extend, .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi a:active, .wp-pagenavi span.current {padding: 11px 14px 11px 14px!important;} .side-menu-wide {width: 100%!important;} .side-menu-wide .btn-link {width: 100%!important;} .salon-tel-sta {margin-left: 0;} .pc-salon-info-1, .pc-salon-info-2 {margin-left: 0;} .sp-fs-10 {font-size: 1.0rem!important;} .sp-fs-11 {font-size: 1.1rem!important;} .sp-fs-12 {font-size: 1.2rem!important;} .sp-fs-13 {font-size: 1.3rem!important;} .sp-fs-14 {font-size: 1.4rem!important;} .sp-fs-15 {font-size: 1.5rem!important;} .sp-fs-16 {font-size: 1.6rem!important;} .sp-fs-17 {font-size: 1.7rem!important;} .sp-fs-18 {font-size: 1.8rem!important;} .sp-fs-19 {font-size: 1.9rem!important;} .sp-fs-20 {font-size: 2.0rem!important;} .sp-fs-21 {font-size: 2.1rem!important;} .sp-fs-22 {font-size: 2.2rem!important;} .sp-fs-23 {font-size: 2.3rem!important;} .sp-fs-24 {font-size: 2.4rem!important;} .sp-fs-25 {font-size: 2.5rem!important;} .sp-fs-26 {font-size: 2.6rem!important;} .sp-fs-27 {font-size: 2.7rem!important;} .sp-fs-28 {font-size: 2.8rem!important;} .sp-fs-29 {font-size: 2.9rem!important;} .sp-fs-30 {font-size: 3.0rem!important;} .sp-fs-31 {font-size: 3.1rem!important;} .sp-fs-32 {font-size: 3.2rem!important;} .sp-fs-33 {font-size: 3.3rem!important;} .sp-fs-34 {font-size: 3.4rem!important;} .sp-fs-35 {font-size: 3.5rem!important;} .sp-fs-36 {font-size: 3.6rem!important;} .sp-fs-37 {font-size: 3.7rem!important;} .sp-fs-38 {font-size: 3.8rem!important;} .sp-fs-39 {font-size: 3.9rem!important;} .sp-fs-40 {font-size: 4.0rem!important;} .twitter-share-btn {margin-top: 15px;} .wp-pagenavi {display: flex!important; justify-content: flex-start; flex-wrap: wrap; align-items: center; text-align: center;} .wp-pagenavi .pages {display: block; width: 100%;} .wp-pagenavi .page {} .brand-text { line-height: 1.8; font-size: 1.6rem; text-align: left; margin-top: 15px; margin-bottom: 30px; } .sp-txt-c img {float: none;} /* ---------------------------------------------------------------------------------------------------------------- */ img { max-width : 100%; height : auto; width /***/ : auto; } /* E tablet */ } @media screen and (max-width:640px) { .sp-br {display: block;} .sp-txt-c {text-align: center!important;} .sp-txt-l {text-align: left!important;} .sp-txt-r {text-align: right!important;} } /* -------------------------------------------------------------------------------------------------------------------- */ /* smart phone */ /* -------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:640px) { /* S smart phone */ /* ---------------------------------------------------------------------------------------------------------------- */ .col-box .col-1 {width: 100%;} .col-box .col-2 {width: 100%;} .col-box .col-3 {width: 100%;} .col-box .col-4 {width: 30%;} .col-box .col-sub-nav {width: 100%; margin-bottom: 2px;} #nail .col-box .col-4 { width: 50%; } .sp-non {display: none;} .sp-col-3 .col-box .col-3 {width: 30%;} .sp-col-2 {width: 47%; float: left;} .sp-col-2-r {margin-left: 10px;} .sp-col-2 p {font-size: 1.4rem; margin-bottom: 20px; } .sp-max {width: 100%;} .sp-mb10 {margin-bottom: 10px;} .footer-nav {font-size: 3.5vw;} .salon-area-nav li {width: 50%;} .salon-area-nav .area-title {width: 100%; margin-bottom: 20px; display: block;} .salon-box .col-2 {width: 50%;} .salon-info {padding-left: 10px; font-size: 2.5vw;} .sp-salon-l {width: 38%!important;} .sp-salon-r {width: 60%!important;} .prod-area {top: 20vh;} .prod-title {font-size: 9.6vw;} .prod-copy {font-size: 5.6vw;} .prod-item-l {float: none; width: 100%;} .prod-item-r {float: none; width: 100%; margin-left: 0;} .prod-title-boder {text-align: left;} .prod-pc-top {margin-top: 80px;} .sp-ml-5per {margin-left: 5%;} nav ul {margin-left: 5%;} /* ---------------------------------------------------------------------------------------------------------------- */ .topic-title {font-size: 1.6rem;} /* price */ .price-box { padding: 2rem; margin-bottom: 2rem; } /* nail */ .nail-img-list {padding :0 0.5rem 2rem;} img { max-width : 100%; height : auto; width /***/ : auto; } /*COMPANY*/ .company-img { width: 100%; position: relative; padding-top: 40px; } .company-img img { max-width: 50%; height: 150px; float: left; } .profile table { font-size: 1.3rem;} .profile table th { padding: 15px 15px; width: 30%; } .profile table td { padding: 14px 15px;} .map-btn { margin-left: 0rem;} .profile h4 { font-size: 13px;} /* E smart phone */ }