@charset "UTF-8";

@media print, screen and (min-width:980px) {

.pc,
#menu,
.panel-header {
display: none;
}

#panel {
background: #202020;
}

.navSp {
display: none !important;
}

#mainAll {
position: relative;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}

.Opening {
position:relative;
}

.Opening ul li {
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
}

.Opening ul li span {
}

.Opening ul li span img.Opening__img {
max-width: inherit;
width: 100%;
height: auto;
}

#mainLogo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 284px;
text-align: center;
z-index: 100;
}

#tickerArea {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 120px 0 0 100vw;
border-color: transparent transparent transparent #181818;
bottom: 0;
left: 0;
z-index: 100;
}

#ticker {
position: absolute !important;
color: #fff;
width: 660px;
text-align: left;
margin: 0;
overflow: hidden;
bottom: 20px;
left: 30px;
z-index: 101;
line-height: 1.5;
}

#ticker ul {
position: relative;
width: 100%;
}

#ticker ul li {
width: 100%;
font-size: 13px;
font-weight: 400;
text-align: left;
line-height: 2;
}

.mainNews {
position: relative;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1;
top: 16px;
}

.mainNewsNumbers {
position: relative;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 100px;
font-weight: 300;
margin-left: 5px;
line-height: 1.2;
top: 16px;
}

.mainNewsDate {
position: relative;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 18px;
font-weight: 700;
top: 16px;
left: 8px;
line-height: 1;
}

.wrapperAbout {
overflow: hidden;
width: 100%;
margin: 0 auto;
padding: 100px 0 100px;
}

.conceptProductArea {
position: relative;
margin: 0 auto;
padding: 20rem 6rem 15rem;
}

.concept {
background: url(../img/kaidan.jpg) no-repeat bottom;
background-size: cover;
width: 100%;
height: 860px;
}

.access_img {
    background: url(../img/chapche_acess_image.jpg) no-repeat bottom;
    background-size: auto;
    background-size: cover;
    width: 100%;
    height: 460px;
  }

#conceptTitleArea {
position: absolute;
height: 50px;
color: #fff;
text-align: center;
padding: 0;
left: 35%;
top: -240px;
bottom: 0;
margin: auto;
z-index: 1000;
font-size:1.4rem;
}

.conceptTitle {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 82px;
color: #fff;
letter-spacing: 3px;
padding-left: 3px;
padding-bottom: 40px;
line-height: 1;
width:300px;
margin:0 auto;
}

#productLady {
background: url(https://mermaidandguys.com/common/img/product_lady3.jpg) no-repeat bottom;
background-size: cover;
width: 100%;
height: 860px;
}

#productMen {
background: url(../img/kaidan.jpg) no-repeat bottom;
background-size: cover;
width: 100%;
height: 860px;
}

#productSnow {
background: url(https://mermaidandguys.com/common/img/product_snow.jpg) no-repeat bottom;
background-size: cover;
width: 100%;
height: 860px;
}

#productTitleArea {
position: relative;
height: 50px;
color: #fff;
text-align: center;
padding: 0;
/* right: 120px; */
top: -500px;
bottom: 0;
margin: auto;
z-index: 100;
}

.productTitle {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 82px;
height: 50px;
color: #000;
letter-spacing: 3px;
margin-bottom: 70px;
}

.wrapperBl {
position: relative;
width: 100%;
margin: 0 auto;
padding: 40px 0;
}

/* .wrapperOnlinestore {
background: #202020;
position: relative;
width: 100%;
margin: 0 auto;
padding: 40px 0;
} */

.wrapperWh {
position: relative;
background: #fff;
width: 100%;
color: #000;
margin: 0 auto;
padding: 30px 0;
}

.wrapperRider {
width: 1100px;
margin: 0 auto;
padding: 0;
}

.wrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
}

.wrapperCo {
overflow: hidden;
width: 1100px;
margin: 30px auto;
padding: 0 0 30px 0;
}

#wrapperVideo {
position: relative;
background: url(../img/video_index_bg.jpg) no-repeat center;
background-size: cover;
width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px 0 50px 0;
}

