/*=============================================================
  common.css
---------------------------------------------------------------

01. common layout
02. header
03. footer
04. home
05. greeting
06. menu
07. media query
08. mobile
09. helper

===============================================================
01. common layout
=============================================================*/

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

body {
    color: #4d3737;
    letter-spacing: 3px;
}

.pc {
	display: inline-block;
}

.sp {
	display: none;
}

.central {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

img {
    display: inline-block;
    width: 100%;
}

#contents {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#contents p,
#contents ul li {
    font-size: 19px;
    line-height: 2;
}

#contents p {
    margin-bottom: 20px;
}

#contents .inner p:last-of-type {
    margin-bottom: 0;
}

#contents .inner p.mb-default {
    margin-bottom: 20px;
}

#contents .inner p.mb-plus {
    margin-bottom: 30px;
}

.ta-c {
	text-align: center;
}

.mb-plus {
	margin-bottom: 60px;
}

/*
 * loading layer
 */

#loading-layer {
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    transition-delay: 200ms;
    transition: all ease 800ms;
    overflow: hidden;
}

.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

/*
 * frame
 */

body::before,
body::after,
#bottom-line,
#wrapper::before,
#wrapper::after {
    display: block;
    background: #4d3737;
    position: fixed;
    z-index: 30;
}

body::before,
body::after,
#wrapper::before,
#wrapper::after {
    content: "";
}

body::before,
body::after,
#bottom-line {
    width: 100%;
    height: 10px;
    left: 0;
}

body::before {
    top: 0;
}

body::after,
#bottom-line {
    bottom: 0;
}

#wrapper::before,
#wrapper::after {
    width: 10px;
    height: 100%;
    top: 0;
}

#wrapper::before {
    left: 0;
}

#wrapper::after {
    right: 0;
}

/*
 * bg and video
 */

#bg {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#video-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#home #bg::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba( 255,255,255,0.3 );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#video {
    min-width: 100%;
    min-height: 100%;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

#video-wrapper .paused-layer {
    width: 100%;
    height: 100%;
    background: url( /common/video/poster-sp.jpg ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#video-wrapper .paused-layer.none {
    display: none;
}

/*
 * visial
 */

#visual {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

.pages #visual::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba( 0,0,0,0 );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.pages #visual #visual-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: scale( 1.4 );
    transition: all linear 3600ms;
    transition-delay: 00ms;
}

.pages.loaded #visual #visual-img {
    transform: scale( 1 );
}

.pages #visual h1 {
    width: 48%;
    max-width: 700px;
}

.pages #visual h1 img {
    display: block;
    transform: scale( 0.7 );
    transition: all linear 3300ms;
    transition-delay: 300ms;
    opacity: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pages.loaded #visual h1 img {
    transform: scale( 1 );
    opacity: 1;
}

/*
 * mass for layout
 */

.mass {
    padding: 100px 0;
}

.mass.white-base {
    background: #fff;
}

.mass.white-base-alpha {
    background: rgba( 255,255,255,0.1 );
}

.mass.brown-base-alpha {
    background: rgba( 77,55,55,0.7 );
    color: #fff;
}

.mass.with-border {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.mass.with-border::before,
.mass.with-border::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 1px;
    background: #4d3737;
    position: absolute;
    z-index: 1;
}

.mass.with-border::before {
    top: 0;
    left 0;
}

.mass.with-border::after {
    top: 3px;
    right: 0;
}

.mass .inner {
    width: 80%;
    margin: 0 auto;
}

/*
 * image parts
 */

.double-imgs {
    margin-bottom: 30px;
}

.box-img {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
}

.double-imgs .box-img {
    display: inline-block;
    width: 50%;
    padding-top: 42%;
}

/*
 * two colomn
 */

