/******************************************************************
Site Name:xxxx
Author:Daiichi Printing Co.,ltd.
Stylesheet: Main Stylesheet
******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
/* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

audio,
canvas,
video {
    display: inline-block; }

audio:not([controls]) {
    display: none;
    height: 0; }

[hidden],
template {
    display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

html {
    font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
    background: transparent; }

a:focus {
    outline: thin dotted; }

a:active,
a:hover {
    outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1 {
    margin: 0;
    padding: 0;
}

abbr[title] {
    border-bottom: 1px dotted; }

b,
strong,
.strong {
    font-weight: bold;
}

dfn,
em,
.em {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/*
 * proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens)
*/
p {
    -webkit-hyphens: auto;
    -epub-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/*
 * Addresses margins set differently in IE6/7.
 */
pre {
    margin: 0;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
q:before,
q:after {
    content: '';
    content: none;
}

small, .small {
  font-size: 75%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
  Lists
========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0;
}

/*
 * Addresses paddings set differently in IE6/7.
 */
menu {
    padding: 0 0 0 40px;
}

ol,
ul {
    padding: 0;
    list-style-type: none;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
  Embedded content
========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
    border: 0;
}

  /* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
    overflow: hidden;
}


/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

button,
input,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 2 */
    margin: 0;
    /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
    line-height: normal;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

button[disabled],
html input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.image-replacement,
.ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.clearfix, .cf, .comment-respond {
    zoom: 1;
}
.clearfix:before, .clearfix:after, .cf:before, .comment-respond:before, .cf:after, .comment-respond:after {
    content: "";
    display: table;
}
.clearfix:after, .cf:after, .comment-respond:after {
    clear: both;
}
.clear {
    clear: both;
}
.clear hr {
    display: none;
}
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
    font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
    font-style: italic;
}

p {
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    word-break: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-before: 2;
    -webkit-hyphenate-after: 3;
    hyphenate-lines: 3;
}

.last-col {
    float: right;
    padding-right: 0 !important;
}

/*

/*********************
IMPORTING MODULES
Modules are reusable blocks or elements we use throughout the project.
We can break them up as much as we want or just keep them all in one.
I mean, you can do whatever you want. The world is your oyster. Unless
you hate oysters, then the world is your peanut butter & jelly sandwich.
*********************/
.alert-help, .alert-info, .alert-error, .alert-success {
    margin: 10px;
    padding: 5px 18px;
    border: 1px solid;
}

.alert-help {
    border-color: #e8dc59;
    background: #ebe16f;
}

.alert-info {
    border-color: #bfe4f4;
    background: #d5edf8;
}

.alert-error {
    border-color: #f8cdce;
    background: #fbe3e4;
}

.alert-success {
    border-color: #deeaae;
    background: #e6efc2;
}

/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
.blue-btn, .comment-reply-link, #submit {
    display: inline-block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: white;
    font-size: 0.9em;
    font-size: 34px;
    line-height: 34px;
    font-weight: normal;
    padding: 0 24px;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    -webkit-transition: background-color 0.14s ease-in-out;
    transition: background-color 0.14s ease-in-out;
}
.blue-btn:hover, .comment-reply-link:hover, #submit:hover, .blue-btn:focus, .comment-reply-link:focus, #submit:focus {
    color: white;
    text-decoration: none;
}
.blue-btn:active, .comment-reply-link:active, #submit:active {
    top: 1px;
}

.blue-btn, .comment-reply-link, #submit {
    background-color: #2980b9;
}
.blue-btn:hover, .comment-reply-link:hover, #submit:hover, .blue-btn:focus, .comment-reply-link:focus, #submit:focus {
    background-color: #2574a8;
}
.blue-btn:active, .comment-reply-link:active, #submit:active {
    background-color: #2472a4;
}

/*********************
INPUTS
*********************/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin-bottom: 14px;
    font-size: 1em;
    color: #5c6b80;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: none;
    border: 0;
    width: 100%;
    max-width: 400px;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eaedf2;
    -webkit-transition: background-color 0.24s ease-in-out;
    transition: background-color 0.24s ease-in-out;
}

input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="datetime"]:focus,
input[type="datetime"]:active,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:active,
input[type="date"]:focus,
input[type="date"]:active,
input[type="month"]:focus,
input[type="month"]:active,
input[type="time"]:focus,
input[type="time"]:active,
input[type="week"]:focus,
input[type="week"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="url"]:focus,
input[type="url"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="tel"]:focus,
input[type="tel"]:active,
input[type="color"]:focus,
input[type="color"]:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
.field:focus,
.field:active {
    background-color: #f7f8fa;
}

input[type="text"].error, input[type="text"].is-invalid,
input[type="password"].error,
input[type="password"].is-invalid,
input[type="datetime"].error,
input[type="datetime"].is-invalid,
input[type="datetime-local"].error,
input[type="datetime-local"].is-invalid,
input[type="date"].error,
input[type="date"].is-invalid,
input[type="month"].error,
input[type="month"].is-invalid,
input[type="time"].error,
input[type="time"].is-invalid,
input[type="week"].error,
input[type="week"].is-invalid,
input[type="number"].error,
input[type="number"].is-invalid,
input[type="email"].error,
input[type="email"].is-invalid,
input[type="url"].error,
input[type="url"].is-invalid,
input[type="search"].error,
input[type="search"].is-invalid,
input[type="tel"].error,
input[type="tel"].is-invalid,
input[type="color"].error,
input[type="color"].is-invalid,
select.error,
select.is-invalid,
textarea.error,
textarea.is-invalid,
.field.error,
.field.is-invalid {
    color: #fbe3e4;
    border-color: #fbe3e4;
    background-color: white;
    background-position: 99% center;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=);
    outline-color: #fbe3e4;
}

input[type="text"].success, input[type="text"].is-valid,
input[type="password"].success,
input[type="password"].is-valid,
input[type="datetime"].success,
input[type="datetime"].is-valid,
input[type="datetime-local"].success,
input[type="datetime-local"].is-valid,
input[type="date"].success,
input[type="date"].is-valid,
input[type="month"].success,
input[type="month"].is-valid,
input[type="time"].success,
input[type="time"].is-valid,
input[type="week"].success,
input[type="week"].is-valid,
input[type="number"].success,
input[type="number"].is-valid,
input[type="email"].success,
input[type="email"].is-valid,
input[type="url"].success,
input[type="url"].is-valid,
input[type="search"].success,
input[type="search"].is-valid,
input[type="tel"].success,
input[type="tel"].is-valid,
input[type="color"].success,
input[type="color"].is-valid,
select.success,
select.is-valid,
textarea.success,
textarea.is-valid,
.field.success,
.field.is-valid {
    color: #e6efc2;
    border-color: #e6efc2;
    background-color: white;
    background-position: 99% center;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==);
    outline-color: #e6efc2;
}

input[type="text"][disabled], input[type="text"].is-disabled,
input[type="password"][disabled],
input[type="password"].is-disabled,
input[type="datetime"][disabled],
input[type="datetime"].is-disabled,
input[type="datetime-local"][disabled],
input[type="datetime-local"].is-disabled,
input[type="date"][disabled],
input[type="date"].is-disabled,
input[type="month"][disabled],
input[type="month"].is-disabled,
input[type="time"][disabled],
input[type="time"].is-disabled,
input[type="week"][disabled],
input[type="week"].is-disabled,
input[type="number"][disabled],
input[type="number"].is-disabled,
input[type="email"][disabled],
input[type="email"].is-disabled,
input[type="url"][disabled],
input[type="url"].is-disabled,
input[type="search"][disabled],
input[type="search"].is-disabled,
input[type="tel"][disabled],
input[type="tel"].is-disabled,
input[type="color"][disabled],
input[type="color"].is-disabled,
select[disabled],
select.is-disabled,
textarea[disabled],
textarea.is-disabled,
.field[disabled],
.field.is-disabled {
    cursor: not-allowed;
    border-color: #cfcfcf;
    opacity: 0.6;
}