.title {
font-family: 'Pathway Gothic One', sans-serif;
display: table;
text-align: center;
font-size: 64px;
color: #fff;
margin: 20px auto;
padding: 0 0 0 3px;
letter-spacing: 3px;
line-height: 1;
width:auto;
}

.titleWh {
font-family: 'Pathway Gothic One', sans-serif;
display: table;
text-align: center;
font-size: 64px;
color: #000;
margin: 20px auto;
padding: 0 0 0 3px;
letter-spacing: 3px;
line-height: 1;
}

.titleRiders {
font-family: 'IM Fell DW Pica SC', serif;
display: table;
text-align: center;
font-size: 60px;
color: #000;
margin: 0 auto;
padding: 0 0 0 3px;
letter-spacing: 3px;
transform: rotate(-5deg);
}

#aboutL {
position: relative;
float: left;
width: 50%;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
box-sizing: border-box;
z-index: 0;
}

#aboutLTitle {
position: absolute;
left: 0;
right: -180%;
top: 40px;
margin: auto;
z-index: 1;
}
#aboutLTitle_y {
  position: absolute;
  left: -70%;
  right: 0%;
  top: 20px;
  margin: auto;
  z-index: 1;
}

.protectLine {
display: table;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 82px;
color: #fff;
text-align: center;
letter-spacing: 3px;
margin: 0 auto;
line-height: 1;
}

.protectLineSe {
display: table;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 40px;
color: #fff;
text-align: center;
letter-spacing: 3px;
margin: 0 auto;
line-height: 1;
width:500px;
right:-5%;
}
.protectLineSe_limit {
  display: table;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 40px;
  color: #fff;
  text-align: center;
  letter-spacing: 3px;
  margin: 0 auto;
  line-height: 1;
  width:700px;
  position:absolute;
  left: -100px;
  top: -70px;
  }

.protectLineArrow {
position: absolute;
width: 23px;
left: 40px;
right: -340px;
top: 222px;
margin: auto;
z-index: 1;
}

.protectLineArrow::before{
position: absolute;
content: "";
display: block;
width: 114px;
height: 1px;
left: -70px;
top: 0;
margin: auto;
background: #fff;
}

.protectLineArrow::after{
content: "";
display: block;
border-top: 1px solid #fff;
margin-right: -30px;
margin-top: -18px;
transform: rotate(45deg);
}

#aboutR {
position: relative;
float: right;
width: 50%;
text-align: center;
margin: 0;
padding: 0;
box-sizing: border-box;
z-index: 0;
}

#aboutRTitle {
position: absolute;
left: -5%;
right: 0;
top: 77px;
bottom: 0;
z-index: 1;
}

.hairCareLine {
display: table;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 82px;
color: #00a4e3;
text-align: center;
letter-spacing: 3px;
margin: 0 auto;
line-height: 1;
}

.hairCareLineSe {
display: table;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 40px;
color: #fff;
text-align: center;
letter-spacing: 3px;
right:100%;
bottom: -100px;
margin: 0 auto;
line-height: 1;
width:300px;
}

.hairCareLineArrow {
position: absolute;
width: 23px;
left: 40px;
right: -266px;
top: 222px;
margin: auto;
z-index: 1;
}

.hairCareLineArrow::before{
position: absolute;
content: "";
display: block;
width: 114px;
height: 1px;
left: -70px;
top: 0;
margin: auto;
background: #fff;
}

.hairCareLineArrow::after{
content: "";
display: block;
border-top: 1px solid #fff;
margin-right: -30px;
margin-top: -18px;
transform: rotate(45deg);
}

#aboutL img,
#aboutR img {
width: 70%;
}

figure {
width: 100%;
margin: 0;
padding: 0;
background: none;
overflow: hidden;
}

figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}

.productsBl {
background: #181818;
width: 800px;
text-align: center;
margin: 0 auto;
padding: 40px 0;
border-radius: 10px;
box-sizing: border-box;
}

.productsWh {
position: relative;
background: url(../img/products_bg_wh.jpg) no-repeat;
background-size: cover;
width: 1100px;
text-align: left;
color: #000;
margin: 0 auto;
padding: 30px 200px 30px 34px;
border-radius: 10px;
box-sizing: border-box;
}