.two-colomn-wrapper {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.two-colomn-wrapper .lefter,
.two-colomn-wrapper .righter {
    width: 48%;
}

.two-colomn-wrapper .righter {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

/*
 * box alternate
 */

.box-alternate-wrapper {
    margin-bottom: 50px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.box-alternate-wrapper .box-img,
.box-alternate-wrapper .box-text {
    width: 48%;
}

.box-alternate-wrapper .box-img {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.box-alternate-wrapper.img-right .box-img {
    right: 0;
}

.box-alternate-wrapper.img-left .box-img {
    left: 0;
}

.box-alternate-wrapper.img-left .box-text {
    margin-left: 52%;
}

/*
 * basic motion
 */

.elem-01,
.elem-02 {
    transition: all ease 800ms;
    transform: translateY( 30px );
    opacity: 0;
}

.elem-02 {
    transition-delay: 300ms;
}

.active .elem-01,
.active .elem-02 {
    transform: translateY( 0 );
    opacity: 1;
}

/*
 * common elements
 */

.tit-01 {
    margin-bottom: 50px;
    font-size: 30px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 5px;
}

.tit-normal {
    margin-bottom: 0;
    font-size: 19px;
    text-align: left;
    line-height: 2;
    letter-spacing: 3px;
}

.btn-wrapper {
    text-align: center;
}

.btn-01,
.btn-01 span {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.btn-01 {
    width: 35%;
    min-width: 350px;
    max-width: 480px;
    padding: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: url( /common/img/shared/btn-base.jpg ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    font-size: 22px;
    color: #4d3737;
    text-decoration: none;
    text-align: center;
    line-height: 0.5;
}

.btn-01 > span {
    width: 100%;
    padding: 25px 0;
    background: #fff;
    overflow: hidden;
}

.btn-01 > span::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba( 149,97,52,0.2 );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: translateX( -100% );
}

.btn-01:hover > span::before {
    animation: btn-01-hover-motion ease forwards 900ms;
}

@keyframes btn-01-hover-motion {
    0%{ width: 100%; transform: translateX( -100% ) }
    50%{ width: 100%; transform: translateX( 0% ) }
    100%{ width: 100%; transform: translateX( 100% ) }
}

.btn-01 > span span::before,
.btn-01 > span span::after {
    display: inline-block;
    content: "";
    position: relative;
    z-index: 1;
}

.btn-01 > span span::before {
    width: 6px;
    height: 18px;
    margin-right: 8px;
    background: url( /common/img/shared/arrow.png ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    top: 1px;
    left: 0;
}

.btn-01 > span span::after {
    width: 24px;
    height: 1px;
    background: #4d3737;
    top: -6px;
    left: 4px;
}

.text-link {
    color: #4d3737
}

/*=============================================================
02. header
=============================================================*/

#main-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#main-header > h1 {
    width: 230px;
    position: absolute;
    top: 25px;
    left: 30px;
    z-index: 1;
}

#main-header #icons-wrapper {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 1;
}

#main-header #icon-nav,
#main-header #icon-tel {
    background: #4d3737;
    float: right;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #icon-nav {
    width: 100px;
    height: 100px;
    text-align: center;
    cursor: pointer;
}

#main-header #icon-nav span,
#main-header #icon-nav img {
    position: absolute;
    left: 10px;
    z-index: 1;
}

#main-header #icon-nav span {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: #fff;
    left: 30px;
    transition: all ease 300ms;
}

#main-header #icon-nav span:nth-of-type( 1 ) {
    top: 30px;
}

#main-header #icon-nav span:nth-of-type( 2 ) {
    top: 40px;
}

#main-header #icon-nav span:nth-of-type( 3 ) {
    width: 26px;
    top: 50px;
}

#main-header #icon-nav:hover span:nth-of-type( 1 ) {
    width: 34px;
}

#main-header #icon-nav:hover span:nth-of-type( 2 ) {
    width: 24px;
}

#main-header #icon-nav:hover span:nth-of-type( 3 ) {
    width: 40px;
}

#main-header #icon-nav img {
    width: 46px;
    top: 61px;
    left: 29px;
}

#main-header #icon-tel {
    margin-right: 1px;
}

