/*
 Theme Name:   H°M'S" WatchStore
 Template:     twentyseventeen
*/
/*====================================

	----------------------------------
		Color
	----------------------------------

	Main     : #000
    Accent   : #f15a24

	----------------------------------
  		font
	----------------------------------

  	JP : a-otf-midashi-go-mb31-pr6n / Yu Mincho / Hiragino Kaku Gothic ProN + メイリオ(windows用)
    EN : Berthold_Akzidenz_Grotesk_Regular

	----------------------------------
  		Structure
  	----------------------------------

  	0. General
  	1. Header
  		1.1	General Header
  		1.2 Mobile Header
  	2. Main
  	3. Footer
  	4. Page
  		4.1 Service
  		4.2 FAQ
  		4.3 About Us
  		4.4 Customer Voices
  		4.5 News
  		4.6 Hiring
  		4.7 Contact Us
  	5. Contact Form
  	6. 404
  	7. Media Query
  		7.1 1080px
  		7.2 768px
  		7.3 480px

  	----------------------------------
  		Change Log
  	----------------------------------


====================================*/
/*====================================

	0. General

====================================*/
html {
    font-family: "Berthold_Akzidenz_Grotesk_Regular", "a-otf-midashi-go-mb31-pr6n";
    font-weight: bold;
    line-height: 1.8;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    background: #e6e6e6;
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    /* 16px */
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

/* font */
@font-face {
    font-family: "Berthold_Akzidenz_Grotesk_Regular";
    /* フォントに名前を付ける */
    src: url('/fonts/Berthold-Akzidenz-Grotesk-BE-Regular.woff');
    /* フォントのURLを指定する */
}

.yu_mincho {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-feature-settings: "palt";
    font-weight: normal;
}

.hiragino {
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    font-weight: normal;
}

/* typekit */
.wf-loading {
    visibility: hidden;
}

.wf-active {
    visibility: visible;
}

.wf-inactive {
    visibility: visible;
}

button {
    font-family: "Berthold_Akzidenz_Grotesk_Regular";
}

h1,
h2,
h3 {
    padding: 0;
    margin: 0;
    font-weight: bold;
}

img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

a {
    color: #000;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    list-style: none;
}

/* Hides from IE Mac */
* html .clearfix {
    height: 1%;
}

/* input focus / none */
input,
textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-appearance: none;
    max-width: 100%;
}

input[type="text"],
input[type="password"],
textarea,
select {
    outline: none;
    border-radius: 0;
}

/* Change the white to any color ;) */
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

/* common */
.article_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}

.article_col {
    display: flex;
    justify-content: space-between;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col_2 {
    width: 49%;
    margin: 0 2% 2% 0;
}

.col_2:nth-child(2n) {
    margin-right: 0;
}

.col_3 {
    width: 32%;
    margin: 0 2% 2% 0;
}

.col_3:nth-child(3n) {
    margin-right: 0;
}

.col_4 {
    width: 23.5%;
    margin: 0 2% 2% 0;
}

.col_4:nth-child(4n) {
    margin-right: 0;
}

.col_5 {
    width: 18.4%;
    margin: 0 2% 2% 0;
}

.col_5:nth-child(5n) {
    margin-right: 0;
}

.article_list .thumnail {
    width: 100%;
    height: auto;
}

.article_list .title {
    font-size: 1.4rem;
    margin: 10px 0 5px;
    display: block;
}

.article_list .date {
    font-size: 1.2rem;
    color: #999;
    margin: 0;
}

.article_list p.tag {
    text-align: center;
    padding: 0 0 5px;
    margin: 0 0 20px;
    border-bottom: 1px solid #999;
}

.new_mark {
    color: #f15a24;
    margin: 0 10px 0 0;
}

.w_1200 {
    width: 1200px;
    margin: 0 auto;
}

.inner_col_2 {
    display: flex;
}

.inner_col_2 .left {
    width: 20%;
    margin: 0 20px 0 0;
    box-sizing: border-box;
}

.inner_col_2 .left .left_item {
    margin: 0 0 40px;
}

.inner_col_2 .left .left_item h3 {
    margin: 0 0 10px;
}

.inner_col_2 .left .left_item a.tag-cloud-link {
    padding: 0.5% 4%;
    border: 1px solid #333;
    border-radius: 25px;
    box-sizing: border-box;
    margin-bottom: 2%;
    display: inline-block;
}

.inner_col_2 .left .left_item a.tag-cloud-link::before {
    content: "#";
}

.inner_col_2 form.search_form {
    position: relative;
}

.inner_col_2 input[type="text"] {
    border: none;
    background: transparent;
    border-bottom: 1px solid #999;
    width: 100%;
    padding: 10px 15px 10px 0;
    box-sizing: border-box;
    font-size: 1.6rem;
}

.inner_col_2 button.search_submit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    border: none;
    background: transparent;
    padding: 0;
}