input[type="text"][disabled]:focus, input[type="text"][disabled]:active, input[type="text"].is-disabled:focus, input[type="text"].is-disabled:active,
input[type="password"][disabled]:focus,
input[type="password"][disabled]:active,
input[type="password"].is-disabled:focus,
input[type="password"].is-disabled:active,
input[type="datetime"][disabled]:focus,
input[type="datetime"][disabled]:active,
input[type="datetime"].is-disabled:focus,
input[type="datetime"].is-disabled:active,
input[type="datetime-local"][disabled]:focus,
input[type="datetime-local"][disabled]:active,
input[type="datetime-local"].is-disabled:focus,
input[type="datetime-local"].is-disabled:active,
input[type="date"][disabled]:focus,
input[type="date"][disabled]:active,
input[type="date"].is-disabled:focus,
input[type="date"].is-disabled:active,
input[type="month"][disabled]:focus,
input[type="month"][disabled]:active,
input[type="month"].is-disabled:focus,
input[type="month"].is-disabled:active,
input[type="time"][disabled]:focus,
input[type="time"][disabled]:active,
input[type="time"].is-disabled:focus,
input[type="time"].is-disabled:active,
input[type="week"][disabled]:focus,
input[type="week"][disabled]:active,
input[type="week"].is-disabled:focus,
input[type="week"].is-disabled:active,
input[type="number"][disabled]:focus,
input[type="number"][disabled]:active,
input[type="number"].is-disabled:focus,
input[type="number"].is-disabled:active,
input[type="email"][disabled]:focus,
input[type="email"][disabled]:active,
input[type="email"].is-disabled:focus,
input[type="email"].is-disabled:active,
input[type="url"][disabled]:focus,
input[type="url"][disabled]:active,
input[type="url"].is-disabled:focus,
input[type="url"].is-disabled:active,
input[type="search"][disabled]:focus,
input[type="search"][disabled]:active,
input[type="search"].is-disabled:focus,
input[type="search"].is-disabled:active,
input[type="tel"][disabled]:focus,
input[type="tel"][disabled]:active,
input[type="tel"].is-disabled:focus,
input[type="tel"].is-disabled:active,
input[type="color"][disabled]:focus,
input[type="color"][disabled]:active,
input[type="color"].is-disabled:focus,
input[type="color"].is-disabled:active,
select[disabled]:focus,
select[disabled]:active,
select.is-disabled:focus,
select.is-disabled:active,
textarea[disabled]:focus,
textarea[disabled]:active,
textarea.is-disabled:focus,
textarea.is-disabled:active,
.field[disabled]:focus,
.field[disabled]:active,
.field.is-disabled:focus,
.field.is-disabled:active {
    background-color: #d5edf8;
}

input[type="password"] {
    letter-spacing: 0.3em;
}

textarea {
    max-width: 100%;
    min-height: 120px;
    line-height: 1.5em;
}

select {
    -webkit-appearance: none;
    /* 1 */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: 97.5% center;
}

/*********************
GENERAL STYLES
*********************/
body {
    font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 100%;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

.center {
    margin: 0 auto;
    text-align: center;
}

p {
    margin: 0;
    padding: 0;
}
/* Font Styles
----------------------------------------------- */
.bold {
    font-weight: bold;
}

.f110percent {
    font-size: 110%;
}

.f120percent {
    font-size: 120%;
}

.f130percent {
    font-size: 130%;
}

.f140percent {
    font-size: 140%;
}

/* Web Font
----------------------------------------------- */

.lora-regular {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lora-bold {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.lora-italic {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.lora-bolditalic {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}


/*********************
HIDDEN STYLES
*********************/
.hidden {
    display: none;
}

@media all and (max-width: 599px) {
  .sp-hidden {
    display: none;
  }
}

@media all and (min-width: 600px) {
  .sp-only {
    display: none;
  }
}

@media all and (min-width: 960px) {
  .pc-hidden {
    display: none;
  }
}

@media all and (max-width: 960px) {
  .pc-only {
    display: none;
  }
}

/*********************
IMAGE EFFECT
*********************/
.fade {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.fade:hover {
    opacity: 0.6;
}

/*********************
Block Reveal Effects
*********************/
.block-revealer__element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    pointer-events: none;
    opacity: 0;
}

/*********************
WORD STYLES
*********************/
.wordBreakAll { word-break: break-all; }

/*********************
LAYOUT & GRID STYLES
*********************/
#container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.wrap {
    width: auto;
    margin: 0 auto;
    padding: 0;
}

#main {
    width: auto;
    margin: 0 auto;
    padding: 0;
}

/*********************
LINK STYLES
*********************/
a, a:visited {
    color: #333;
    /* on hover */
    /* on click */
    /* mobile tap color */ }
a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: #333; }
a:link, a:visited:link {
    /*
    this highlights links on iPhones/iPads.
    so it basically works like the :hover selector
    for mobile devices.
    */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    text-rendering: optimizelegibility;
    font-weight: 500;
    /*
    if you're going to use webfonts, be sure to check your weights
    http://css-tricks.com/watch-your-font-weight/
    */
    /* removing text decoration from all headline links */ }
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none; }

h1, .h1 {
    font-size: 2.5em;
    line-height: 1.333em;
}

h2, .h2 {
    font-size: 1.75em;
    line-height: 1.4em;
    margin-bottom: 0.375em;
}

h3, .h3 {
    font-size: 1.125em;
}

h4, .h4 {
    font-size: 1.1em;
    font-weight: 700;
}

h5, .h5 {
    font-size: 0.846em;
    line-height: 2.09em;
    text-transform: uppercase;
    letter-spacing: 2px;
}







.underpage_h2 {
    color: #333;
    font-size: 24px;
    font-weight: normal;
    margin: 0 auto 30px;
    padding: 0;
    text-align: center;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
  .underpage_h2 {
    font-size: 26px;
    margin: 0 auto 40px;
  }
}
@media all and (min-width: 1280px) {
  .underpage_h2 {
    font-size: 30px;
    margin: 0 auto 60px;
  }
}


/******************************************************************
HEADING STYLES
******************************************************************/
.heading_area {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.heading_area h2 {
    color: #000;
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 40px;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .heading_area h2  {
    font-size: 24px;
    margin: 0 0 55px;
  }
}
@media all and (min-width: 1024px) {
  .heading_area h2  {
    font-size: 24px;
    margin: 0 0 60px;
  }
}


/* TOP CONCEPT
----------------------------------------------- */
.heading_topSlogan:before {
    color: #000;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    content: "Timeless Style\00000Afor a Changing World.";
    white-space: pre;
    line-height: 1.2;
    display: block;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 24px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .heading_topSlogan:before {
    font-size: 50px;
  }
}
@media all and (min-width: 1024px) {
  .heading_topSlogan:before {
    font-size: 60px;
  }
}

/* NEWS & PRODUCT
----------------------------------------------- */
.heading_topNews:before {
    color: #000;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    content: "NEWS & PRODUCT";
    white-space: pre;
    line-height: 1.2;
    display: block;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 24px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .heading_topNews:before {
    font-size: 50px;
  }
}
@media all and (min-width: 1024px) {
  .heading_topNews:before {
    font-size: 60px;
  }
}

/*********************
HEADER STYLES
*********************/
.header {
}

.slideBox_right_copyright {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 0px;
    right: 20px;
    margin: 0;
    padding: 0 0 40px;
    letter-spacing: 0.1428em;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: right;
    z-index: 10;
}

.slideBox_right_copyright .horizontal {
    writing-mode: horizontal-tb;
    display: inline-block;
    font-size: 6px;
}


.slideBox_right_copyright a {
  color: #fff; /* リンク文字色を白に */
  text-decoration: none;
}
.slideBox_right_copyright a:hover {
    color: #fff !important;
}


/* scroll_down_icon
----------------------------------------------- */
.scroll_down a {
    display: inline-block;
    position: absolute;
    left: 50%;              /* 中央基準に配置 */
    bottom: 0;
    transform: translateX(-50%); /* 自身の幅分を打ち消して中央に */
    z-index: 2;
    padding: 10px 10px 110px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-lr;
    outline: none;
    border: none;
}
@media all and (min-width: 960px) {
  .scroll_down a {
    display: inline-block;
  }
}

.scroll_down a:hover {
    color: #fff !important;
}
.scroll_down a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #fff;
}

.scroll_down a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: rgba(255, 255, 255, .4);
}
.scroll_down a::after {
    animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }
    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }
    50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }
    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}