.productsTitle span {
display: block;
}

.productsEnclosure {
margin: 0 0 0 10px;
padding: 1px 5px 2px 5px;
border: 1px solid #fff;
border-radius: 5px;
line-height: 1;
}

.lineup {
display: inline-block;
width: 245px;
text-align: center;
margin: 0 auto;
padding: 0;
vertical-align: top;
z-index: 1;
}

.productsPhoto {
height: 300px;
}

.productsPhoto img {
height: 280px;
margin: 0 auto;
}

.ppSmall img {
height: auto;
margin: 0 auto;
padding-top: 78px;
}

.button {
font-family: 'Pathway Gothic One', sans-serif;
clear: both;
display: table;
width: 180px;
height: 40px;
font-size: 17px;
text-align: center;
line-height: 0px;
outline: none;
margin: 0 auto;
border: 1px solid #fff;
border-radius: 100px;
position:absolute;
}

.button:hover {
background: #fff;
color: #000;
text-decoration: none;
transition: all .3s ease-out;
}

.buttonDi {
font-family: 'Pathway Gothic One', sans-serif;
clear: both;
display: table;
width: 100px;
font-size: 17px;
text-align: center;
line-height: 26px;
outline: none;
margin: 0 auto;
border: 1px solid #fff;
border-radius: 100px;
}

.buttonDi:hover {
background: #fff;
color: #000;
text-decoration: none;
transition: all .3s ease-out;
}

.buttonWh {
font-family: 'Pathway Gothic One', sans-serif;
clear: both;
display: table;
width: 180px;
height: 40px;
font-size: 17px;
color: #fff !important;
text-align: center;
line-height: 39px;
outline: none;
margin: 0 auto;
border: 1px solid #fff;
border-radius: 100px;
}

.buttonWh:hover {
background: #fff;
color: #fff !important;
text-decoration: none;
transition: all .3s ease-out;
}

.rider {
display: inline-block;
color: #000;
margin: 0 5px 30px 5px;
padding: 0;
line-height: 1.5
}

.rider img {
margin-bottom: 10px;
border-radius: 10px;
}

.instagram {
position: relative;
overflow: hidden;
display: inline-block;
background: #fff;
width: 260px;
font-size: 10px !important;
text-align: left;
margin:  2px 3px 9px 3px;
padding: 10px 10px 74px 10px;
box-sizing: border-box;
border: 1px solid #ddd;
letter-spacing: 0;
vertical-align: top;
}

.instagramCo {
position: relative;
overflow: hidden;
display: inline-block;
background: #fff;
width: 260px;
font-size: 10px !important;
text-align: left;
margin:  2px 3px 9px 3px;
padding: 10px 10px 74px 10px;
box-sizing: border-box;
border: 1px solid #ddd;
letter-spacing: 0;
vertical-align: top;
}

.instagram img,
.instagramCo img {
width: 238px;
}

.sb_instagram_header {
position: absolute;
bottom: -2px;
left: 10px;
font-size: 10px !important;
}

.sb_instagram_header_no {
position: absolute;
background: url(../img/riders_fb.png) no-repeat left;
background-size: 50px;
color: #000;
bottom: 13px;
left: 10px;
font-size: 14px !important;
padding: 0 0 0 60px;
line-height: 50px;
}

.sb_instagram_header_no_am {
position: absolute;
background: url(../img/riders_am.png) no-repeat left;
background-size: 50px;
color: #000;
bottom: 13px;
left: 10px;
font-size: 14px !important;
padding: 0 0 0 60px;
line-height: 50px;
}

#news {
margin-bottom: 30px;
}

#news dt {
clear: left;
float: left;
text-align: left;
width: 130px;
padding: 13px 5px;
}

#news dd {
text-align: left;
margin: 0;
padding: 13px 5px 13px 150px;
border-bottom: 1px dotted #666;
}

#siteMap {
margin-bottom: 30px;
}

#siteMap dt {
clear: left;
float: left;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 18px;
text-align: left;
padding: 13px 5px;
}