.inner_col_2 .right {
    width: 80%;
}

.inner_col_2 .right .inner_right {
    padding: 40px 0 20px;
    margin: 12px 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

/*====================================

	1. Header

====================================*/
header {
    width: 100%;
    padding: 0 60px;
    margin: 60px auto;
    position: fixed;
    z-index: 9999;
    box-sizing: border-box;
    background: transparent !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: normal;
}

header img {
    vertical-align: baseline;
}

header nav.nav_left h1 a {
    display: block;
}

nav.nav_right {
    position: relative;
    width: 35px;
    height: 40px;
}

header nav.nav_right img {
    width: 35px;
    position: absolute;
    left: 0;
    top: 0;
}

/* Slide menu css */
.sidebar {
    position: fixed;
    color: #fff;
    z-index: 99999;
    padding: 2%;
    box-sizing: border-box;
}

.sidebar ul {
    margin-top: 100px;
}

.sidebar ul.sns {
    display: flex;
    position: absolute;
    bottom: 9%;
}

.sidebar ul.sns li {
    margin-right: 15px;
}

.sidebar ul.sns li:last-child {
    margin: 0px;
}

.sidebar ul li:last-child {
    margin-top: 20px;
}

.sidebar ul li a {
    font-size: 18px;
}

.sidebar ul li a:hover {
    -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    /* ease-in-out */
    color: #f15a24;
}

.sidebar p {
    text-align: right;
    font-size: 18px;
}

.sidebar p img {
    width: 37px;
    position: absolute;
    right: 59px;
    top: 59px;
}

.sidebar.right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    background: #c8c9ca;
}

.close_area {
    width: 100% !important;
    height: 100%;
    background: transparent !important;
    padding: 0;
    position: fixed;
    z-index: 9999 !important;
}

.close_area a {
    display: block;
    width: 100%;
    height: 100%;
}

.close_area a:hover {
    cursor: default;
}

/*====================================

	2. Main

====================================*/
#main {
    width: 100%;
}

div.time {
    width: 100%;
    height: 100vh;
}

div.time .time_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.time .scroll_link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

p#view_clock {
    font-size: 64px;
}

#page {
    width: 100%;
    height: auto;
    padding: 10% 0 5%;
    background: #e6e6e6;
}

#page .page_content {
    width: 100%;
    height: auto;
    padding: 0 3%;
    box-sizing: border-box;
}

#page .page_content h2 {
    margin: 0 0 60px;
}

#content {
    width: 100%;
    height: 80vh;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
    background: #e6e6e6;
    padding: 0 3%;
    box-sizing: border-box;
}

#content a:hover {
    -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    /* ease-in-out */
    color: #f15a24;
}

/* About */
#page .about .concept {
    text-align: center;
    padding-bottom: 60px;
}

#page .about .concept img {
    width: 300px;
    height: auto;
}

#page .about .concept p {
    padding: 0;
    margin: 0;
    font-size: 14px;
}

#page .about .concept p.description_jp {
    margin-bottom: 60px;
}

/* information */
#information {
    width: 100%;
    padding: 40px 3% 0;
    box-sizing: border-box;
}

#information h2 {
    text-align: center;
    margin: 0 0 40px;
}

#information ul li:first-child {
    border-top: 1px solid #999;
}

#information ul li {
    border-bottom: 1px solid #999;
    box-sizing: border-box;
    padding: 8px 0 10px;
}

#information ul li h3 {
    line-height: 1;
}

#information ul li a {
    font-size: 1.4rem;
}

#information ul li a span.date {
    margin-right: 10px;
}

/* News Topic */
#news_topic {
    width: 100%;
    padding: 40px 3% 0;
    box-sizing: border-box;
}

#news_topic h2 {
    text-align: center;
    margin: 0 0 40px;
}

#news_topic .swiper-container {
    padding: 0 0 40px;
}

#news_topic .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50% !important;
    background: #333;
}

#news_topic .swiper-pagination-bullet-active {
    background: #f15a24 !important;
}