#main-header #icon-tel a {
    display: block;
    height: 100px;
    padding: 30px 33px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

#main-header #icon-tel a img {
    width: auto;
    height: 36px;
}

#main-header #icon-tel a img:nth-of-type( 1 ) {
    margin-right: 10px;
}

#main-header #icon-tel a img:nth-of-type( 3 ) {
    display: none;
}

/*
* global nav
*/

#main-header #nav-wrapper {
    width: 0;
    height: 100%;
    background: url( /common/img/shared/nav-bg.jpg?v1 ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 11;
    overflow: hidden;
    transition: all ease 600ms;
}

.nav-open #main-header #nav-wrapper {
    width: 100%;
}

#main-header #nav-wrapper::before,
#main-header #nav-wrapper::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: #4d3737;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper::before {
    transition: all ease 600ms;
}

.nav-open #main-header #nav-wrapper::before {
    width: 0;
    transition-delay: 1200ms;
}

#main-header #nav-wrapper::after {
    display: block;
}

.nav-open #main-header #nav-wrapper::after {
    display: none;
}

#main-header #nav-wrapper div.central {
    width: 60%;
    max-width: 1200px;
}

#main-header #nav-wrapper nav {
    padding: 2px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper nav::before,
#main-header #nav-wrapper nav::after {
    display: inline-block;
    content: "";
    height: 100%;
    background: #4d3737;
    position: absolute;
    top: 0;
    z-index: 2;
    transition: all ease 600ms;
}

#main-header #nav-wrapper nav::before {
    width: 37%;
    left: 0;
}

#main-header #nav-wrapper nav::after {
    width: 60%;
    left: 40%;
}

.nav-open #main-header #nav-wrapper nav::before,
.nav-open #main-header #nav-wrapper nav::after {
    width: 0;
    transition-delay: 600ms;
}

#main-header #nav-wrapper a,
#main-header #nav-wrapper nav ul li,
#main-header #nav-wrapper nav ul li a span {
    display: inline-block;
}

#main-header #nav-wrapper nav ul {
    opacity: 0;
    transition: all ease 200ms;
    transition-delay: 200ms;
}

.nav-open #main-header #nav-wrapper nav ul {
    opacity: 1;
}

#main-header #nav-wrapper nav ul li {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper nav ul li a span.nav-img {
    width: 35%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#main-header #nav-wrapper nav ul li a span.nav-img::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 500ms;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#main-header #nav-wrapper nav ul li:nth-of-type( 1 ) a span.nav-img::before {
    background-image: url( /common/img/shared/nav-img-01.jpg?v2 );
}

#main-header #nav-wrapper nav ul li:nth-of-type( 2 ) a span.nav-img::before {
    background-image: url( /common/img/shared/nav-img-02.jpg?v2 );
}

#main-header #nav-wrapper nav ul li:nth-of-type( 3 ) a span.nav-img::before {
    background-image: url( /common/img/shared/nav-img-03.jpg?v2 );
}

#main-header #nav-wrapper nav ul li a:hover span.nav-img::before {
    transform: scale( 1.2 );
}

#main-header #nav-wrapper nav ul li a span.nav-text {
    width: 60%;
    padding: 8% 0;
    border-bottom: solid 1px rgba( 255,255,255,0.4 );
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 40%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper nav ul li:nth-of-type( 1 ) a span.nav-text {
    border-top: solid 1px rgba( 255,255,255,0.4 );
}

#main-header #nav-wrapper nav ul li a span.nav-text img {
    padding: 0 20%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all ease 500ms;
    opacity: 0.6;
}

#main-header #nav-wrapper nav ul li a:hover span.nav-text img {
    opacity: 1;
}

#main-header #close-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #icon-close {
    width: 100px;
    height: 100px;
    background: #4d3737;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
}

#main-header #icon-close::before,
#main-header #icon-close::after {
    width: 50px;
    height: 1px;
    display: inline-block;
    content: "";
    background: #fff;
    position: absolute;
    top: 50px;
    left: 27px;
    z-index: 1;
    transition: all ease 600ms;
    opacity: 0;
}