/*********************
MAINNAVI STYLES
*********************/
.site-header {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.nav-bar {
    font-size: 16px;
    letter-spacing: 0.0555em;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1290px) {
  .nav-bar {
    font-size: 18px;
  }
}

.nav-left,
.nav-right {
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 50px 0 0;
    display: none;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1280px) {
  .nav-left,
  .nav-right {
    display: flex;
  }
}

.nav-left a,
.nav-right a,
.nav-left a:hover,
.nav-left a:focus,
.nav-left a:active,
.nav-right a:hover,
.nav-right a:focus,
.nav-right a:active {
    text-decoration: none;
    color: #fff;  /* すべての状態で白文字 */
}

.siteLogo_wrap {
    width: auto;
}

#logo {
    width: 180px;
    margin: 0;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
  #logo {
    width: 200px;
  }
}
@media all and (min-width: 1280px) {
  #logo {
    width: 235px;
  }
}






.site-header2 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    left: 0;
    position: fixed;
    top: -240px; /* 最初は隠す */
    opacity: 0;
    transition: none; /* 初期表示でのチラつきを防止 */
    z-index: 9999;

    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1280px) {
  .site-header2 {
    display: block;
  }
}

.site-header2 .nav-bar {
    font-size: 16px;
    letter-spacing: 0.0555em;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1290px) {
  .site-header2 .nav-bar {
    font-size: 18px;
  }
}

.site-header2 .nav-left,
.site-header2 .nav-right {
    display: none;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 30px 0 0;
}
@media all and (min-width: 1280px) {
  .site-header2 .nav-left,
  .site-header2 .nav-right {
    display: flex;
  }
}

.site-header2 .nav-left a,
.site-header2 .nav-right a {
    text-decoration: none;
    color: #000;
}

.site-header2 .siteLogo_wrap {
    width: 100%;
    max-width: 170px;
    height: 94px;
    margin: 0 70px;
    padding: 0;
}

#logo2 {
    margin: 0;
    padding: 0;
}






.site-header3 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    left: 0;
    position: fixed;
    top: 0;
    transition: none; /* 初期表示でのチラつきを防止 */
    z-index: 9999;
    display: block;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1280px) {
  .site-header3 {
    display: block;
  }
}

.site-header3 .nav-bar {
    font-size: 16px;
    letter-spacing: 0.0555em;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1290px) {
  .site-header3 .nav-bar {
    font-size: 18px;
  }
}

.site-header3 .nav-left,
.site-header3 .nav-right {
    display: none;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 30px 0 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 1280px) {
  .site-header3 .nav-left,
  .site-header3 .nav-right {
    display: flex;
  }
}

.site-header3 .nav-left a,
.site-header3 .nav-right a {
    text-decoration: none;
    color: #000;
}

.site-header3 .siteLogo_wrap {
    width: 100%;
    max-width: 170px;
    height: 94px;
    margin: 0 70px;
    padding: 0;
}

.header3_hr {
    width: 100%;
    height: 94px;
    margin: 0;
    padding: 0;
}

/*********************
UNDER PAGE HEADER STYLES
*********************/

.underPageHeader_wrap {
    width: 100%;
    height: 206px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .underPageHeader_wrap {
    height: 326px;
  }
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
  .underPageHeader_wrap {
    height: 446px;
  }
}
@media all and (min-width: 1280px) {
  .underPageHeader_wrap {
    height: 566px;
  }
}

.underPageHeader_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/dot1.png");
    background-repeat: repeat;   /* 敷き詰め */
    background-position: 0 0;
    pointer-events: none; /* クリック操作を透過させる */
    z-index: 1;
}