#whats_new {
    width: 100%;
    padding: 40px 3% 0;
    box-sizing: border-box;
}

#whats_new h2 {
    border-bottom: 1px solid #999;
}

#whats_new h2 span {
    font-size: 0.6rem;
    font-weight: 100;
    margin: 0 0 0 10px;
}

#whats_new ul {
    width: 100%;
    height: auto;
    margin: 80px 0 40px;
    padding: 0 80px;
    box-sizing: border-box;
}

.road_more_wrap {
    margin: 0 0 80px 0;
}

button.road_more_button {
    width: 250px;
    margin: 0 auto;
    background: transparent;
    padding: 15px;
    color: #000;
    font-size: 0.8rem;
    font-weight: bold;
    display: block;
    border: 1px solid #000;
}

.infinite-scroll-request,
.infinite-scroll-request:after {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.infinite-scroll-request {
    margin: 40px auto;
    font-size: 1rem;
    position: relative;
    text-indent: -9999em;
    border-top: 5px solid rgba(255, 255, 255, 0.3);
    border-right: 5px solid rgba(255, 255, 255, 0.3);
    border-bottom: 5px solid rgba(255, 255, 255, 0.3);
    border-left: 5px solid #f15a24;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.page_load_status p {
    text-align: center;
    font-size: 1rem;
}

/* Article */
div.article_wrap {
    display: flex;
}

div.article_wrap .article_main {
    width: 70%;
    margin: 0 60px 0 0;
    box-sizing: border-box;
}

div.article_wrap .article_main p.date {
    margin: 0 0 20px;
}

div.article_wrap .article_main h2.article_title {
    margin: 0 0 15px !important;
}

div.article_wrap .article_main img {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
}

div.article_wrap .article_main div.article_detail {
    font-weight: normal;
    font-size: 14px;
}

div.article_detail p {
    margin: 20px 0;
}

div.article_detail a {
    text-decoration: underline;
}

div.article_wrap .article_side {
    width: 30%;
}

div.article_wrap .article_side .side_item {
    margin: 0 0 40px;
}

div.article_wrap .article_side img {
    width: 100%;
    height: auto;
}

div.article_wrap .article_side p.side_title {
    text-align: center;
    margin: 0 0 20px;
    font-size: 2.2rem;
}

div.article_wrap .article_side p.side_title span {
    font-size: 1rem;
    display: block;
    font-weight: normal;
}

div.article_wrap .article_side ul li {
    margin-bottom: 5%;
}

div.article_wrap .article_side ul li a .article_thum {
    margin-bottom: 10px;
}

div.article_wrap .article_side ul li a span.title {
    display: block;
}

div.article_wrap .article_side ul li a span.date {
    font-size: 10px;
    color: #999;
    font-weight: normal;
    display: block;
}

div.other_article_wrap {
    margin: 40px 0;
}

div.other_article_wrap .thumnail img {
    margin: 0 !important;
}

div.other_article_wrap p.headline {
    font-size: 2rem;
    border-bottom: 1px solid #999;
    margin: 0 0 40px;
}

div.other_article_wrap p.headline span {
    font-size: 0.6rem;
    font-weight: 100;
    margin: 0 0 0 10px;
}

/* Blog */
#page .blog ul {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

#page .blog ul li .thumnail a {
    position: relative;
    display: block;
}

#page .blog ul li .thumnail a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.5);
}

#page .blog ul li .thumnail a:hover::after {
    background-color: rgba(0, 0, 0, 0);
}

#page .blog ul li .thumnail img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#page .blog ul li .thumnail:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

div.user_profile {
    width: 100%;
    display: flex;
    align-items: center;
}

div.user_profile .profile_image {
    width: 20%;
    padding: 15px 15px 15px 0;
    box-sizing: border-box;
}

div.user_profile .profile_image img {
    border-radius: 100%;
    border: 1px solid #999;
}

div.user_profile .profile_detail {
    width: 80%;
}

div.user_profile .profile_detail p {
    font-size: 1rem;
    margin: 0;
}

/* Article */
div.article_user_profile {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 20px;
}

div.article_user_profile .profile_image {
    width: 10%;
    padding: 15px 15px 15px 0;
    box-sizing: border-box;
}

div.article_user_profile .profile_image img {
    border-radius: 100%;
    border: 1px solid #999;
    margin: 0;
}

div.article_user_profile .profile_detail {
    width: 90%;
}