.nav-open #main-header #icon-close::before,
.nav-open #main-header #icon-close::after {
    opacity: 1;
}

.nav-open #main-header #icon-close::before {
    transform: rotate( 45deg );
}

.nav-open #main-header #icon-close::after {
    transform: rotate( 135deg );
}

/*=============================================================
03. footer
=============================================================*/

#main-footer {
    width: 100%;
    padding: 50px 0;
    background: #4d3737;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
}

#main-footer p {
    color: #fff;
    font-size: 16px;
}

/*=============================================================
04. home
=============================================================*/

#home #visual #motion-part {
    display: block;
    width: 100%;
    height: 100%;
    background: url( /common/img/home/visual.png?v2 ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    transition: all linear 8000ms;
    transform: scale( 1.27 );
    overflow: hidden;
}

#home.loaded #visual #motion-part {
    transform: scale( 1 );
}

#home #part-01 .double-imgs .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/home/img-01.jpg?v2 );
}

#home #part-01 .double-imgs .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/home/img-02.jpg?v3 );
}

#home #part-02 .lefter .tit-01 {
    margin-bottom: 20px;
    text-align: left;
}

#home #part-02 .lefter table {
    margin-bottom: 20px;
    font-size: 17px;
}

#home #part-02 .lefter table br {
    display: none;
}

#home #part-02 .lefter table tr {
    border-bottom: solid 1px #4d3737;
}

#home #part-02 .lefter table tr:nth-of-type( 1 ) {
    border-top: solid 1px #4d3737;
}

#home #part-02 .lefter table tr:nth-of-type( 1 ) th,
#home #part-02 .lefter table tr:nth-of-type( 1 ) td {
    padding: 15px 0;
}

#home #part-02 .lefter table tr:nth-of-type( 1 ) th:last-of-type {
    letter-spacing: 0;
}

#home #part-02 .lefter table tr:nth-of-type( 2 ) td:nth-of-type( 1 ),
#home #part-02 .lefter table tr:nth-of-type( 3 ) td:nth-of-type( 1 ) {
    letter-spacing: 2px;
}

#home #part-02 .lefter table th,
#home #part-02 .lefter table td {
    vertical-align: middle;
}

#home #part-02 .lefter table tr th:nth-of-type( 1 ),
#home #part-02 .lefter table tr td:nth-of-type( 1 ) {
    width: 130px;
    text-align: left;
}

#home #part-02 .lefter ul {
    margin-bottom: 20px;
}

#home #part-02 .lefter .box-img {
    width: 100%;
    padding-top: 57%;
    background-image: url( /common/img/home/img-03.jpg?v1 );
    background-position: top center;
}

#home #part-02 #map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.88;
}

#home #part-03 .box-alternate-wrapper:last-of-type .box-text ul {
    margin-bottom: 30px;
}

#home #part-03 .box-text ul,
#home #part-03 .box-text ul li {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#home #part-03 .box-text ul li {
    padding: 16px 0 16px 40px;
    text-indent: -40px;
}

#home #part-03 .box-text ul::before,
#home #part-03 .box-text ul li::before,
#home #part-03 .box-text ul li::after {
    display: inline-block;
    content: "";
}

#home #part-03 .box-text ul li::before {
    width: 30px;
    height: 17px;
    margin-right: 10px;
    background: url( /common/img/home/icon-check.png ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#home #part-03 .box-text ul::before,
#home #part-03 .box-text ul li::after {
    width: 0;
    height: 1px;
    background: rgba( 77,55,55,0.6 );
    position: absolute;
    left: 0;
    z-index: 1;
    transition: all ease 800ms;
    transition-delay: 800ms;
}

#home #part-03 .box-text ul::before{
    top: 0;
}

#home #part-03 .box-text ul li::after {
    bottom: 0;
}

#home #part-03.active .box-text ul::before,
#home #part-03.active .box-text ul li::after {
    width: 100%;
}