#siteMap dd {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 18px;
text-align: left;
margin: 0;
padding: 13px 5px 13px 300px;
border-bottom: 1px dotted #666;
}

#titleAreaConcept {
background: url(../img/concept_bg.jpg) no-repeat center;
background-size: cover;
font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaOnlineStore {
display: none;
}

#titleAreaRiders {
background: url(../img/riders_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaNews {
background: url(../img/news_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaVideo {
background: url(../img/video_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaShoplist {
background: url(../img/shoplist_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaCompany {
background: url(../img/company_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaContact {
background: url(../img/contact_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

#titleAreaPrivacySitemap {
background: url(../img/privacy_sitemap_bg.jpg) no-repeat center;
background-size: cover;	font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
height: 490px;
font-size: 70px;
line-height: 556px;
padding: 0 0 0 3px;
letter-spacing: 3px;
box-sizing: border-box;
}

/**/

#pankuzuArea {
width: 1100px;
font-size: 11px;
text-align: left;
margin: 0 auto;
padding: 10px 0 0 0;
}

#commonTitle  {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 60px;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
padding: 0;
line-height: 1.2;
}

/*Table*/

.spTable {
width: 100%;
margin: 0 auto;
border-collapse: collapse;
table-layout: fixed;
}

.spTable td {
background-color: #e0eecc;
text-align: center;
padding: 10px;
border: 1px solid #ddd;
vertical-align: middle !important;
}

.tableTitle {
background-color: #64b72f !important;
color: #fff;
}

/*Photo*/

.alignright {
float: right;
margin:  0 0 30px 30px;
}

.alignleft{
float: left;
margin:  0 20px 30px 0;
}

.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}

.ridersArea {
display: inline-block;
width: 346px;
margin: 0 17px 0 0;
padding: 0;
vertical-align: top;
}

.ridersArea img {
width: 346px;/* トリミングしたい枠の幅 */
height: 230px;/* トリミングしたい枠の高さ */
object-fit: cover;
margin-bottom: 10px;
border-radius: 5px;
}

.postTitleArea {
background: #2E2E2E;
width: 100%;
font-size: 20px;
margin: 10px auto;
padding: 30px 0 32px 0;
box-sizing: border-box;
}

.postTitleAreaInner {
width: 1100px;
margin: 0 auto;
padding: 0;
}

.postTitleAreaInner h3 {
line-height: 1.4;
margin-bottom: 5px;
}

.videoArea {
display: inline-block;
width: 340px;
margin: 0 10px;
margin-bottom: 30px;
padding: 0;
vertical-align: top;
}

.videoTxt {
text-align: left;
margin: 10px auto;
padding: 0;
}

#regionArea {
background: #2E2E2E;
width: 100%;
margin: 10px auto;
padding: 18px 0;
box-sizing: border-box;
}

#regionArea ul li {
display: inline-block;
}

#regionArea ul li a {
background: #202020;
display: block;
width: 130px;
height: 50px;
margin: 0 2px;
padding: 0;
line-height: 44px;
box-sizing: border-box;
border: 2px solid #494949;
cursor: pointer;
}

#regionArea ul li a:hover {
background: #494949;
text-decoration: none;
transition: 0.3s ease-in-out;
}

#regionTitle  {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 60px;
text-align: center;
margin: 0 auto;
padding: 0;
line-height: 1.2;
}

.regionJa {
display: block;
font-size: 12px;
}

.prefecturesTitle {
clear: both;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 50px;
text-align: left;
margin: 0 auto;
padding: 0;
}

.shopArea {
overflow: hidden;
margin: 0 auto;
padding: 13px 0;
border-bottom: 1px dotted #666;
box-sizing: border-box;
}

.shopName {
float: left;
width: 380px;
text-align: left;
margin: 0 10px 0 0;
padding: 0;
}

.shopAddress {
float: left;
width: 520px;
text-align: left;
margin: 0 10px 0 0;
padding: 0;
}

.shopTel {
float: left;
width: 180px;
text-align: right;
margin: 0;
padding: 0;
}

#company dt {
clear: left;
float: left;
text-align: left;
padding: 13px 5px;
}

#company dd {
text-align: left;
margin: 0;
padding: 13px 5px 13px 200px;
border-bottom: 1px dotted #666;
}