div.article_user_profile .profile_detail p {
    margin: 0;
    font-size: 1rem;
}

div.article_tag_list {
    margin: 20px 0;
    border: 1px solid #999;
    padding: 20px;
}

div.article_tag_list ul {
    width: 100%;
}

div.article_tag_list ul li {
    display: inline-block;
    margin: 0 5px 5px 0;
}

div.article_tag_list ul li a {
    padding: 2.5px;
    box-sizing: border-box;
    font-size: 1.2rem;
}

div.article_ec_item_list .headline p span {
    font-size: 1rem;
    margin: 0 0 0 10px;
}

div.article_ec_item_list ul {
    display: flex;
    flex-wrap: wrap;
}

div.article_ec_item_list ul li a {
    display: block;
}

div.article_ec_item_list ul li img {
    margin: 0 0 6.3% !important;
}

div.article_ec_item_list ul li p {
    font-size: 1.2rem;
    line-height: 1;
    margin: 0 0 4%;
}

div.article_ec_item_list ul li p.item_name {
    font-size: 1.2rem;
    line-height: 1.6;
}

div.article_ec_item_list ul li p span.tax {
    margin: 0 0 0 2.5px;
    font-size: 0.8rem;
}

div.article_side ul {
    width: 100%;
}

div.article_side ul li {
    width: 100%;
    border-top: 1px solid #999;
    margin-bottom: 0 !important;
}

div.article_side ul li:last-child {
    border-bottom: 1px solid #999;
}

div.article_side ul li a {
    display: block;
}

div.article_pager {
    margin: 60px 0;
}

div.article_pager ul {
    display: flex;
    justify-content: space-between;
}

div.article_pager ul li a {
    font-size: 1.4rem;
}

div.side_article_wrap {
    display: flex;
    align-items: center;
    padding: 15px 0;
    box-sizing: border-box;
}

div.side_article_wrap .thum {
    width: 30%;
    margin: 0 10px 0 0;
    box-sizing: border-box;
}

div.side_article_wrap .detail {
    width: 70%;
}

div.side_article_wrap .detail span.title {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 2.5px;
}

div.side_article_wrap .detail span.date {
    font-size: 1rem;
}

/* Article - Add Quick Tag */
/* youtube*/
.youtube {
    position: relative;
    width: 100%;
    margin: 20px auto;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

/* テキスト中央揃え */
span.text_center {
    display: block;
    text-align: center;
}

/* Article - Add Quick Tag - End */

/* Pagination */
.pagination {
    width: 100%;
    text-align: right;
}

.pagination ul.page-numbers {
    display: flex;
    justify-content: flex-end;
    font-size: 1.2rem;
}

.pagination ul li {
    display: flex;
    align-items: center;
}

.pagination ul li span,
.pagination ul li a {
    margin: 2px 2px 2px 0;
    padding: 4px 12px;
    text-decoration: none;
    width: auto;
    color: #000;
    border: 1px solid #999;
}

.pagination ul li a:hover {}

.pagination ul li .current {
    padding: 4px 12px;
    color: #fff;
    background: #999;
}

.pagination ul li .dots {
    background: transparent;
    border: none;
    padding: 0 5px;
}

.pagination ul li .prev,
.pagination ul li .next {
    background: #333;
    color: #fff;
    border: 1px solid #333;
}

/* Author Archive */
div.author_profile_wrap {
    margin: 60px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.author_profile_wrap .author_profile {
    width: 20%;
}

div.author_profile_wrap .author_description {
    width: 35%;
}

div.author_profile {
    width: 100%;
    text-align: center;
}

div.author_profile p {
    width: 100%;
    display: block;
    margin: 0;
}

div.author_profile .profile_image {
    width: 100px;
    margin: 0 auto 20px;
}

div.author_profile .profile_image img {
    border-radius: 100%;
    border: 1px solid #999;
}

div.author_profile .profile_detail p.name {
    font-size: 1.4rem;
    display: block;
}

div.author_profile .profile_detail p.name a {
    text-decoration: underline !important;
}

div.author_profile .profile_detail p.position {
    font-size: 1.2rem;
}

div.author_profile .profile_detail ul.author_sns {
    display: flex;
    justify-content: center;
    margin: 10px 0 0;
}

div.author_profile .profile_detail ul.author_sns li {
    margin: 0 8px;
}

div.author_profile_wrap .author_description {
    font-size: 1.4rem;
}

div.author_article_list_wrap {
    width: 100%;
}

div.author_article_list_wrap p.title {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
    margin: 20px 0 40px;
    font-size: 2.2rem;
}

div.author_article_list_wrap p.title span {
    font-size: 1.2rem;
    display: block;
    font-weight: normal;
}

#page .author_article_list_wrap ul li .thumnail a {
    position: relative;
    display: block;
}

#page .author_article_list_wrap ul li .thumnail a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.5);
}