#home #part-03 .box-alternate-wrapper:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/home/img-04.jpg );
}

#home #part-03 .box-alternate-wrapper:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/home/img-05.jpg );
    background-position: top center;
}

#home #part-03 .btn-01 {
    width: 100%;
    max-width: none;
    min-width: auto;
}

#home #part-03 .btn-01 > span span::after {
    display: none;
}

#home #part-04 .double-imgs .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/home/img-06.jpg );
}

#home #part-04 .double-imgs .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/home/img-07.jpg );
}

#home #part-05 ol {
    margin: 0 5% 40px 7%;

    text-align: center;
}

#home #part-05 ol li {
    display: inline-block;
    width: 33.33333%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: left;
}

#home #part-05 ol li img {
    width: 90%;
    padding: 0 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#home #part-05 ol li::after {
    display: inline-block;
    content: "";
    width: 10%;
    height: 100%;
    background: url( /common/img/home/arrow-horizontal.png ) center center no-repeat;
    -webkit-background-size: 10px 50px;
    background-size: 10px 50px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#home #part-05 ol li:last-of-type::after {
    display: none;
}

#home #part-08 a {
	text-align: center;
	display: block;
	font-size: 20px; 
	color: #4d3737;
}

#home #part-08 a:nth-of-type(2) > img {
	width: 7%;
}

/*=============================================================
05. greetibg
=============================================================*/

#greeting #visual #visual-img {
    background-image: url( /common/img/greeting/visual.jpg?v2 );
}

#greeting #bg {
    background-image: url( /common/img/greeting/bg.jpg?v1 );
}

#greeting .gallery-box li {
    display: inline-block;
    width: 33.33333%;
    padding-top: 33.33333%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    vertical-align: bottom;
}

#greeting .gallery-box li a,
#greeting .gallery-box li a img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#greeting .gallery-box li a {
    width: 100%;
    height: 100%;
}

#greeting .gallery-box li a img {
    width: 100%;
    height: 100%;
    transition: all ease 500ms;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#greeting .gallery-box li a:hover img {
    transform: scale( 1.2 );
}

/*=============================================================
06. menu
=============================================================*/

#menu #visual #visual-img {
    background-image: url( /common/img/menu/visual.jpg?v1 );
}

#menu #visual h1 {
    top: 49%;
}

#menu #bg {
    background-image: url( /common/img/menu/bg.jpg?v1 );
}

#menu table {
    width: 100%;
    margin-bottom: 20px;
}

#menu table tr {
    width: 100%;
}

#menu table tr th,
#menu table tr td {
    width: 25%;
    padding: 25px 0;
    font-size: 19px;
    text-align: center;
    vertical-align: middle;
}

#menu table.stripe-01 {
    border-right: solid 1px #4d3737;
    border-left: solid 1px #4d3737;
}

#menu table.stripe-01 tr {
    border-bottom: solid 1px #4d3737;
}

#menu table.stripe-01 tr:nth-of-type( 1 ) {
    border-top: solid 1px #4d3737;
}

#menu table.stripe-01 tr th,
#menu table.stripe-01 tr td {
    border-left: solid 1px rgba( 77,55,55,0.3 );
}

#menu table.stripe-01 tr th:nth-of-type( 1 ) {
    border: none;
}

#menu table.stripe-01 tr th:nth-child( even ),
#menu table.stripe-01 tr td:nth-child( even ) {
    background: rgba( 77,55,55,0.1 );
}

#menu table.stripe-02 {
    border-right: solid 1px rgba( 255,255,255,0.3 );
    border-left: solid 1px rgba( 255,255,255,0.3 );
}

#menu table.stripe-02 tr {
    border-bottom: solid 1px rgba( 255,255,255,0.3 );
}

#menu table.stripe-02 tr:nth-of-type( 1 ) {
    border-top: solid 1px rgba( 255,255,255,0.3 );
}