#contact dt {
clear: left;
float: left;
text-align: left;
padding: 13px 0 13px 5px;
}

#contact dd {
text-align: left;
margin: 0;
padding: 13px 5px 13px 280px;
border-bottom: 1px dotted #666;
}

#buttonArea {
text-align: center;
margin: 0 auto;
margin-top: 30px;
padding: 0;
}

button.submitButton {
background-color: #eb5c02;
width: 200px;
font-size: 14px;
font-weight: 600;
color: #fff;
text-align: center;
margin: 0 3px;
padding: 12px 0px;
line-height: 100%;
border-radius: 5px;
cursor: pointer;
border: 0;
box-shadow: none;display: inline-block;
}

button.submitButton:hover {
text-decoration: none;
background-color: #f19149;
color: #fff;
transition: 0.3s ease-in-out;
}

button.resetButton {
background-color: #808080;
width: 200px;
font-size: 14px;
font-weight: 600;
color: #fff;
text-align: center;
margin: 0 3px;
padding: 12px 0px;
line-height: 100%;
border-radius: 5px;
cursor: pointer;
border: 0;
box-shadow: none;display: inline-block;
}

button.resetButton:hover {
text-decoration: none;
background-color: #6D6D6D;
color: #fff;
transition: 0.3s ease-in-out;
}

footer {
position: relative;
background-color: #181818;
width: 100%;
margin: 0 auto;
padding: 0;
}

footer i {
margin: 10px 2px;
}

#waveWh {
position: absolute;
background: url(../img/wave_wh.png) no-repeat center top;
background-size: cover;
width: 100%;
height: 300px;
bottom: 0;
z-index: 101;
}

#footerArea {
position: relative;
font-family: 'Pathway Gothic One', sans-serif;
width : 1100px;
font-size: 14px;
text-align: center;
color: #666;
margin: 0 auto;
padding: 50px 0 50px 0;
}

#footerArea img {
margin: 10px 3px;
width:300px;
}

#footerLinks {
margin-bottom: 20px;
}

#footerLinks li {
font-family: 'Pathway Gothic One', sans-serif;
display: inline-block;
font-size: 14px;
margin: 0;
padding: 0 10px 0 12px;
border-left: 1px solid #666;
border-right: 1px solid #666;
line-height: 110%;
}

#footerLinks li+ li {
border-left: 0;
border-right: 1px solid #666;
padding: 0 10px 0px 7px;
}

#footerLinks li a:link { color: #ccc; text-decoration: none;}
#footerLinks li a:visited { color: #ccc; text-decoration: none;}
#footerLinks li a:hover { color: #fff; transition: color 0.3s ease 0s;}
#footerLinks li a:active { color: #ccc; }

#copyRightArea {
background-color: #202020;
font-family: 'Pathway Gothic One', sans-serif;
width : 100%;
font-size: 11px;
color: #666;
text-align: center;
margin: 0 auto;
padding: 10px 20px;
line-height: 1;
box-sizing: border-box;
}

.pagetop {
position: fixed;
background-color: #202020;
width: 70px;
height: 70px;
bottom: -5-px;
right: 0;
z-index: 200;
display: block;
}

.pagetop a {
display: block;
cursor: pointer;
}

.pagetop a span {
display: block;
width: 70px;
height: 70px;
text-indent: -10000px;
font-size: 1px;
cursor: pointer;
}

.pagetopArrow {
position: absolute;
width: 30px;
left: 0;
right: 0;
bottom: 30px;
margin: auto;
z-index: 201;
}

.pagetopArrow::before{
position: absolute;
content: "";
display: block;
width: 1px;
height: 30px;
left: 0;
right: 0;
top: 64px;
margin: auto;
background: #ccc;
}
.pagetopArrow::after{
content: "";
display: block;
border-top: 1px solid #ccc;
margin-left: 13px;
margin-bottom: 12px;
transform: rotate(45deg);
}

}