#page .author_article_list_wrap ul li .thumnail a:hover::after {
    background-color: rgba(0, 0, 0, 0);
}

#page .author_article_list_wrap ul li .thumnail img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#page .author_article_list_wrap ul li .thumnail:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

/* Search Results */
span.search_count {
    display: block;
    font-size: 1.2rem;
    color: #999;
}

#page .search_results ul li .thumnail a {
    position: relative;
    display: block;
}

#page .search_results ul li .thumnail a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.5);
}

#page .search_results ul li .thumnail a:hover::after {
    background-color: rgba(0, 0, 0, 0);
}

#page .search_results ul li .thumnail img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#page .search_results ul li .thumnail:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

/* Shop list */
#page .shoplist {
    padding-bottom: 60px;
}

#page .swiper_main {
    width: 100%;
    height: auto;
    padding-top: 60px;
    margin-bottom: 60px;
}

#page .swiper_main .swiper_left {
    float: left;
    width: 49.6%;
    margin-right: 1%;
}

#page .swiper-container {
    width: 100%;
    height: 500px;
}

#page .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

#page .swiper-slide img {
    width: 100%;
    height: auto;
}

.swiper-pagination-bullet {
    width: 4px;
    height: 15px;
    display: inline-block;
    border-radius: 0px !important;
    background: #000;
}

.swiper-pagination-bullet-active {
    background: #f15a24 !important;
}

#page .swiper_main .swiper_right {
    float: left;
    width: 40.4%;
}

#page .swiper_main .swiper_right p.fs_txt {
    margin-top: 0 !important;
    font-size: 24px;
}

#page .swiper_main .swiper_right p.en_address {
    font-weight: 100;
}

#page .shoplist ul {
    width: 100%;
    height: auto;
    padding: 60px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#page .shoplist ul li {
    width: 49.5%;
    height: auto;
    margin: 0 0 2% 0;
}

#page .shoplist ul li:nth-child(4n) {
    margin-right: 0;
}

#page .shoplist ul li h3 {
    font-weight: bold;
    font-size: 18px;
    padding: 0;
    margin-top: 10px;
}

#page .shoplist ul li p {
    margin: 5px 0 0;
    font-size: 14px;
}

#g_map {
    width: 100%;
    height: 300px;
    border: 1px solid #a9a9a9;
}

#g_map .gmnoprint {
    display: none !important;
}

div[id*="ez-map"] {
    min-height: 150px;
    min-width: 150px;
    height: 300px;
    width: 100%;
}

/* Brand */
#page .brand .brand_list {
    margin: 60px 0;
}

#page .brand ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

#page .brand ul li a .brand_logo {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
    background-color: #fff;
}

#page .brand ul li a .brand_logo img.horizontal {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#page .brand ul li a .brand_logo img.vertical {
    width: auto;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#page .brand ul li a:hover {
    opacity: 0.8;
}

/* #People */
#page .people h2 {
    text-align: center;
    font-size: 36px;
}

#page .people h2 span {
    display: block;
    font-size: 24px;
    letter-spacing: 3px;
}

#page ul.people_contents {
    margin: 120px 0 0;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
}

#page ul.people_contents li {
    width: 48%;
    margin-bottom: 4%;
}

#page ul.people_contents li p.title {
    margin: 20px 0 5px;
    font-size: 32px;
    font-weight: bold;
}

#page ul.people_contents li p {
    margin: 0;
}

/* #People - Article */
#page .people_article h2 {
    text-align: center;
    font-size: 36px;
}

#page .people_article h2 span {
    display: block;
    font-size: 24px;
    letter-spacing: 3px;
}

#page .people_article .article_wrap {
    margin: 120px 0;
    padding: 0;
    justify-content: space-between;
}

#page .people_article .article_wrap .article_main {
    width: 48%;
}

#page .people_article .article_wrap .article_main img {
    margin-bottom: 40px;
}

#page .people_article .article_wrap .article_side {
    width: 48%;
}

#page .people_article .article_wrap .article_side h3 {
    font-size: 36px;
    margin: 20px 0;
}