#menu table.stripe-02 tr th,
#menu table.stripe-02 tr td {
    border-left: solid 1px rgba( 255,255,255,0.15 );
}

#menu table.stripe-02 tr th:nth-of-type( 1 ) {
    border: none;
}

#menu table.stripe-02 tr th:nth-child( odd ),
#menu table.stripe-02 tr td:nth-child( odd ) {
    background: rgba( 255,255,255,0.08);
}

#menu p.top-bottom-lines {
    padding: 20px 0;
    border-top: solid 2px #4d3737;
    border-bottom: solid 2px #4d3737;
    font-size: 26px;
    text-align: center;
}

#menu p.top-bottom-lines.mb-default {
    margin-bottom: 30px;
}

#menu #part-01 .box-img {
    background-image: url( /common/img/menu/img-01.jpg?v1 );
    padding-top: 50%;
}

#menu #part-02 article:nth-of-type( 1 ) {
    margin-bottom: 40px;
}

#menu #part-02 .double-imgs .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/menu/img-02.jpg?v1 );
}

#menu #part-02 .double-imgs .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/menu/img-03.jpg?v1 );
}

#menu #part-03 .double-imgs .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/menu/img-04.jpg?v2 );
}

#menu #part-03 .double-imgs .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/menu/img-05.jpg?v1 );
}

#menu #part-04 section h1 {
    padding-top: 20px;
    border-top: solid 1px rgba( 255,255,255,0.3 );
    margin-bottom: 20px;
}

#menu #part-04 .row .lefter,
#menu #part-04 .row .righter {
    width: 48%;
}

#menu #part-04 .row .lefter {
    float: left;
}

#menu #part-04 .row .righter {
    float: right;
}

/*=============================================================
07. media query
=============================================================*/

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

    #home #part-05 ol {
        margin: 0 0 40px 2%;
    }

}

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

    #home #part-03 .box-alternate-wrapper:nth-of-type( 2 ) .box-img {
        background-image: url( /common/img/home/img-05-square.jpg );
    }

}

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

    .mass {
        padding: 60px 0;
    }

    .mass .inner {
        width: 86%;
    }

}

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

    .tit-01 {
        margin-bottom: 30px;
    }

    .double-imgs .box-img {
        padding-top: 50%;
    }

    .pages #visual h1 {
        width: 55%;
    }

    #main-header > h1 {
        width: 210px;
    }

    #main-header #nav-wrapper div.central {
        width: 84%;
    }

    #home #part-02 .lefter table {
        font-size: 14px;
        letter-spacing: 0;
    }

    #home #part-02 .lefter table br {
        display: inline-block;
    }

    #home #part-02 .lefter table tr th,
    #home #part-02 .lefter table tr td,
    #home #part-02 .lefter table tr:nth-of-type( 1 ) th,
    #home #part-02 .lefter table tr:nth-of-type( 1 ) td {
        padding: 10px 0;
        line-height: 1.4;
    }

    #home #part-02 .lefter table tr:nth-of-type( 2 ) td:nth-of-type( 1 ), 
    #home #part-02 .lefter table tr:nth-of-type( 3 ) td:nth-of-type( 1 ) {
        letter-spacing: 1px;
    }

    #home #part-02 .lefter table tr th:nth-of-type( 1 ),
    #home #part-02 .lefter table tr td:nth-of-type( 1 ) {
        width: 54px;
    }

    #home #part-05 ol li img {
        padding: 3% 0;
    }

    #home #part-05 ol li::after {
        -webkit-background-size: 7px 36px;
        background-size: 7px 36px;
    }
	
	#home #part-08 a:nth-of-type(2) > img {
	width: 20%;
}

    #menu table tr th,
    #menu table tr td {
        font-size: 18px;
        letter-spacing: 1px;
    }

    #menu #part-01 .box-img {
        padding-top: 70%;
    }

    #menu #part-02 .double-imgs .box-img:nth-of-type( 1 ) {
        background-position: left center;
    }

    #menu #part-04 .row .lefter,
    #menu #part-04 .row .righter {
        width: 49%;
    }

}