.underPageHeader_inner {
    width: 100%;
    height: 100%; /* 親要素が高さを持っていることが前提 */
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.underPageHeader_box {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}


.underPageHeading {
    color: #fff;
    font-size: 20px;
    margin: 0;
    padding: 0;
    transition: 0.3s ease-in-out;
}

/* 疑似要素で英字テキスト表示 */
.underPageHeading::before {
    display: block;
    color: #fff;
    font-family: "Lora", serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    content: "";
    white-space: pre;
    margin-bottom: 4px;
    transition: 0.3s ease-in-out;
}

/* レスポンシブ調整 */
@media all and (min-width: 601px) and (max-width: 1023px) {
  .underPageHeading::before {
    font-size: 32px;
  }
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
  .underPageHeading::before {
    font-size: 36px;
  }
}
@media all and (min-width: 1280px) {
  .underPageHeading::before {
    font-size: 48px;
  }
}

/* 各ページや用途ごとに英字指定 */
.underPageHeading--1::before { content: "Order Made"; }
.underPageHeading--2::before { content: "Clothing"; }
.underPageHeading--3::before { content: "Casual"; }
.underPageHeading--4::before { content: "Ladies'"; }
.underPageHeading--5::before { content: "Concept"; }
.underPageHeading--6::before { content: "About us"; }
.underPageHeading--7::before { content: "News"; }
.underPageHeading--8::before { content: "Contact'"; }
.underPageHeading--9::before { content: "Privacy Policy'"; }


/* Order Made
----------------------------------------------- */
.OrderMadeHeader {
    background: url("../images/bg_header_orderMade.jpg") center center no-repeat;
    background-size: cover;
}

/* Clothing
----------------------------------------------- */
.clothingHeader {
    background: url("../images/bg_header_clothing.jpg") center center no-repeat;
    background-size: cover;
}

/* Casual
----------------------------------------------- */
.casualHeader {
    background: url("../images/bg_header_casual.jpg") center center no-repeat;
    background-size: cover;
}

/* Ladies'
----------------------------------------------- */
.ladiesHeader {
    background: url("../images/bg_header_ladies.jpg") center center no-repeat;
    background-size: cover;
}

/* Concept
----------------------------------------------- */
.conceptHeader {
    background: url("../images/bg_header_concept.jpg") center center no-repeat;
    background-size: cover;
}

/* About us
----------------------------------------------- */
.aboutUsHeader {
    background: url("../images/bg_header_aboutUs.jpg") center center no-repeat;
    background-size: cover;
}

/* News
----------------------------------------------- */
.NewsHeader {
    background: url("../images/bg_header_news.jpg") center center no-repeat;
    background-size: cover;
}

/* Contact
----------------------------------------------- */
.contactHeader {
    background: url("../images/bg_header_contact.jpg") center center no-repeat;
    background-size: cover;
}

/* Privacy Policy
----------------------------------------------- */
.privacyPolicyHeader {
    background: url("../images/bg_header_privacyPolicy.jpg") center center no-repeat;
    background-size: cover;
}







/*********************
BREAD CRUMBS STYLES
*********************/
.breadCrumbs_wrap {
    width: 100%;
    max-width: 1670px;
    margin: 0 auto;
    padding: 16px 20px 0;
    background: #fff;
}

.breadCrumbs_inner {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    font-size: 14px;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* 上2px・下1pxの二重線 */
.breadCrumbs_inner::before,
.breadCrumbs_inner::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
}

.breadCrumbs_inner::before {
    top: 0;
    border-top: 2px solid #000; /* 上の太線 */
}

.breadCrumbs_inner::after {
    top: 4px; /* 上の線との間隔（調整OK） */
    border-top: 1px solid #000; /* 下の細線 */
}

.breadCrumbs_box {
    padding: 16px 2px;
    text-align: left;
}

.breadCrumbs_box a {
    color: inherit; /* 親の文字色を引き継ぐ */
    text-decoration: none; /* 下線を消す */
}

.breadCrumbs_box a:hover {
    text-decoration: underline; /* ホバー時だけ出すなら */
}

/*********************
SWIPER STYLES
*********************/

/*********************
COMMON STYLE
*********************/
/* wrap
----------------------------------------------- */
.common_wrap1 {
    width: 100%;
    margin: 0;
    padding: 0;
}
.common_wrap1 img {
    display: block;
}

.bg_offWhite {
    background: #f7f5f0;
}

/* inner
----------------------------------------------- */
.inner1210 {
    width: 100%;
    max-width: 1210px;
    margin: 0 auto;
}

.inner1024 {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.inner1120 {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/* padding
----------------------------------------------- */
.pt0 {
    padding-top: 0 !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pt60 {
    padding-top: 60px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.pb60 {
    padding-bottom: 60px !important;
}

.ptb0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ptb10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.ptb15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.ptb20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.ptb30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.ptb40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.ptb50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.ptb60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.ptb70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.ptb80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.ptb90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.ptb100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.plr10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.plr15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.plr20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* margin
----------------------------------------------- */
.mtb10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.mtb20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mtb30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.mtb40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.mtb50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.mtb60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.mtb70 {
    margin-top: 70px !important;
    margin-bottom: 70px !important;
}

.mtb80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

.mtb90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
}

.mtb100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mt70 {
    margin-top: 70px !important;
}

.mt80 {
    margin-top: 80px !important;
}

.mt90 {
    margin-top: 90px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}
.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}
.mb70 {
    margin-bottom: 70px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb90 {
    margin-bottom: 90px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

/* flexbox
----------------------------------------------- */
.flex_reverse {
    flex-direction: row-reverse;
}

/* position
----------------------------------------------- */
.position_absolute {
    position: absolute;
}

.position_relative {
    position: relative;
}

.position_fixed {
    position: fixed;
}

/*********************
TOP PAGE
*********************/
.top_content1 {
    margin: 0 auto;
    padding: 40px 20px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .top_content1 {
    padding: 70px 20px;
  }
}
@media all and (min-width: 1024px) {
  .top_content1 {
    padding: 100px 20px;
  }
}
@media all and (min-width: 1920px) {
  .top_content1 {
    margin: 0 0 120px;
    padding: 100px 20px;
  }
}

.top_movie {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
}

.top_content2 {
    margin: 0 auto;
    padding: calc(30px + clamp(100px, 12vw, 180px)) 20px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .top_content2 {
    padding: calc(36px + clamp(100px, 12vw, 180px)) 20px 0;
  }
}
@media all and (min-width: 1024px) {
  .top_content2 {
    padding: calc(46px + clamp(100px, 12vw, 180px)) 20px 0;
  }
}

/* レイアウト */
.top_content2_itemGroup1 {
    width: 100%;
   max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* 左画像ブロック */
.top_content2_itemGroup1_item1 {
    width: 66.6101%; /* 786 / 1180 */
    max-width: 786px;
    position: relative;
    top: clamp(-100px, -12vw, -180px);
    z-index: 1;
}

/* 右画像ブロック */
.top_content2_itemGroup1_item2 {
    width: 30%; /* 354 / 1180 */
    max-width: 354px;
}

/* 1920px以上では固定 */
@media (min-width: 1920px) {
  .top_content2_itemGroup1_item1 {
    top: -180px;
    transition: 0.3s ease-in-out;
  }

  .top_content2 {
    padding: calc(46px + 180px) 20px 0;
    transition: 0.3s ease-in-out;
  }
}







/* レイアウト */
.top_content2_itemGroup2 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    display: block;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 900px) {
  .top_content2_itemGroup2 {
    display: flex;
    justify-content: space-between;
  }
}


/* 左画像ブロック */
.top_content2_itemGroup2_item1 {
    width: 45.4545%; /* 500 / 1100 */
    max-width: 500px;
    position: relative;
    top: clamp(-80px, -8vw, -130px);
    z-index: 1;
}

/* 右画像ブロック */
.top_content2_itemGroup2_item2 {
    width: 100%;
    margin: -20px 0 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 900px) {
  .top_content2_itemGroup2_item2 {
    width: 49.0909%; /* 540 / 1100 */
    max-width: 540px;
    margin: 0;
  }
}

/* 1920px以上では固定 */
@media (min-width: 1920px) {
  .top_content2_itemGroup2_item1 {
    top: -130px;
    transition: 0.3s ease-in-out;
  }

  .top_content2 {
    padding: calc(46px + 130px) 20px 0;
    transition: 0.3s ease-in-out;
  }
}




.topSlogan2 {
    font-size: 18px;
    font-weight: bold;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .topSlogan2 {
    font-size: 20px;
  }
}
@media all and (min-width: 1024px) {
  .topSlogan2 {
    font-size: 24px;
  }
}





/* ベース配置 */
.top_image-grid {
    display: grid;
    grid-template-columns: 1fr; /* デフォルトは1列 */
    grid-template-rows: repeat(4, auto);
    gap: 2px;
    margin: 60px 0 0;
}
@media all and (min-width: 1024px) {
  .top_image-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    margin: 100px 0 0;
  }
}


.top_grid-item {
    position: relative;
    display: block;
    overflow: hidden;
}

.top_grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト中央配置 */
.top_overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .top_overlay-text {
    font-size: 20px;
  }
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
  .top_overlay-text {
    font-size: 20px;
  }
}
@media all and (min-width: 1280px) {
  .top_overlay-text {
    font-size: 20px;
  }
}


/* 疑似要素で英字テキスト表示 */
.top_overlay-text::before {
    display: block;
    color: #fff;
    font-family: "Lora", serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    content: "";
    white-space: pre;
    margin-bottom: 4px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .top_overlay-text::before {
    font-size: 32px;
  }
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
  .top_overlay-text::before {
    font-size: 36px;
  }
}
@media all and (min-width: 1280px) {
  .top_overlay-text::before {
    font-size: 48px;
  }
}

/* 各要素ごとに英字を指定 */
.top_overlay-text--1::before { content: "Order Made"; }
.top_overlay-text--2::before { content: "Clothing"; }
.top_overlay-text--3::before { content: "Cacual"; }
.top_overlay-text--4::before { content: "Ladies'"; }

/* オーバーレイ効果 */
.top_grid-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.top_grid-item:hover::before {
    background: rgba(0, 0, 0, 0.5);
}


/* Instagram Feed */
.instagramFeed_wrap {
    width: 100%;
    max-width: 984px;
    margin: 0 auto;
    padding: 50px 20px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .instagramFeed_wrap {
    padding: 80px 20px 0;
  }
}
@media all and (min-width: 1024px) {
  .instagramFeed_wrap {
    padding: 100px 20px 0;
  }
}

/*********************
UNDER PAGE
*********************/
.underContent_wrap1 {
    width: 100%;
    margin: 0;
    padding: 50px 20px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .underContent_wrap1 {
    padding: 80px 20px 0;
  }
}
@media all and (min-width: 1024px) {
  .underContent_wrap1 {
    padding: 140px 20px 0;
  }
}

.underContent_wrap2 {
    width: 100%;
    margin: 0;
    padding: 50px 20px 50px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .underContent_wrap2 {
    padding: 70px 20px 70px;
  }
}
@media all and (min-width: 1024px) {
  .underContent_wrap2 {
    padding: 90px 20px 90px;
  }
}


/* service lower common
----------------------------------------------- */
.service_lower_wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 80px;
  padding: 0 10px;
  position: relative;
  transition: 0.3s ease-in-out;
}

@media all and (min-width: 768px) {
  .service_lower_wrap {
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
  }
}

.service_lower_left {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  transition: 0.3s ease-in-out;
}

@media all and (min-width: 768px) {
  .service_lower_left {
    width: 73.2142%; /*820/1120*/
    max-width: 820px;
  }
}

.service_lower_right {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  transition: 0.3s ease-in-out;
}

@media all and (min-width: 768px) {
  .service_lower_right {
    width: 53.5714%; /*600/1120*/
    max-width: 600px;
  }
}

.service_lower_txtBox {
  margin: 0;
  position: relative;
  transition: 0.3s ease-in-out;
}

@media all and (min-width: 768px) {
  .service_lower_txtBox {
    margin: 0 0 0 -100px;
  }
}

.service_lower_title {
    color: #fff;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.8);
    margin: 10px 0;
    padding: 0.417em 0.625em;
    position: relative;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .service_lower_title {
    color: #212121;
    font-size: 48px;
    background: rgba(255, 255, 255, 0.8);
    margin: 40px 0;
    padding: 0.417em 0.625em;
  }
}

.service_lower_title2 {
    color: #212121;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin: 10px 0;
    padding: 0.417em 0.625em;
    position: relative;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .service_lower_title2 {
    color: #212121;
    font-size: 48px;
    background: rgba(255, 255, 255, 0.8);
    margin: 40px 0;
    padding: 0.417em 0.625em;
  }
}


.service_lower_title3 {
    color: #212121;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .service_lower_title3 {
    color: #212121;
    font-size: 48px;
  }
}


.service_lower_title4 {
    color: #212121;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .service_lower_title4 {
    color: #212121;
    font-size: 48px;
  }
}