#page .people_article .article_wrap .article_side p {
    margin: 0;
    text-align: left !important;
    font-size: 14px;
}

#page .people_article .article_wrap .article_side .name_and_job {
    margin-bottom: 20px;
}

#page .people_article .article_wrap .article_side .word span p {
    margin-bottom: 20px;
}

#page .people_article .article_wrap .article_side p.name,
#page .people_article .article_wrap .article_side p.job {
    font-size: 18px;
    line-height: 1.8;
}

#page .people_article .article_wrap .article_side p.free_txt {
    font-size: 12px;
    font-weight: normal;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    line-height: 1.8;
}

#page .people_article .article_wrap .article_side ul.article_sns {
    margin: 60px auto;
    text-align: center;
}

#page .people_article .article_wrap .article_side ul.article_sns li {
    display: inline-block;
    border: none;
    width: 30px !important;
    text-align: center;
}

#page .people_article .article_wrap .article_side ul.article_sns li:first-child {
    width: 90px !important;
}

/* Footer */
footer {
    width: 100%;
    padding: 0px 3% 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

footer.top {
    width: 100%;
    padding: 0px 3% 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

footer nav {
    display: flex;
    justify-content: space-between;
}

footer nav a {
    font-size: 18px;
}

footer nav ul li a:hover {
    -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    /* ease-in-out */
    color: #f15a24;
}

footer nav ul.sns {
    display: flex;
}

footer nav ul.sns li {
    margin-right: 15px;
}

footer nav ul.sns li:last-child {
    margin-right: 0;
}

/* 404 */
div.not_content {
    width: 100%;
    text-align: center;
    margin: 60px 0;
}

div.not_content img {
    width: 500px;
    height: auto;
}

div.not_content p.not_word {
    font-size: 14px;
    font-weight: 500;
}

div.not_content a.top_btn {
    width: 250px;
    padding: 10px;
    color: #000;
    border: 1px solid #000;
    margin: 30px 0;
    display: inline-block;
}

div.not_content a.top_btn:hover {
    opacity: 0.8;
}

/* Resposive ↓ */
/* PC(非表示) */
.sp {
    display: none !important;
}

@media screen and (max-width: 1650px) {

    /* Shop list */
    #page .swiper_main {
        width: 100%;
        height: auto;
        padding-top: 20px;
    }

    #page .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 0px;
    }

    #page .swiper_main .swiper_left,
    #page .swiper_main .swiper_right {
        float: none;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    /* tablet(length) */
    /* 全ページ適用 */

    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    /* Header */

    header {
        width: 100%;
        padding: 20px;
        margin: 0 auto;
        position: fixed;
        z-index: 9999;
        box-sizing: border-box;
        background: transparent !important;
    }

    header nav.nav_left h1 a img {
        width: 70%;
    }

    nav.nav_right {
        position: relative;
        width: 25px;
        height: 25px;
    }

    header nav.nav_right img {
        width: 25px;
    }

    /* Slide menu css */

    .sidebar {
        padding: 0 20px;
    }

    .sidebar p img {
        width: 26px;
        position: absolute;
        right: 19px;
        top: 26px;
    }

    .sidebar.right {
        top: 0;
        right: 0;
        bottom: 0;
        width: 40%;
        background: #c8c9ca;
    }

    .sidebar ul li a {
        font-size: 14px;
    }

    /* Main contents */

    #page {
        width: 100%;
        height: auto;
        padding: 76px 20px 40px;
        box-sizing: border-box;
    }

    #page .page_content {
        max-width: 100%;
        width: 100%;
        height: auto;
        padding: 0;
    }

    #page .page_content h2 {
        font-size: 1.6rem;
    }

    #main {
        width: 100%;
        padding: 76px 20px 40px;
        box-sizing: border-box;
    }

    #content {
        width: 100%;
        height: 80vh;
        margin: 0px auto 40px;
        position: relative;
        overflow: hidden;
    }

    #content a.top_link_02 {
        font-size: 18px;
        left: 43%;
    }

    #content a.top_scroll_link {
        position: absolute;
        bottom: 0;
        left: 43%;
    }

    .w_1200 {
        width: 100%;
    }

    /* TOP */

    p#view_clock {
        font-size: 40px;
    }

    #information,
    #news_topic,
    #whats_new {
        padding: 0;
    }

    #information,
    #news_topic {
        margin: 0 0 40px;
    }

    #information h2,
    #news_topic h2 {
        font-size: 1.6rem;
        margin: 0 0 2%;
    }

    #information ul li {
        padding: 4px 0 10px;
    }

    #information ul li a {
        font-size: 1rem;
    }

    #information ul li a span.date {
        margin-right: 5px;
    }

    #whats_new h2 {
        font-size: 1.6rem;
    }

    #whats_new ul {
        padding: 0;
        margin: 4% 0 2%;
    }

    .article_list p.tag {
        font-size: 1.4rem;
    }

    .article_list .title,
    .article_list .date {
        font-size: 1rem;
    }

    /* About */

    #page .about .concept img {
        width: 70%;
    }

    #page .about .concept p {
        text-align: left;
    }

    /* Brand */

    #page .brand .brand_list {
        margin: 20px 0;
    }

    #page .brand .brand_list ul li {
        width: 49%;
    }

    #page .brand .brand_list ul li:nth-child(2n) {
        margin-right: 0;
    }

    /* News */
    #page .newslist ul.news_contents li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
        float: none;
    }

    #page .newslist ul.news_contents {
        width: 100%;
        height: auto;
        padding: 20px 0;
    }

    /* News - Article */

    div.article_wrap {
        width: 100%;
        padding: 0 !important;
    }

    div.article_wrap .article_main {
        padding-bottom: 20px;
        margin: 0 4% 0 0;
    }

    div.article_user_profile .profile_image {
        width: 15%;
    }

    div.article_wrap .article_main div.article_detail {
        font-size: 1rem;
    }

    div.article_tag_list {
        font-size: 1.4rem;
    }

    div.article_tag_list ul li a {
        font-size: 1rem;
    }

    div.article_ec_item_list .headline p {
        font-size: 1.4rem;
    }

    div.article_ec_item_list ul li p {
        font-size: 1rem !important;
    }

    div.article_wrap .article_side {
        margin-bottom: 60px;
    }

    div.article_wrap .article_side p.side_title {
        font-size: 1.6rem;
    }

    div.article_wrap .article_side p.side_title span {
        font-size: 1rem;
    }

    div.side_article_wrap {
        padding: 5% 0;
    }

    ul.side_authors_list li {
        padding: 5% 0;
    }

    ul.side_authors_list li .user_profile {
        margin: 0;
    }

    div.other_article_wrap p.headline {
        font-size: 1.6rem;
    }

    /* Blog */

    #page .blog {
        padding-bottom: 60px;
    }

    .inner_col_2 .left .left_item h3 {
        font-size: 1.6rem;
    }

    .inner_col_2 .left .left_item a.tag-cloud-link {
        font-size: 1rem !important;
    }

    div.user_profile {
        margin: 10px 0 0;
    }

    div.user_profile .profile_image {
        width: 30%;
        padding: 0;
    }

    div.user_profile .profile_image {
        padding: 0;
    }

    div.user_profile .profile_detail {
        width: 70%;
        margin: 0 0 0 10px;
    }

    div.user_profile .profile_detail p {
        font-size: 1rem;
    }

    /* Author Archive */
    div.author_article_list_wrap p.title {
        font-size: 1.6rem;
    }

    div.author_article_list_wrap p.title span {
        font-size: 1rem;
    }

    /* Shop list */
    #page .swiper_main {
        width: 100%;
        height: auto;
        padding-top: 20px;
    }

    #page .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 0px;
    }

    #page .swiper_main .swiper_left,
    #page .swiper_main .swiper_right {
        float: none;
        width: 100%;
    }

    #page .swiper_main .swiper_right p.fs_txt {
        margin-top: 10px !important;
        font-size: 20px;
    }

    #page .shoplist ul {
        padding: 20px 0;
    }

    #page .shoplist ul li {
        width: 48.5%;
        margin-right: 0;
        margin-bottom: 40px;
        float: none;
    }

    #g_map {
        width: 100%;
        height: 200px;
        border: 1px solid #a9a9a9;
        overflow: hidden;
    }

    /* Inspiration */

    #page .inspiration_all {
        margin: 20px 0;
    }

    /* #People */

    #page .people h2,
    #page .people_article h2 {
        font-size: 24px;
        margin: 20px 0;
    }

    #page .people h2 span,
    #page .people_article h2 span {
        font-size: 14px;
    }

    #page ul.people_contents {
        margin: 60px 0 0;
    }

    #page ul.people_contents li {
        width: 48.5%;
        margin-bottom: 4%;
    }

    #page ul.people_contents li p.title {
        margin: 2% 0 1%;
        font-size: 2.4rem;
    }

    #page ul.people_contents li p {
        font-size: 1.2rem;
    }

    #page .people_article .article_wrap {
        margin: 60px 0;
        padding: 0;
        display: block;
    }

    #page .people_article .article_wrap .article_main,
    #page .people_article .article_wrap .article_side {
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }

    #page .people_article .article_wrap .article_main img {
        margin-bottom: 0;
    }

    #page .people_article .article_wrap .article_side h3 {
        font-size: 24px;
    }

    #page .people_article .article_wrap .article_side ul.article_sns li {
        display: inline-block;
        border: none;
        width: 30px !important;
        text-align: center;
        margin-right: 20px;
    }

    #page .people_article .article_wrap .article_side ul.article_sns li a {
        font-size: 24px;
    }

    #page .people_article .article_wrap .article_side ul.article_sns li:last-child {
        margin-right: 0;
    }

    /* Footer */
    footer,
    footer.top {
        padding: 0px 20px 20px;
    }

    footer nav.sp ul li a {
        font-size: 14px;
    }

    footer nav.sp ul li span.copyright_txt {
        font-size: 10px;
    }

    footer nav.sp .f_top {
        display: flex !important;
        justify-content: space-between;
    }

    footer nav.sp .f_top ul li.sns {
        margin-top: 25px;
    }

    footer nav.sp .f_top ul li.sns a:first-of-type {
        margin-right: 10px;
    }

    footer nav.sp .f_top ul li.sns a {
        margin-right: 7px;
    }

    footer nav.sp .f_top ul li.sns a:last-of-type {
        margin-right: 0;
    }

    footer nav.sp .f_bottom {
        margin-top: 10px;
    }

    /* 404 */
    div.not_content {
        width: 100%;
        text-align: center;
        margin: 60px 0;
    }

    div.not_content img {
        width: 80%;
        height: auto;
    }

    div.not_content p.not_word {
        font-size: 12px;
        font-weight: 500;
    }

    div.not_content a.top_btn {
        width: 250px;
        padding: 10px;
        color: #000;
        border: 1px solid #000;
        margin: 30px 0;
        display: inline-block;
    }
}

@media screen and (max-width: 480px) {

    /* sp */
    #content {
        width: 100%;
        height: 100% !important;
        margin: 0px auto;
        position: relative;
        overflow: hidden;
        background: #e6e6e6;
        padding: 0 3%;
        box-sizing: border-box;
    }

    .article_list {
        display: block;
    }

    .col_3,
    .col_4 {
        width: 100%;
        margin: 0 0 4% 0;
    }

    /* Top */

    #news_topic h2 {
        margin: 0 0 4%;
    }

    #news_topic .swiper-container {
        padding: 0 0 8%;
    }

    #whats_new ul {
        margin: 8% 0;
    }

    /* Shop list */
    #page .shoplist ul {
        display: block;
    }

    #page .shoplist ul li {
        width: 100%;
        margin: 0 0 4% 0;
    }

    /* Brand */
    #page .brand .brand_list ul li {
        margin-right: 2%;
        margin-bottom: 2%;
    }


    /* Blog */

    .inner_col_2 {
        display: block;
    }

    .inner_col_2 .left,
    .inner_col_2 .right {
        width: 100%;
    }

    .inner_col_2 .left .left_item h3 {
        font-size: 1.6rem;
    }

    div.user_profile .profile_image {
        width: 15%;
    }

    .pagination ul.page-numbers {
        justify-content: center;
    }

    /* All Article */

    div.article_wrap {
        display: block;
    }

    div.article_wrap .article_main,
    div.article_wrap .article_side {
        width: 100%;
    }

    div.article_detail ul li.col_2 {
        width: 100%;
    }

    div.article_ec_item_list ul {
        display: flex;
    }

    div.article_ec_item_list ul li.col_3 {
        width: 49%;
        margin: 0 2% 4% 0;
    }

    div.article_ec_item_list ul li.col_3:nth-child(2n) {
        margin: 0 0 4% 0;
    }


    /* Author */
    div.author_profile_wrap {
        display: block;
    }

    div.author_profile_wrap .author_profile,
    div.author_profile_wrap .author_description {
        width: 100%;
        margin: 0 0 6%;
    }

    /* footer */
    footer p span.copyright_txt {
        font-size: 10px;
    }
}