@media screen and (max-width: 1024px) and (orientation: portrait) {

    #greeting #visual #visual-img {
        background-image: url( /common/img/greeting/visual-sp.jpg?v1 );
    }
    
}

@media screen and (max-width: 700px) and (orientation: portrait) {

    #home #visual #motion-part {
        background-image: url( /common/img/home/visual-sp.png?v2 );
        background-position: center top;
    }
    
}

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

	.pc {
		display: none;
    }

	.sp {
		display: inline-block;
    }

    body::before,
    body::after,
    #bottom-line {
        height: 7px;
    }

    #wrapper::before,
    #wrapper::after {
        width: 7px;
    }

    .mass {
        padding: 50px 0 65px;
    }

    .mass:last-of-type {
        padding: 50px 0 50px;
    }

    .mass .inner {
        width: 84%;
    }

    .btn-01 {
        width: 100%;
        min-width: auto;
        max-width: none;
        font-size: 20px;
    }

    .tit-01 {
        margin-bottom: 30px;
        font-size: 26px;
        letter-spacing: 2px;
    }

    #contents p,
    #contents ul li {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .double-imgs .box-img {
        width: 100%;
        vertical-align: bottom;
        padding-top: 100%;
    }

    .two-colomn-wrapper .lefter,
    .two-colomn-wrapper .righter {
        width: 100%;
    }

    .two-colomn-wrapper .righter {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .box-alternate-wrapper {
        margin-bottom: 30px;
    }

    .box-alternate-wrapper:last-of-type {
        margin-bottom: 0;
    }

    .box-alternate-wrapper .box-img,
    .box-alternate-wrapper .box-text {
        width: 100%;
    }

    .box-alternate-wrapper .box-img {
        padding-top: 100%;
        margin-bottom: 30px;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .box-alternate-wrapper.img-left .box-text {
        margin-left: 0;
    }

    .pages #visual h1 {
        width: 66%;
    }

    #main-header > h1 {
        width: 170px;
        top: 19px;
        left: 23px;
    }

    #main-header #icon-nav {
        width: 80px;
        height: 80px;
    }

    #main-header #icon-nav span {
        width: 34px;
        left: 23px;
    }

    #main-header #icon-nav span:nth-of-type( 1 ) {
        top: 21px;
    }

    #main-header #icon-nav span:nth-of-type( 2 ) {
        top: 30px;
    }

    #main-header #icon-nav span:nth-of-type( 3 ) {
        width: 20px;
        top: 39px;
    }

    #main-header #icon-nav img {
        width: 40px;
        top: 50px;
        left: 21px;
    }

    #main-header #icon-tel a img:nth-of-type( 1 ),
    #main-header #icon-tel a img:nth-of-type( 2 ) {
        display: none;
    }

    #main-header #icon-tel a {
        width: 80px;
        height: 80px;
        padding: 12px 12px 12px 12px;
    }

    #main-header #icon-tel a img:nth-of-type( 3 ) {
        display: block;
        width: 100%;
        height: auto;
    }

    #main-header #nav-wrapper div.central {
        width: 86%;
    }

    #main-header #nav-wrapper nav ul li a span.nav-img {
        width: 40%;
    }

    #main-header #nav-wrapper nav ul li a span.nav-text {
        width: 58%;
        padding: 12% 0;
        margin-left: 42%;
    }

    #main-header #nav-wrapper nav ul li a span.nav-text img {
        padding: 0 9%;
    }

    #main-header #nav-wrapper nav::before {
        width: 42%;
    }

    #main-header #nav-wrapper nav::after {
        width: 60%;
        left: 41%;
    }

    #main-header #icon-close {
        width: 80px;
        height: 80px;
    }

    #main-header #icon-close::before,
    #main-header #icon-close::after {
        width: 40px;
        top: 40px;
        left: 20px;
    }

    #main-footer p {
        font-size: 14px;
        letter-spacing: 2px;
    }

    #home #part-01 .tit-01 {
        font-size: 25px;
    }

    #home #part-02 .lefter .tit-01 {
        padding-top: 12px;
        margin-bottom: 12px;
        border-top: solid 1px #4d3737;
        font-size: 20px;
        text-align: center;
    }

    #home #part-02 .lefter {
        margin-bottom: 30px;
    }

    #home #part-02 .lefter .box-img {
        padding-top: 100%;
    }

    #home #part-02 .righter {
        padding-top: 150%;
    }

    #home #part-04 .double-imgs .box-img:nth-of-type( 1 ) {
        display: none;
    }

    #home #part-05 ol {
        margin: 0 2% 40px 2%;
    }

    #home #part-05 ol li {
        width: 100%;
        text-align: center;
    }

    #home #part-05 ol li img {
        width: 100%;
        padding: 0;
        vertical-align: bottom;
    }

    #home #part-05 ol li::after {
        display: inline-block;
        width: 1px;
        height: 30px;
        background: url( /common/img/home/arrow-vertical.png ) center center no-repeat;
        background: #fff;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        vertical-align: bottom;
    }

    #greeting .gallery-box li {
        width: 50%;
        padding-top: 50%;
    }

    #menu #visual #visual-img {
        background-position: left center;
    }

    #menu .double-imgs {
        margin-bottom: 0;
    }

    #menu table tr th,
    #menu table tr td {
        padding: 12px 0;
        font-size: 16px;
        letter-spacing: 1px;
        line-height: 1.4;
    }

    #menu table.stripe-01 tr:nth-of-type( 1 ) th,
    #menu table.stripe-01 tr:nth-of-type( 1 ) td {
        padding: 22px 0;
    }

    #menu #part-01 .box-img {
        padding-top: 130%;
        background-image: url( /common/img/menu/img-01-sp.jpg );
    }

    #menu #part-02,
    #menu #part-03 {
        background: rgba( 175,202,228,0.4 );
    }

    #menu #part-04 .row .lefter,
    #menu #part-04 .row .righter {
        width: 100%;
        float: none;
    }

    #menu #part-04 table {
        margin-bottom: 0;
    }

    #menu #part-04 .row .righter .tit-01 {
        border-top: none;
    }

}

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

    #contents p, #contents ul li {
        font-size: 17px;
    }

    #main-header > h1 {
        width: 132px;
        top: 23px;
        left: 19px;
    }

    #menu table tr th,
    #menu table tr td {
        font-size: 14px;
    }

}

/*=============================================================
08. mobile
=============================================================*/

.mobile #bg {
    background-position: center top;
}

.mobile #main-header #icon-nav:hover span:nth-of-type( 1 ),
.mobile #main-header #icon-nav:hover span:nth-of-type( 2 ) {
    width: 40px;
}

.mobile #main-header #icon-nav:hover span:nth-of-type( 3 ) {
    width: 26px;
}

.mobile .btn-01 > span::before {
    display: none;
}

.mobile #main-header #nav-wrapper nav ul li a:hover span.nav-img::before {
    transform: scale( 1 );
}

.mobile #main-header #nav-wrapper nav ul li a span.nav-text img,
.mobile #main-header #nav-wrapper nav ul li a:hover span.nav-text img {
    opacity: 1;
}

#greeting.mobile .gallery-box li a:hover img {
    transform: scale( 1 );
}

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

    .mobile #main-header #icon-nav:hover span:nth-of-type( 1 ),
    .mobile #main-header #icon-nav:hover span:nth-of-type( 2 ) {
        width: 34px;
    }

    .mobile #main-header #icon-nav:hover span:nth-of-type( 3 ) {
        width: 20px;
    }

}

/*=============================================================
09. helper
=============================================================*/

.clr {
	clear: both;
}

/*
* clear fix
*/

.cf:before,
.cf:after {
	content:"";
	display: block;
	height: 0;
	overflow: hidden;
}

.cf:after {
	clear: both;
}