.service_lower_title5 {
    color: #212121;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin: 0 0 20px;
    padding: 0;
    position: relative;
    text-align: center;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .service_lower_title5 {
    color: #212121;
    font-size: 40px;
    margin: 0 0 20px;
    padding: 0;
  }
}


.service_lower_txt {
  color: #fff;
  line-height: 2;
  background: rgba(0, 0, 0, 1);
  margin: 0;
  padding: 10%;
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.3s ease-in-out;
}

@media all and (min-width: 768px) {
  .service_lower_txt {
    background: rgba(0, 0, 0, 0.8);
  }
}

.service_lower_img {
  width: 70%;
  margin: 10px 0 0;
  padding: 0;
  position: relative;
  transition: 0.3s ease-in-out;
}

@media all and (min-width: 768px) {
  .service_lower_img {
    width: 100%;
    max-width: 400px;
    margin: 0;
  }
}

/* gallery
----------------------------------------------- */
.gallery_wrap1 {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 80px;
  padding: 70px 20px;
  transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .gallery_wrap1 {
    margin: 0 auto 100px;
    padding: 90px 20px;
  }
}

.gallery_wrap1 h4 {
    color: #212121;
    font-size: 30px;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 0 auto 20px;
    padding: 0;
    text-align: center;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .gallery_wrap1 h4 {
    font-size: 36px;
  }
}
@media all and (min-width: 1024px) {
  .gallery_wrap1 h4 {
    font-size: 42px;
  }
}

/*********************
BLOG PAGE
*********************/
.blog_content {
    width: 100%;
    max-width: 1854px;
    margin: 0 auto;
    padding: 50px 20px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .blog_content {
    padding: 80px 20px 0;
  }
}
@media all and (min-width: 1024px) {
  .blog_content {
    padding: 100px 20px 0;
  }
}

.blog_content_inner {
    width: 100%;
    display: block;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: 0.3s ease-in-out;
}

.blog_content_inner::before {
}
@media all and (min-width: 720px) {
  .blog_content_inner::before {
    content:"";
    display: block;
    width: 24.5865%; /*446/1814*/
    max-width: 446px;
    height: 0px;
    order:1;
  }
}
.blog_content_inner::after {
}
@media all and (min-width: 720px) {
  .blog_content_inner::after {
    content:"";
    display: block;
    width: 24.5865%; /*446/1814*/
    max-width: 446px;
    height: 0px;
  }
}

.blog_content_itemGroup {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 720px) and (max-width: 1023px) {
  .blog_content_itemGroup {
    width: 49.4140%; /*506/1023*/
    max-width: 506px;
    margin: 0 0 20px;
    padding: 0;
  }
}
@media all and (min-width: 1024px) {
  .blog_content_itemGroup {
    width: 24.5865%; /*446/1814*/
    max-width: 446px;
    margin: 0;
    padding: 0;
  }
}

.blog_content_itemGroup2 {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 720px) and (max-width: 1023px) {
  .blog_content_itemGroup2 {
    width: 49.4140%; /*506/1023*/
    max-width: 506px;
    margin: 0 0 20px;
    padding: 0;
  }
}
@media all and (min-width: 1024px) {
  .blog_content_itemGroup2 {
    width: 24.5865%; /*446/1814*/
    max-width: 446px;
    margin: 0 0 20px;
    padding: 0;
  }
}




.blog_content_itemGroup p {
    color: #111;
    font-size: 16px;
    letter-spacing: 0.03125em;
    line-height: 2;
    margin: 0;
    padding: 0 10px;
}

.newsTopics_dataTime {
    color: #666;
    font-size: 14px;
    padding: 5px 5px 0;
}

.newsTopics_title {
    font-weight: bold;
    padding: 5px 16px 0 5px;
}

.newsTopics_Category {
    font-size: 14px;
    padding: 5px 16px 0 5px;
}







/* single page
----------------------------------------------- */
.news_single_wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.news_single_inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 20px 100px 20px;
}
@media all and (min-width: 601px) {
  .news_single_inner {
    padding: 100px 20px 100px 20px;
  }
}

.news_single_inner h1 {
    color: #38322d;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
    line-height: 1.5;
    width: 100%;
    font-size: 18px;
    margin: 0.5em 0 0 0;
    padding: 0 0 10px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 600px) and (max-width: 1023px) {
  .news_single_inner h1 {
    font-size: 20px;
  }
}
@media all and (min-width: 1024px) {
  .news_single_inner h1 {
    font-size: 24px;
  }
}

.singlepage_content {
    color: #333;
    font-size: 16px;
    margin: 0 auto;
    padding: 0;
    border-top: 1px dotted #c3c3c3;
    border-bottom: 1px dotted #c3c3c3;
    line-height: 2;
}

.singlepage_content_inner {
    padding: 20px 0;
}

.single_entry-meta {
    color: #666;
    font-size: 14px;
    margin: 10px auto 0;
    padding: 0 0 20px;
    text-align: left;
    transition: all .2s ease-in;
}

.singlePageNavi_wrap {
    width: 100%;
    max-width: 290px;
    margin: 0 auto 100px;
    padding: 0;
}

.singlePageNavi_inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    justify-content: center;
    justify-content: space-between;
    text-align: center;
    padding: 0;
}

.singlePageNavi_item {
    font-family: 'Roboto', sans-serif;
    font-size: 16px !important;
    width: 33.3333%;
    min-width: 100px;
}

.singlePageNavi_item a {
    color: #38322d !important;
    text-decoration: none;
    transition: all .2s ease-in;
}
.singlePageNavi_item a:visited {
    color: #38322d !important;
    text-decoration: none;
}
.singlePageNavi_item a:hover {
    color: #ff001e !important;
    text-decoration: none;
}
.singlePageNavi_item a:active {
    color: #38322d !important;
    text-decoration: none;
}
/*********************
CONCEPT PAGE
*********************/
.concept_wrap1 {
    width: 100%;
    max-width: 1190px;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 960px) {
  .concept_wrap1 {
    display: flex;
    justify-content: space-between;
  }
}

.concept_wrap1_left {
    width: 100%;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 960px) {
  .concept_wrap1_left {
    width: 40.3361%; /*480/1190*/
    max-width: 480px;
  }
}

.concept_wrap1_right {
    width: 100%;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 960px) {
  .concept_wrap1_right {
    width: 51.2605%; /*1110/1190*/
    max-width: 610px;
  }
}
.concept_wrap1_right p {
    padding: 0 1.875em;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 960px) {
  .concept_wrap1_right p {
    padding: 0 1.875em;
  }
}

