@charset "UTF-8";
@charset 'UTF-8';
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
color:inherit;
text-decoration: none;
} ins {
background-color:#ff9;
color:#000;
text-decoration:none;
} mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
} hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
ul{
list-style: none;
}* {
box-sizing: border-box;
}
html,
body {
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #1a1a1a;
overflow-x: hidden;
}
p {
letter-spacing: .05em;
line-height: 1.6em;
}
#wrap {
width: 100%;
overflow: visible;
}
img {
max-width: 100%;
height: auto; }
a {
color: inherit;
}
a:hover {
text-decoration: none;
color: inherit;
}
ul {
list-style-type: none;
}
.tx-center {
text-align: center;
}
.d-inline-block {
display: inline-block;
}
.pos-relative {
position: relative;
}
.zoom50 {
zoom: 50%;
margin: 0 auto;
}
.over-h {
overflow: hidden;
}
.text-center {
text-align: center;
}
.container {
max-width: 1180px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
.row {
overflow: hidden;
}
.w50 {
width: 50%;
}
.list-mv07 {
opacity: 0;
transition: 1s;
transform: translate(0, 40px);
-webkit-transform: translate(0, 40px);
}
.mv07 {
opacity: 1.0;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.page-title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid #e3e3e3;
padding-bottom: 5px;
margin-bottom: 20px;
line-height: 1.6em;
}
.sec-title {
margin: 0 0 30px;
text-align: center;
font-size: 34px;
}
.sec-title .en {
font-family: 'Montserrat', sans-serif;
letter-spacing: .2em;
display: block;
line-height: 1.4em;
}
.sec-title .jp {
font-size: 11px;
line-height: 1.4em;
display: block;
}
.sec-title2 {
margin: 0 0 25px;
padding: 0 0 8px 20px;
font-size: 27px;
border-left: 4px solid #1a1a1a;
font-weight: bold;
}
.sec-title2 .en {
font-family: 'Montserrat', sans-serif;
letter-spacing: .2em;
display: block;
line-height: 1.4em;
}
.sec-title2 .jp {
font-size: 11px;
line-height: 1.4em;
display: block;
letter-spacing: .15em;
}
.sec-pd {
padding-top: 130px;
padding-bottom: 130px;
}
.btn-more {
display: block;
border-radius: 30px;
padding: 15px 25px;
text-align: center;
font-size: 14px;
background: #eaeaea;
width: 260px;
max-width: 100%;
transition: 0.3s all;
position: relative;
}
.btn-more::before {
content: "";
display: block;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #1a1a1a;
}
.btn-more::after {
content: "";
display: block;
position: absolute;
left: 23px;
top: 45%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.btn-more:hover,
.btn-more:active {
background-color: #1a1a1a;
color: #fff;
text-decoration: none;
}
.sec-blog {
padding-top: 90px;
padding-bottom: 90px;
}
.blog-list .row {
margin: -20px -15px;
display: flex;
flex-wrap: wrap;
}
.blog-list .blog-list-title {
text-align: center;
font-size: 18px;
margin-bottom: 50px;
letter-spacing: .1em;
}
.blog-list article {
width: 50%;
padding: 20px 15px;
float: left;
}
.blog-list article figure {
margin-bottom: 15px;
}
.blog-list article h3 {
font-size: 14px;
font-weight: bold;
line-height: 1.7em;
}
.blog-list article .txt .date {
font-size: 10px;
color: #898989;
margin-top: 5px;
letter-spacing: .1em;
}
.blog-list article .txt .post-categories {
display: inline-block;
}
.blog-list article a figure {
transition: all 0.4s;
}
.blog-list article a figure:hover {
opacity: 0.8;
}
.blog-list article .txt .post-categories span:not(:last-child):after {
content: ",";
}
.side-contents {
padding-bottom: 70px;
}
.side-contents:last-child {
padding-bottom: 0;
}
.side-contents .txt-list li a {
transition: .3s all;
}
.side-contents .txt-list li a:hover {
background-position: center right 8px;
}
.side-contents .title {
padding: 15px;
background: #eeeeee;
font-size: 14px;
letter-spacing: .1em;
border-bottom: 1px solid #dddddd;
font-weight: bold;
}
.side-contents li a {
border-bottom: 1px dashed #aeaeae;
display: block;
overflow: hidden;
padding: 13px;
font-size: 15px;
line-height: 1.6em;
}
.side-contents figure {
letter-spacing: 0;
line-height: 0;
}
.side-contents figure {
margin-bottom: 18px;
position: relative;
padding-top: 52.5%;
overflow: hidden;
}
.side-contents .cat-list {
overflow: hidden;
margin: 0 -6px;
}
.side-contents .cat-list:not(:last-child) {
margin-bottom: 30px;
}
.side-contents .cat-list li {
float: left;
padding: 0 6px;
width: 100%;
}
.side-contents .cat-list li.w50 {
width: 50%;
}
.side-contents .cat-list li a {
display: block;
padding: 12px 0;
font-size: 12px;
border-bottom: 1px dashed #aeaeae;
position: relative;
}
.side-contents .cat-list li a img {
margin-right: 5px;
vertical-align: -8px;
width: 26px;
}
.side-contents .thumb-list {
margin-top: -15px;
}
.side-contents .thumb-list li a {
padding: 15px 10px;
}
.side-contents .thumb-list li {
overflow: hidden;
position: relative;
}
.side-contents .thumb-list figure {
width: 80px;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}
.side-contents .thumb-list .txt {
float: left;
margin-left: -80px;
padding: 6px 0 0 95px;
width: 100%;
}
.side-contents .thumb-list .date {
font-size: 10px;
color: #8a8a8a;
letter-spacing: .1em;
}
.side-contents .thumb-list .blog-title {
font-size: 14px;
}
.side-contents .thumb-list li:first-child .num {
background: #f1d726;
border: none;
}
.side-contents .thumb-list li .num {
font-family: 'Qanelas', Helvetica, Arial, Verdana, sans-serif;
text-align: center;
font-size: 14px;
padding: 10px 5px;
border-radius: 20px;
width: 35px;
border: 1px solid #1a1a1a;
position: absolute;
top: 8px;
left: 0;
z-index: 10;
line-height: 1em;
background: #fff;
}
.side-contents.bn-list a {
margin: 15px 0;
display: block;
transition: all 0.4s;
}
.side-contents.bn-list a:hover {
opacity: 0.8;
}
.pagenav {
text-align: center;
margin-top: 70px;
overflow: hidden;
}
.pagenav .current {
font-size: 14px;
padding: 12px 15px;
background: #898989;
color: #fff;
line-height: 1;
border-radius: 20px;
display: inline-block;
}
.pagenav .pages {
border: 1px solid #cccccc;
border-radius: 20px;
padding: 12px 15px;
}
.pagenav .page {
padding: 12px 10px;
line-height: 1;
width: 40px;
height: 40px;
}
.pagenav .extend {
padding: 8px 10px;
display: inline-block;
}
.pagenav a {
border: 1px solid #1a1a1a;
border-radius: 20px;
padding: 8px 16px;
display: inline-block;
font-size: 14px;
color: #1a1a1a;
transition: .3s all;
margin: 4px;
}
.pagenav a:hover {
background-color: #f7f7f9;
}
.pagenav .first,
.pagenav .last {
display: none;
}
.pagenav .prevpostlink {
float: left;
padding: 8px 10px;
width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
margin-left: 0;
position: relative;
}
.pagenav .prevpostlink:after {
content: "";
display: block;
position: absolute;
left: 11px;
top: 50%;
width: 8px;
height: 8px;
border-top: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg) translateY(65%);
}
.pagenav .nextpostslink {
float: right;
padding: 8px 10px;
position: relative;
width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
margin-right: 0;
position: relative;
}
.pagenav .nextpostslink:after {
content: "";
display: block;
position: absolute;
left: 8px;
top: 50%;
width: 8px;
height: 8px;
border-top: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translateY(-65%);
}
.breadcrumb {
font-size: 12px;
padding: 0;
margin: 0;
border-top: 1px solid #cfcfcf;
clear: both;
}
.breadcrumb ol {
padding: 1.8em 40px 2em;
display: table;
}
.breadcrumb li {
display: table-cell;
white-space: nowrap;
font-size: 1em;
color: #898989;
}
.breadcrumb li img {
vertical-align: -2px;
margin-right: 15px;
}
.breadcrumb li:not(:last-child):after {
content: "";
display: inline-block;
vertical-align: 2px;
width: 6px;
height: 6px;
border-top: 1px solid #898989;
border-right: 1px solid #898989;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 12px 0 6px;
}
@media screen and (max-width: 767px) {
.hidden-xs {
display: none;
}
html,
body,
p {
font-size: 13px;
}
.sec-blog {
padding-top: 50px;
padding-bottom: 50px;
}
.blog-list .row {
margin: 0 -5px -30px;
display: flex;
flex-wrap: wrap;
}
.blog-list .blog-list-title {
font-size: 16px;
margin-bottom: 30px;
}
.blog-list article {
padding: 0 5px 30px;
}
.blog-list article figure {
margin-bottom: 10px;
}
.blog-list article h3 {
font-size: 13px;
}
.blog-list article .txt .date {
font-size: 9px;
margin-top: 2px;
letter-spacing: 0;
}
.pagenav {
margin-top: 40px;
}
.sec-pd {
padding-top: 50px;
padding-bottom: 50px;
}
.page-btm-pd {
padding-bottom: 50px;
}
.page-title {
font-size: 17px;
margin-top: 20px;
}
.sec-title {
margin: 0 0 20px;
font-size: 24px;
}
.sec-title .jp {
font-size: 11px;
}
.sec-title2 {
margin: 0 0 20px;
padding: 0;
font-size: 24px;
border-left: none;
text-align: center;
}
.blog-side {
padding: 50px 0 0;
margin: 0 -15px;
}
.sec-blog>.container>.row {
overflow: visible;
}
.side-contents {
padding: 50px 15px 30px;
}
.side-contents li a {
font-size: 14px;
transition: all 0.4s;
}
.side-contents li a:hover {
opacity: 0.8;
}
.side-contents.side-search {
background: #eee;
}
.side-contents.side-search .side-search-tab {
margin: -2px;
overflow: hidden;
}
.side-contents.side-search .side-search-tab li {
padding: 2px;
width: 50%;
float: left;
}
.side-contents.side-search .side-search-tab li span {
display: block;
background: #adadad;
color: #fff;
border-radius: 4px 4px 0 0;
padding: 12px 15px;
text-align: center;
font-weight: bold;
-webkit-font-smoothing: antialiased;
letter-spacing: .05em;
font-size: 11px;
}
.side-contents.side-search .side-search-tab li.active span {
background: #1a1a1a;
}
.side-contents.side-search .cat-list {
margin-bottom: 30px;
}
.side-contents.side-search .cat-list:not(:first-child) {
display: none;
}
.side-contents .cat-list {
margin: 0;
background: #fff;
}
.side-contents .cat-list li {
padding: 0;
}
.side-contents .cat-list li:nth-child(even) a {
border-left: 1px solid #e0e0e0;
}
.side-contents .cat-list li a {
border-top: 1px solid #e0e0e0;
border-bottom: 0;
padding: 10px;
}
.side-contents.side-search .side-search-area {
position: relative;
}
.side-contents.side-search .side-search-area form .search_text {
padding: 15px 40px 15px 15px;
box-shadow: none;
border: none;
font-size: 14px;
display: block;
margin: 0;
background: #fff;
width: 100%;
}
::-webkit-input-placeholder {
color: #b9b8b8;
font-size: 13px;
letter-spacing: .1em;
}
.side-contents.side-search form .search_button {
font-size: 15px;
background: #1a1a1a;
border: none;
letter-spacing: 0;
padding: 15px 16px 12px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.side-contents .title {
background: none;
padding: 0;
position: relative;
margin-bottom: 10px;
border: none;
}
.side-contents .title span {
background: #eee;
padding: 0 5px 0 0;
position: relative;
z-index: 2;
}
.side-contents .title span:before {
content: url(//hahonico.com/website/wp-content/themes/hahonico/assets/img/media/ico_search.svg);
vertical-align: -4px;
margin-right: 10px;
}
.side-contents .title:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 46%;
width: 100%;
border-top: 1px dashed #1a1a1a;
height: 1px;
z-index: 1;
}
.side-contents.bn-list {
padding-top: 0;
}
.privacy main .read {
font-size: 14px;
}
.privacy main h3 {
font-size: 16px;
}
.privacy main p {
font-size: 13px;
}
}
@media screen and (min-width: 768px) {
.visible-xs {
display: none;
}
}
@media screen and (min-width: 992px) {
.main-contents {
width: 100%;
margin-right: -310px;
padding-right: 390px;
float: left;
}
.blog-side {
padding-top: 0;
width: 310px;
float: left;
}
}
@media screen and (max-width: 991px) {
.blog-side {
padding-top: 40px;
}
}.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
 .slick-loading .slick-list
{
background: #fff url(https://hahonico.com/website/wp-content/themes/hahonico/assets/css/media/slick/ajax-loader.gif) center center no-repeat;
} @font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url(//hahonico.com/website/wp-content/themes/hahonico/assets/css/media/slick/fonts/slick.eot);
src: url(//hahonico.com/website/wp-content/themes/hahonico/assets/css/media/slick/fonts/slick.eot?#iefix) format('embedded-opentype'), url(//hahonico.com/website/wp-content/themes/hahonico/assets/css/media/slick/fonts/slick.woff) format('woff'), url(//hahonico.com/website/wp-content/themes/hahonico/assets/css/media/slick/fonts/slick.ttf) format('truetype'), url(//hahonico.com/website/wp-content/themes/hahonico/assets/css/media/slick/fonts/slick.svg#slick) format('svg');
} .slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
} .slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
 #header {
z-index: 99999;
}
#header .nav-layer {
visibility: hidden;
opacity: 0;
transition: .3s all;
}
#header .spmenu {
display: none;
}
#footer {
position: relative;
background: #333;
-webkit-font-smoothing: antialiased;
padding: 60px 0 40px;
}
#footer .row {
overflow: hidden;
}
#footer .f-left {
float: left;
}
#footer .f-left .foot-logo {
margin-bottom: 16px;
display: block;
}
#footer .f-left .sns {}
#footer .f-left .sns span {
font-family: 'Qanelas', Helvetica, Arial, Verdana, sans-serif;
font-size: 8px;
color: #fff;
vertical-align: 15px;
letter-spacing: .1em;
margin-right: 10px;
}
#footer .copyright {
font-size: 10px;
padding: 20px 0 0;
color: #939393;
letter-spacing: .1em;
font-family: 'Qanelas', Helvetica, Arial, Verdana, sans-serif;
}
#footer .f-right {
float: right;
}
#footer .f-right .bn {
float: left;
}
#footer .pagetop {
position: absolute;
bottom: 40px;
right: 20px;
width: 60px;
height: 60px;
background: #1a1a1a;
border-radius: 30px;
cursor: pointer;
transition: .3s all;
}
#footer .pagetop:hover {
opacity: .6;
}
#footer .pagetop::after {
content: "";
display: block;
position: absolute;
margin: auto;
left: 24px;
top: 27px;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media screen and (max-width:1139px) {
.pc {
display: none;
}
#header {
top: 0;
width: 100%;
padding: 0;
transition: 0.3s all;
top: -60px;
}
#header.is-animation {
position: fixed;
top: 0;
}
#header .block1 {
background: #fff;
overflow: hidden;
height: 60px;
}
#header .logo {
padding: 10px 15px;
margin: 0;
line-height: 0;
text-align: center;
}
#header .logo img {
max-width: 80%;
}
#header .block1 .login {
float: right;
margin-right: 60px;
display: block;
padding: 19px;
}
#header.is-animation .block2 {
display: none;
}
#header #menu {
top: 0;
left: 0;
position: absolute;
transition: .7s all;
transform: translateX(-100%);
-webkit-overflow-scrolling: touch;
width: 375px;
z-index: 99999;
pointer-events: none;
}
#header #menu .inner {
width: 315px;
background: #fff;
pointer-events: auto;
position: relative;
height: 100vh;
overflow: scroll;
}
#header #menu::-webkit-scrollbar {
display: none;
}
#header.opened #menu {
transform: translateX(0);
}
#header.opened .nav-layer {
visibility: visible;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
opacity: 1;
background: #000;
opacity: .6;
z-index: 9999;
}
#header #menu .subnav {
overflow: hidden;
border-bottom: 2px solid #1a1a1a;
}
#header #menu .subnav li {
float: left;
width: 33.3%;
border-right: 1px solid #dcdcdc;
}
#header #menu .subnav li a {
display: block;
padding: 10px;
}
#header #menu .subnav li img {
width: 80px;
}
#header #menu .search_area2 {
position: relative;
border-bottom: 1px solid #c2c2c2;
}
#header #menu .search_area2 form {}
#header #menu .search_area2 .search_text {
padding: 15px 40px 15px 15px;
box-shadow: none;
border: none;
font-size: 14px;
display: block;
margin: 0;
width: 100%;
}
#header #menu .search_area2 ::-webkit-input-placeholder {
color: #b9b8b8;
}
#header #menu .search_area2 .search_button {
font-size: 15px;
background: none;
border: none;
letter-spacing: 0;
padding: 14px 16px;
display: block;
position: absolute;
right: 0;
top: 0;
}
#header #menu .mainnav {
overflow: hidden;
}
#header #menu .nav-headline {
background: #f0f0f0;
border-bottom: 1px solid #c2c2c2;
padding: 15px;
font-weight: bold;
letter-spacing: .05em;
font-size: 13px;
}
#header #menu .accordion_head {
padding: 15px;
font-size: 14px;
position: relative;
border-bottom: 1px solid #c2c2c2;
}
#header #menu .accordion_head:after {
content: "";
display: block;
position: absolute;
right: 18px;
top: 18px;
width: 5px;
height: 5px;
border-top: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#header #menu ul {
overflow: hidden;
}
#header #menu li {
font-size: 13px;
float: left;
width: 100%;
border-bottom: 1px solid #c2c2c2;
}
#header #menu li a {
display: block;
padding: 16px 12px;
}
#header #menu li.w50:nth-child(odd) {
border-right: 1px solid #c2c2c2;
}
#header #menu li.w50 {
width: 50%;
border-right: none;
}
#header #menu li img {
vertical-align: -2px;
margin: -5px 0;
}
#header #menu .mainnav {
border-top: 1px solid #c2c2c2;
}
#header #menu .mainnav li span {
font-family: 'Qanelas', Helvetica, Arial, Verdana, sans-serif;
color: #8c8c8c;
font-size: 8px;
display: inline-block;
margin-left: 5px;
letter-spacing: 0.1em;
}
#header #menu .bn-area {
padding: 25px 30px 15px;
}
#header #menu .bn-area a {
margin-bottom: 10px;
display: block;
}
#header #menu .copyright {
background: #1a1a1a;
padding: 5px;
color: #fff;
font-size: 10px;
letter-spacing: .05em;
-webkit-font-smoothing: antialiased;
font-family: 'Qanelas', Helvetica, Arial, Verdana, sans-serif;
}
#header .spmenu {
overflow: hidden;
cursor: pointer;
display: block;
top: 0;
right: 0;
position: absolute;
margin: 0;
padding: 23px 20px;
line-height: 0;
transition: .3s;
background: #f0f0f0;
}
#header .menu-trigger,
#header .menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
#header .menu-trigger {
position: relative;
width: 20px;
height: 14px;
}
#header .menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #1a1a1a;
transition: all 0.2s;
border-radius: 3px;
}
#header .menu-trigger span:nth-of-type(1) {
top: 0;
}
#header .menu-trigger span:nth-of-type(2) {
top: 6px;
}
#header .menu-trigger span:nth-of-type(3) {
bottom: 0;
}
#header .close-btn .menu-trigger span {
background-color: #1a1a1a;
}
#header .close-btn {
background-color: #eeeeee;
right: 0;
display: none;
}
#header.opened .close-btn {
display: block;
}
#header .close-btn .menu-trigger span:nth-of-type(1) {
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
}
#header .close-btn .menu-trigger span:nth-of-type(2) {
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
#header .close-btn .menu-trigger span:nth-of-type(3) {
opacity: 0;
}
#header .block2 ul {
position: relative;
z-index: 9999;
overflow: hidden;
}
#header .block2 li {
float: left;
width: 20%;
}
#header .block2 li a {
display: block;
background: #1a1a1a;
text-align: center;
}
#header .block2 li a img {
width: 55px;
}
#header .block2 .accordion_search_child {
position: absolute;
z-index: 9998;
top: 117px;
left: 0;
background: #fff;
width: 100%;
padding: 10px;
display: none;
}
#header .block2 .accordion_search_child .search_icon2 {
padding: 8px 28px 8px 10px;
border-right: 1px solid #f3f2ef;
}
#header .block2 .accordion_search_child .search_icon2:hover {
cursor: pointer;
}
#header .block2 .accordion_search_child:hover .base {
display: block;
}
#header .block2 .accordion_search_child .base {}
#header .block2 .accordion_search_child .search_text {
padding: 10px 40px 10px 14px;
box-shadow: none;
border: none;
font-size: 14px;
display: block;
margin: 0;
background: #f0f0f0;
width: 100%;
}
#header .block2 .accordion_search_child .search_button {
font-size: 15px;
background: none;
border: none;
letter-spacing: 0;
padding: 9px 12px;
display: block;
position: absolute;
right: 10px;
top: 10px;
}
#footer {
padding: 40px 0 95px;
text-align: center;
}
#footer .f-left {
width: 100%;
}
#footer .f-left p {
font-size: 13px;
margin-bottom: 15px;
}
#footer .f-right {
width: 100%;
padding: 0;
}
#footer .f-right {
width: 100%;
margin: 20px auto 0;
}
#footer .f-right .bn {
width: 100%;
max-width: 460px;
margin: 0 auto;
float: none;
overflow: hidden;
}
#footer .f-right .bn img {
width: 225px;
}
#footer .f-right a {
display: block;
max-width: 50%;
padding: 0 2px;
float: left;
box-sizing: border-box;
}
#footer .pagetop {
top: 30px;
}
#footer .pagetop:hover {
opacity: .6;
}
#footer .fixed {
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #1a1a1a;
}
#footer .fixed img {
display: block;
margin: 0 auto;
}
}
@media screen and (min-width: 1140px) {
.sp {
display: none;
}
.scroll {
display: none;
}
#header {
width: 100%;
transition: .6s all;
top: -164px;
border-bottom: 1px solid #eaeaea;
background: #fff;
overflow: hidden;
}
#header .logo {
float: left;
padding: 18px 0 18px 38px;
}
#header .logo img {
transition: .3s all;
}
#header .block1 {
padding: 6px 15px 0;
overflow: hidden;
}
#header .block1 h1 {
font-size: 11px;
font-weight: normal;
text-align: right;
color: #666;
}
#header .block2 {
padding: 15px;
position: relative;
overflow: hidden;
width: 100%;
border-bottom: 1px solid #f3f2ef;
}
::-webkit-input-placeholder {
color: #b9b8b8;
font-size: 13px;
letter-spacing: .1em;
}
#header .btn-shop {
float: left;
padding: 0 10px;
border-left: 1px solid #c6c6c6;
margin: 16px 25px 0 25px;
line-height: 1em;
}
#header .btn-shop a {
display: block;
padding: 5px 15px;
cursor: pointer;
transition: .3s all;
}
#header .btn-shop a:hover {
background: #eee;
}
#header .btn-shop .txt {
display: inline-block;
vertical-align: -3px;
margin-left: 15px;
}
#header .btn-shop .txt .en {
font-family: 'Tajawal', sans-serif;
letter-spacing: .05em;
}
#header .btn-shop .txt .jp {
font-size: 9px;
color: #868686;
display: block;
letter-spacing: .05em;
}
#header .right {
float: right;
}
#header .mainnav {
text-align: center;
float: left;
}
#header .mainnav li {
display: inline-block;
position: relative;
}
#header .mainnav>li>a {
letter-spacing: .15em;
line-height: 1;
transition: .3s;
padding: 22px 15px 33px;
display: inline-block;
transition: 0.3s all;
position: relative;
font-feature-settings: "palt";
}
#header .mainnav li b {
font-size: 13px;
}
#header .mainnav li span {
font-family: 'Qanelas', Helvetica, Arial, Verdana, sans-serif;
color: #8c8c8c;
font-size: 8px;
display: block;
margin-top: 5px;
letter-spacing: 0.1em;
}
#header .mainnav>li>a:hover {
text-decoration: none;
}
#header .mainnav>li>a:after {
position: absolute;
transition: .3s;
content: '';
width: 100%;
transform: scale(0, 1);
transform-origin: left top;
left: 0;
bottom: 0;
height: 2px;
background: #000;
}
#header .mainnav li a:hover:after,
#header .mainnav li.active a:after {
transform: scale(1, 1);
transform-origin: right top;
}
#header .search_area2 {
float: left;
position: relative;
margin: 20px 0 0 30px;
}
#header .search_area2 form {}
#header .search_area2 .search_text {
padding: 10px 40px 10px 14px;
box-shadow: none;
border: none;
font-size: 14px;
display: block;
margin: 0;
background: #f0f0f0;
width: 294px;
}
::-webkit-input-placeholder {
color: #b9b8b8;
font-size: 13px;
letter-spacing: .1em;
}
#header .search_area2 .search_button {
font-size: 15px;
background: none;
border: none;
letter-spacing: 0;
padding: 9px 12px;
display: block;
position: absolute;
right: 0;
top: 0;
}
#header.is-animation {
position: fixed;
top: 0;
}
#header.is-animation .block1 {
display: none;
}
#header.is-animation .mainnav>li>a {
padding: 22px 15px;
}
#header.is-animation .logo {
padding: 14px 0 14px 20px;
}
#header.is-animation .logo img {
width: 100px;
}
}img{
max-width: 100%;
height: auto;
}
.recommend{
position: relative;
padding-bottom: 80px;
}
.recommend:before{
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40%;
z-index: -1;
background: #eee;
}
.recommend #recommendSlider ul{
margin: -12px;
}
.recommend #recommendSlider ul li{
padding: 12px;
}
.recommend #recommendSlider ul li .txt{
background: #fff;
padding: 24px 28px;
}
.recommend #recommendSlider ul li .txt h3{
font-size: 14px;
font-weight: bold;
line-height: 1.7em;
}
.recommend #recommendSlider ul li .txt .date{
font-size: 10px;
color: #898989;
margin-top: 5px;
letter-spacing: .1em;
}
.recommend #recommendSlider ul li .txt .post-categories{
display: inline-block;
}
.recommend #recommendSlider ul li .txt .post-categories span:not(:last-child):after{
content: ",";
}
.blog-list .btn-more{
margin: 50px auto 0;
}
@media screen and (max-width: 767px) {
.blog-list .btn-more{
margin: 30px auto 0;
}
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 900px) {
}