.concept_wrap2 {
    width: 100%;
    max-width: 1190px;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 960px) {
  .concept_wrap2 {
    margin: 100px 0 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}

.concept_wrap3 {
    width: 100%;
    max-width: 1190px;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}

.concept_wrap3_item1 {
    width: 100%;
    max-width: 900px;
    margin: 90px auto 0 0;
    padding: 0;

}

.concept_wrap3_item2 {
    width: 100%;
    max-width: 900px;
    margin: 90px 0 0 auto;
    padding: 0;
}

/*********************
ABOUT PAGE
*********************/
.about_img1 {
    margin: 40px auto;
    padding: 0;
}

.companyProfile_box {
    width: 100%;
    max-width: 950px;
    font-size: 16px;
    background: #fff;
    margin: 40px auto 80px;
}

.companyProfile_txt_box {
    overflow: hidden;
    border-top: 1px solid #dbdbdb;
    padding: 30px 0;
}

.companyProfile_txt_box:last-child {
    border-bottom: 1px solid #dbdbdb;
}

.companyProfile_txt_left  {
    float: none;
    font-weight: bold;
    padding: 0 0 0 20px;
    margin: 0 0 10px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) {
  .companyProfile_txt_left {
    float: left;
    width: 25%;
    padding: 0 0 0 50px;
    margin: 0;
  }
}

.companyProfile_txt_right  {
    float: none;
    padding: 0 20px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) {
  .companyProfile_txt_right {
    float: right;
    width: 75%;
  }
}











.company_history_box {
    width: 100%;
    max-width: 1210px;
    font-size: 16px;
    background: #fff;
    margin: 40px auto 10px;
    padding: 0 20px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) {
  .company_history_box {
    margin: 40px auto 10px;
  }
}

.history_timeline {
    list-style: none;
    margin: 0 auto;
    padding: 10px 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) {
  .history_timeline {
    padding: 0;
  }
}

.history_timeline > li {
    margin-bottom: 40px;
    transition: 0.3s ease-in-out;
}
@media all and ( min-width: 601px){
  .history_timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .history_timeline_date {
    width: 131px;
    float: left;
    margin: 20px 0 0;
  }
  .history_timeline_content {
    width: 75%;
    float: left;
    border-left: 2px #dee2e6 solid;
    padding: 20px 0 20px 50px;
  }
  .history_timeline_nullContent {
    width: 75%;
    height: 60px;
    float: left;
    border-left: 2px #dee2e6 solid;
    margin: 0 0 0 131px;
    padding: 20px 0 20px 50px;
  }
  .history_timeline_content:before {
    content: '';
    width: 18px;
    height: 18px;
    background: #dee2e6;
    position: absolute;
    left: 123px;
    top: 24px;
    border-radius: 100%;
  }
}

 .history_timeline_date {
    font-weight: bold;
    padding: 0 0 5px;
    transition: 0.3s ease-in-out;
 }
@media all and ( min-width: 601px) {
  .history_timeline_date {
    padding: 20px 0 0;
  }
}









.about_shopData_wrap {
    width: 100%;
    margin: 140px auto 0;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .about_shopData_wrap {
    display: flex;
    justify-content: space-between;
  }
}

.about_shopData_wrap:first-of-type {
    margin: 0 auto;
}


.about_shopData_left {
    width: 100%;
    max-width: 524px;
    margin: 0 auto;
    padding: 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .about_shopData_left {
    width: 48.5185%; /*524/1080*/
    max-width: 524px;
    margin: 0;
  }
}

.about_shopData_right {
    width: 100%;
    max-width: 524px;
    margin: 0 auto;
    padding: 20px 0 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .about_shopData_right {
    width: 41.2962%; /*446/1080*/
    max-width: 446px;
  }
}

.about_shopData_right ul {
    margin: 20px 0 0 0.5em;
}

.about_shopData_right li {
    margin: 0 0 0.875em;
}
.about_shopData_right li:last-child {
    margin: 0;
}

.googlemap_wrap {
    position: relative;
    width: 100%;
    max-width: 524px;
    height: 0;
    margin: 50px auto 0;
    padding-top: 75%; /* アスペクト比 4:3 */
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 768px) {
  .googlemap_wrap {
    max-width: 100%;
    margin: 50px 0 0;
    padding-top: 32.23%; /* 1210 × 390 の比率 */
  }
}

.googlemap_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*********************
CONTACT PAGE
*********************/
.contactContents_wrap {
    width: 100%;
    max-width: 1110px;
    background: #fff;
    margin: 60px auto 0;
}

.contactContents_inner_box {
    margin: 0 auto;
    padding: 70px 10px 90px;
}

.contactContents_inner_box p {
    margin: 0;
    padding: 0 0 10px;
}

.contactContents_inner_box .phone {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 600;
}
@media all and (min-width: 481px) {
  .contactContents_inner_box .phone {
    font-size: 36px;
  }
}

.contactContents_txtBox {
    letter-spacing: 0.125em;
    margin: 0 auto;
    padding: 10px 0 0;
    text-align: center;
}

.contactContents_txtBox h2 {
    font-size: 18px
    font-weight: bold;
}
@media all and (min-width: 481px) {
  .contactContents_txtBox h2 {
    font-size: 20px
  }
}

.contactContents_txtBox2 {
    letter-spacing: 0.125em;
    margin: 0 auto;
    padding: 10px 20px 0;
    text-align: left;
}

.contactContents_txtBox2 h2 {
    font-size: 18px
    font-weight: bold;
}
@media all and (min-width: 481px) {
  .contactContents_txtBox2 h2 {
    font-size: 20px
  }
}

.contactPhone {
    color: #e53935;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}
@media all and (min-width: 321px) and (max-width: 959px) {
  .contactPhone {
    font-size: 24px;
  }
}
/* 24px @ 960px increasing to 30px @ 1279px */
@media (min-width: 960px) {
  .contactPhone {
    font-size: calc(1.5rem + ((1vw - 9.6px) * 1.8809));
    /* Where: * 1.8809 = 100 * font_Size_Difference / viewport_Width_Difference */
  }
}
/* Prevent font scaling beyond this breakpoint */
@media (min-width: 1279px) {
  .contactPhone {
    font-size: 30px;
  }
}
@media all and (min-width: 1280px) {
  .contactPhone {
    font-size: 36px;
  }
}

.contactPhone a {
    text-decoration: none;
    color: #e53935;
}
.contactPhone a:visited {
    color: #e53935;
    text-decoration: none;
}
.contactPhone a:hover {
    color: #e53935;
    text-decoration: none;
}
.contactPhone a:active {
    color: #e53935;
    text-decoration: none;
}

/*********************
MAIL FORM
*********************/
.cform th {
    font-size: 16px;
    width: 30%;
    padding: 10px 0 10px 15px;
    font-weight: 500;
    background: #fff !important;
    text-align: left;
}

.cform td {
    font-size: 16px;
    line-height: 1.5;
    padding: 10px;
    background: #fff !important;
}

.cform {
    width: 100%;
    margin: 0 auto;
}

.cform [type=submit] {
    display: inline-block;
    font-size: 20px;
    padding: 10px 30px;
    text-decoration: none;
    background: #ff8f00;
    color: #fff;
    border-bottom: solid 4px #b17C00;
    border-radius: 3px;
}

.cform option,
.cform textarea,
.cform input[type=text],
.cform input[type=email],
.cform input[type=search],
.cform input[type=url] {
    width: 100%;
}

.required-srt {
    font-size: 12px;
    letter-spacing: 0.125em;
    padding: 5px;
    background: #b50029;
    color: #fff;
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}

@media only screen and (max-width:767px) {
    .cform th,
    .cform td {
        width: 100%;
        display: block;
        border-top: none;
    }
}

.submit-btn input {
    font-size: 18px;
    font-weight: 600;
    background: #b50029;
    width: 60%;
    max-width: 550px;
    min-width: 220px;
    margin: 30px auto;
    display: block;
    border: 1px #b50029 solid;
    text-align: center;
    padding: 20px;
    color: #fff;
    transition: all 0.4s ease;
}
.submit-btn input:hover {
    background: #fff;
    color: #b50029;
}

.back-btn input {
    font-size: 18px;
    font-weight: 600;
    background: #212121;
    width: 60%;
    max-width: 550px;
    min-width: 220px;
    margin: 30px auto;
    display: block;
    border: 1px #212121 solid;
    text-align: center;
    padding: 20px;
    color: #fff;
    transition: all 0.4s ease;
}

.back-btn input:hover {
    background: #fff;
    color: #212121;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    width: 40%;
    margin: 0 5px;
    font-size:14px !important;
    float: left;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    float: left;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {
    float: right;
}

/*********************
NAVIGATION STYLES
*********************/
/*
all navs have a .nav class applied via
the wp_menu function; this is so we can
easily write one group of styles for
the navs on the site so our css is cleaner
and more scalable.
*/
.nav {
    border-bottom: 0;
    margin: 0;
    /* end .menu li */
    /* highlight current page */
    /* end current highlighters */ }
.nav li {
    /*
    so you really have to rethink your dropdowns for mobile.
    you don't want to have it expand too much because the
    screen is so small. How you manage your menu should
    depend on the project. Here's some great info on it:
    http://www.alistapart.com/articles/organizing-mobile/
    */ }
.nav li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 0.75em;
    /*
    remember this is for mobile ONLY, so there's no need
    to even declare hover styles here, you can do it in
    the style.scss file where it's relevant. We want to
    keep this file as small as possible!
    */
}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
    padding-left: 30px;
}

/* end .nav */
/*********************
POSTS & CONTENT STYLES
*********************/
#content {
    margin: 0;
    padding: 0;
}

.hentry {}
.hentry header {
    padding: 0; }

.hentry footer {}

.hentry footer p {
    margin: 0;
}

/* end .hentry */
.single-title,
.page-title,
.entry-title {
    margin: 0; }

/* want to style individual post classes? Booya! */
/* post by id (i.e. post-3) */
/* general post style */
/* general article on a page style */
/* general style on an attatchment */
/* sticky post style */
/* hentry class */
/* style by category (i.e. category-videos) */
/* style by tag (i.e. tag-news) */
/* post meta */
.byline {
    color: #9fa6b4;
    margin: 0;
}

/* entry content */
.entry-content {
    padding: 0;
    /*
    image alignment on a screen this size may be
    a bit difficult. It's set to start aligning
    and floating images at the next breakpoint,
    but it's up to you. Feel free to change it up.
    */
}

.entry-content p {
    margin: 0 0 1em;
}

.entry-content table {
    width: 100%;
}
.entry-content table caption {
    margin: 0;
    font-size: 0.75em;
    color: #9fa6b4;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.entry-content tr {
    border-bottom: 1px solid #eaedf2;
}
.entry-content tr:nth-child(even) {
    background-color: #f8f9fa;
}
.entry-content td {
    padding: 7px;
    border-right: 1px solid #eaedf2;
}
.entry-content td:last-child {
    border-right: 0;
}
.entry-content th {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaedf2;
    border-right: 1px solid #eaedf2;
}
.entry-content th:last-child {
    border-right: 0;
}
.entry-content blockquote {
    margin: 0 0 1.5em 0.75em;
    padding: 0 0 0 0.75em;
    border-left: 3px solid #2980b9;
    font-style: italic;
    color: #9fa6b4;
}
.entry-content dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em;
}
.entry-content img {
    margin: 0;
    max-width: 100%;
    height: auto;
}
.entry-content .size-auto,
.entry-content .size-full,
.entry-content .size-large,
.entry-content .size-medium,
.entry-content .size-thumbnail {
    max-width: 100%;
    height: auto;
}
.entry-content pre {
    background: #323944;
    color: #f8f9fa;
    font-size: 0.9em;
    padding: 1.5em;
    margin: 0 0 1.5em;
    border-radius: 3px;
}

/* end .entry-content */
.wp-caption {
    max-width: 100%;
    background: #eee;
    padding: 5px;
    /* images inside wp-caption */
}
.wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%;
}
.wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center;
}

/* end .wp-caption */
/* image gallery styles */
/* end .gallery */
/* gallery caption styles */
.tags {
    margin: 0;
}










.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    justify-content: center;
}

.tag-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ccc;

    font-size: 14px;
    text-decoration: none;
    color: #333;
    transition: 0.2s ease;
}

.tag-btn:hover {
    background: #f2f2f2;
}

.tag-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.tag-btn.active:hover {
    background: #666;
    color: #fff;
    border-color: #333;
}

/******************************************************************
PAGE NAVI STYLES
******************************************************************/
.pagination,
.wp-prev-next {
    margin: 1.5em 0;
}

.pagination {
    text-align: center;
}
.pagination ul {
    display: inline-block;
    background-color: white;
    white-space: nowrap;
    padding: 0;
    clear: both;
    border-radius: 3px;
}
.pagination li {
    padding: 0;
    margin: 0;
    float: left;
    display: inline;
    overflow: hidden;
    border-right: 1px solid #eaedf2;
}
.pagination a, .pagination span {
    margin: 0;
    text-decoration: none;
    padding: 0;
    line-height: 1em;
    font-size: 1em;
    font-weight: normal;
    padding: 0.75em;
    min-width: 1em;
    display: block;
    color: #212121;
}
.pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus {
    background-color: #212121;
    color: white;
}
.pagination .current {
    cursor: default;
    color: #dc0029;
}
.pagination .current:hover, .pagination .current:focus {
    background-color: white;
    color: #212121;
}

/* end .bones_page_navi */
/* fallback previous & next links */
.wp-prev-next .prev-link {
    float: left;
}
.wp-prev-next .next-link {
    float: right;
}

/* end .wp-prev-next */
/******************************************************************
COMMENT STYLES
******************************************************************/
/* h3 comment title */
#comments-title {
    padding: 0.75em;
    margin: 0;
    border-top: 1px solid #f8f9fa;
    /* number of comments span */
}

.commentlist {
    margin: 0;
    ist-style-type: none;
}

.comment {
    position: relative;
    clear: both;
    overflow: hidden;
    padding: 1.5em;
    border-bottom: 1px solid #f8f9fa;
    /* vcard */
    /* end .commentlist .vcard */
    /* end children */
    /* general comment classes */
}
.comment .comment-author {
    padding: 7px;
    border: 0;
}
.comment .vcard {
    margin-left: 50px;
}
.comment .vcard cite.fn {
    font-weight: 700;
    font-style: normal;
}
.comment .vcard time {
    display: block;
    font-size: 0.9em;
    font-style: italic;
}
.comment .vcard time a {
    color: #9fa6b4;
    text-decoration: none;
}
.comment .vcard time a:hover {
    text-decoration: underline;
}
.comment .vcard .avatar {
    position: absolute;
    left: 16px;
    border-radius: 50%;
}
.comment:last-child {
    margin-bottom: 0;
}
.comment .children {
    margin: 0;
    /* variations */
    /* change number for different depth */
}
.comment[class*=depth-] {
    margin-top: 1.1em;
}
.comment.depth-1 {
    margin-left: 0;
    margin-top: 0;
}
.comment:not(.depth-1) {
    margin-top: 0;
    margin-left: 7px;
    padding: 7px;
}
.comment.odd {
    background-color: white;
}
.comment.even {
    background: #f8f9fa;
}

/* comment meta */
/* comment content */
.comment_content p {
    margin: 0.7335em 0 1.5em;
    font-size: 1em;
    line-height: 1.5em;
}

/* end .commentlist .comment_content */
/* comment reply link */
.comment-reply-link {
    font-size: 0.9em;
    float: right;
}

/* end .commentlist .comment-reply-link */
/* edit comment link */
.comment-edit-link {
    font-style: italic;
    margin: 0 7px;
    text-decoration: none;
    font-size: 0.9em;
}

/******************************************************************
COMMENT FORM STYLES
******************************************************************/
.comment-respond {
    padding: 1.5em;
    border-top: 1px solid #f8f9fa;
}

#reply-title {
    margin: 0;
}

.logged-in-as {
    color: #9fa6b4;
    font-style: italic;
    margin: 0;
}
.logged-in-as a {
    color: #5c6b80;
}

.comment-form-comment {
  margin: 1.5em 0 0.75em; }

.form-allowed-tags {
    padding: 1.5em;
    background-color: #f8f9fa;
    font-size: 0.9em;
}

/* comment submit button */
#submit {
  float: right;
  font-size: 1em;
}

/* comment form title */
#comment-form-title {
    margin: 0 0 1.1em;
}

/* cancel comment reply link */
/* logged in comments */
/* allowed tags */
#allowed_tags {
    margin: 1.5em 10px 0.7335em 0;
}

/* no comments */
.nocomments {
    margin: 0 20px 1.1em;
}

/*********************
SIDEBARS & ASIDES
*********************/
.widget {
    margin: 0;
    padding: 0;
}

.widget ul li {
  /* deep nesting */ }

.no-widgets {
    background-color: white;
    padding: 1.5em;
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 2px;
    margin-bottom: 1.5em;
}

/*********************
FOOTER STYLES
*********************/
.footer_hr {
    width: 100%;
    max-width: 1854px;
    margin: 0 auto;
    padding: 50px 0 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .footer_hr {
    padding: 80px 0 0;
  }
}
@media all and (min-width: 1024px) {
  .footer_hr {
    padding: 100px 0 0;
  }
}

.footer_hr hr {
    display: none;
}

.footer_contactWrap {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    isolation: isolate;
    background-image: url("../images/bg_footer.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 50px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: 0.3s ease-in-out;
}
.footer_contactWrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/dot1.png");
    background-repeat: repeat;
    background-size: auto;
    pointer-events: none;              /* ドットがクリック操作を邪魔しないように */
    z-index: 2;                        /* 画像の上に重ねる */
}

.footer_contactInner {
    position: relative;
    z-index: 3; /* ← 背景(::after)より上に表示 */
    text-align: center;
}






.footer_contactTitle {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 40px;
    padding: 0;
    text-align: center;
    transition: 0.3s ease-in-out;
}


.footer_contactTitle:before {
    color: #fff;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    content: "CONTACT";
    white-space: pre;
    line-height: 1.2;
    display: block;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 10px;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) and (max-width: 1023px) {
  .footer_contactTitle:before {
    font-size: 50px;
  }
}
@media all and (min-width: 1024px) {
  .footer_contactTitle:before {
    font-size: 60px;
  }
}










/* -------------------------
   電話ボタン
------------------------- */
.arrow_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 440px;
    margin: 0 auto;
    padding: 1em 1.5em;
    color: #fff;               /* 通常時は白文字 */
    border: 1px solid #fff;    /* 枠は常に白 */
    background: transparent;   /* 通常時は透明背景 */
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
}

/* ホバー時に白背景・黒文字、枠は白のまま */
.arrow_btn:hover {
    background: #fff;
    color: #000;
    /* border-color は変更しない */
}

/* 左側テキスト */
.arrow_btn-left {
    text-align: left;
    line-height: 1.4;
}

.call_title {
    font-size: 14px;
    margin: 0;
}

.call_time {
    font-size: 14px;
    margin: 0;
}

/* 右側電話番号 */
.arrow_btn-right {
    text-align: right;
}

.call_number {
    font-size: 26px;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    letter-spacing: 0.083em;
}

/* ホバー時に左右の文字色も黒に統一 */
.arrow_btn:hover .call_title,
.arrow_btn:hover .call_time,
.arrow_btn:hover .call_number {
    color: #000;
}

/* -------------------------
   メールボタン
------------------------- */
.arrow_btn_mail,
.arrow_btn_mail:link,
.arrow_btn_mail:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px;
    height: 80px;
    margin: 0 auto;
    padding: 0 1.5em;
    background: transparent;
    color: #fff;                      /* 文字色を白に固定 */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #fff;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.3s ease;
}

.arrow_btn_mail:hover,
.arrow_btn_mail:focus {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* -------------------------
   横並びボタンラッパー
------------------------- */
.contact_buttons {
    display: flex;
    gap: 10px;               /* ボタン間のスペース */
    justify-content: center;  /* 横中央に配置 */
    flex-wrap: wrap;          /* 狭い画面では折り返し */
    transition: 0.3s ease-in-out;

}

.contact_buttons .arrow_btn,
.contact_buttons .arrow_btn_mail {
    flex: 0 0 auto;          /* 横幅固定で伸縮しない */
    transition: 0.3s ease-in-out;
}

/* -------------------------
   460px以下のレスポンシブ対応
------------------------- */
@media screen and (max-width: 460px) {

    /* 電話ボタン横幅を300pxに縮小 */
    .arrow_btn {
        width: 320px;               /* 横幅を300pxに */
        justify-content: center;     /* 電話番号を中央に */
    }

    /* 左側テキストを非表示 */
    .arrow_btn-left {
        display: none;
    }

    /* 電話番号を左右中央に配置 */
    .arrow_btn-right {
        text-align: center;
        width: 100%;
    }

    /* メールボタン横幅を300pxに縮小 */
    .arrow_btn_mail {
        width: 320px !important;     /* ここで強制的に300pxに */
    }
}





.footer_followus {
    font-size: 18px;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    letter-spacing: 0.094em;
    margin: 0 0 10px;
}


/* footer_followusWrap 全体 */
.footer_followusWrap {
    width: 310px;
    margin: 40px auto 0;
    padding: 50px 0;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
}

/* 内側を上下左右中央に */
.footer_followusInner {
    display: flex;
    justify-content: center;        /* 横中央 */
    align-items: center;            /* 縦中央 */
    height: 100%;                   /* 必要に応じて高さ指定 */
    padding: 1em;                   /* 任意の余白 */
    color: #000;                    /* 文字色黒 */
}

/* SNSアイコンボックス */
.footer_snsBox {
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;                     /* SNS間のスペース */
}
.footer_snsBox .box1 {
    text-align: center;
}
.footer_snsBox .txt1 {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}

/* SNSリンクの色と装飾 */
.footer_snsBox a {
    color: #000;                    /* アイコン色黒 */
    text-decoration: none;          /* 下線なし */
    display: inline-flex;
    align-items: center;
}

/* SNSアイコンのサイズ調整（Font Awesome 2xに準拠） */
.footer_snsBox i {
    font-size: 2em;                 /* fa-2xと同等 */
}





.footer {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
    background: #000;
}

.footer_inner {
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) {
  .footer_inner {
    display: flex;                 /* 横並びにする */
    justify-content: space-between; /* 左右両端に配置 */
    align-items: center;            /* 高さを揃える */
  }
}

.footer_logo {
    width: 180px;
    margin: 0 auto;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 601px) {
  .footer_logo {
    width: 205px;
    margin: 0 auto 0 0;
  }
}

.footerNavi {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.0714em;
    display: block;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 420px) {
  .footerNavi {
    display: inline;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    justify-content:center;
    margin: 0;
  }
}

.footerNavi li {
    margin: 0;
    padding: 0;
}
.footerNavi li a:link {
    color: #fff;
    text-decoration: none;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.footerNavi li a:visited {
    color: #fff;
    text-decoration: none;
}
.footerNavi li a:hover {
    color: #ff5a01;
    text-decoration: none;
}
.footerNavi li a:active {
    color: #fff;
    text-decoration: none;
}

.footerNavi li .button {
    padding: 0 10px;
}

.footerNavi li+ li .button {
    border-left: none;
    margin: 10px 0 0 0;
    transition: 0.3s ease-in-out;
}
@media all and (min-width: 420px) {
  .footerNavi li+ li .button {
    border-left: 1px solid #fff;
    margin: 0;
  }
}

/*********************

/*********************
PARTS
*********************/

.text1 {
    padding-bottom: 3px;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
    transition: background-size 0.3s;
}

.text1:hover {
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 1px; /* 下線の横幅を100%にする */
}


.text2 {
    padding-bottom: 3px;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
    transition: background-size 0.3s;
}

.text2:hover {
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 1px; /* 下線の横幅を100%にする */
}


/*youtube埋め込み*/
.youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*youtube埋め込み終了*/




.button-24 a {
  font-family: 'Noto Sans JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  border: 3px solid #333;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center;
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  z-index:999;
  transition: all 0.3s;
}

.button-24 a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 60px;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
}

.button-24 a:hover::after {
  animation: OutIn-Line 700ms;
  transition: all 0.3s;
}

@keyframes OutIn-Line {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    50% {
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    50.1% {
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

.stitch-hr_wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.stitch-hr {
    width: 100%;
    max-width: 1110px;
	border: 0;
	height: 8px;
	background-image: repeating-linear-gradient(90deg, #777 0px, #777 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px);
}

/*********************
Gallery Plugin (調整用)
*********************/
.rl-gallery-item-title {
}

.rl-gallery-caption {

}

/*********************
select custom
*********************/
select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

select::-ms-expand {
    display: none;
}



/******************************************************************
ANIMATE ADD STYLES
******************************************************************/

/* ---- fadeInUp2 ---- */
@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 3%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}



/* ---- fadeInDown2 ---- */
@-webkit-keyframes fadeInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown2 {
  -webkit-animation-name: fadeInDown2;
  animation-name: fadeInDown2;
}



/* ---- fadeInRight2 ---- */
@-webkit-keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight2 {
  -webkit-animation-name: fadeInRight2;
  animation-name: fadeInRight2;
}



/* ---- fadeInLeft2 ---- */
@-webkit-keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft2 {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;
}



/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {
  /******************************************************************
  Site Name:
  Author:

  Stylesheet: Print Stylesheet

  This is the print stylesheet. There's probably not a lot
  of reasons to edit this stylesheet. If you want to
  though, go for it.

  ******************************************************************/
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; }

  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }