@charset 'UTF-8';
/* ==========================================================================
   Foundation
   ========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Roboto);
@font-face
{
    font-family: 'Yu Gothic';
    font-weight: 100; 

    src: local('Yu Gothic Medium');
}

@font-face
{
    font-family: 'Yu Gothic';
    font-weight: 200; 

    src: local('Yu Gothic Medium');
}

@font-face
{
    font-family: 'Yu Gothic';
    font-weight: 300; 

    src: local('Yu Gothic Medium');
}

@font-face
{
    font-family: 'Yu Gothic';
    font-weight: 400; 

    src: local('Yu Gothic Medium');
}

@font-face
{
    font-family: 'Yu Gothic';
    font-weight: bold; 

    src: local('Yu Gothic Bold');
}

@font-face
{
    font-family: 'Helvetica Neue';
    font-weight: 100; 

    src: local('Helvetica Neue Regular');
}

@font-face
{
    font-family: 'Helvetica Neue';
    font-weight: 200; 

    src: local('Helvetica Neue Regular');
}

@media all and (-ms-high-contrast: none)
{
    body,
    tooltip,
    popover
    {
        font-family: Verdana, Meiryo, sans-serif;
    }
}

@font-face
{
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal; 

    src: url('../fonts/icomoon.eot?yf3m2v');
    src: url('../fonts/icomoon.eot?yf3m2v#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?yf3m2v') format('truetype'), url('../fonts/icomoon.woff?yf3m2v') format('woff'), url('../fonts/icomoon.svg?yf3m2v#icomoon') format('svg');
}

[class^='icon-'],
[class*=' icon-']
{
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;

    text-transform: none;

    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mail:before
{
    content: '\e900';
}

.icon-pin:before
{
    content: '\e901';
}

/* Reset
   ----------------------------------------------------------------- */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
    outline: 0;
    background: transparent;
}

body
{
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
    display: block;
}

ul,
ol
{
    list-style: none;
}

blockquote,
q
{
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after
{
    content: '';
    content: none;
}

a
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    background: transparent;
}

/*! change colours to suit your needs */
ins
{
    text-decoration: none; 

    color: #000;
    background-color: #ff9;
}

/*! change colours to suit your needs */
mark
{
    font-weight: bold; 
    font-style: italic;

    color: #000;
    background-color: #ff9;
}

del
{
    text-decoration: line-through;
}

abbr[title],
dfn[title]
{
    cursor: help; 

    border-bottom: 1px dotted;
}

table
{
    border-spacing: 0; 
    border-collapse: collapse;
}

/*! change border colour to suit your needs */
hr
{
    display: block;

    height: 1px;
    margin: 1em 0;
    padding: 0; 

    border: 0;
    border-top: 1px solid #ccc;
}

input,
select
{
    vertical-align: middle;
}

main
{
    display: block;
}

/* Base
   ----------------------------------------------------------------- */
html
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

*,
*:before,
*:after
{
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

body
{
    font-family: '游ゴシック', YuGothic, Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: 500;
    line-height: 1.7;

    color: #333;
    /* アンチエイリアスを指定する */

    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    /* メトリクスカーニングを指定する */
    -webkit-font-kerning: normal;
            font-kerning: normal;
    -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 767px)
{
    body
    {
        font-size: 13px;
        font-size: 3.47vw;
    }
}

@media screen and (min-width: 768px)
{
    body
    {
        font-size: 14px;
        font-size: .875rem;
    }
}

@media screen and (max-width: 1023px)
{
    body.is-fixed
    {
        position: fixed;

        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width: 1023px)
{
    body.is-fixed::after
    {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100%;

        content: '';

        background: rgba(0, 0, 0, .1);
    }
}

_:-ms-input-placeholder,
:root body
{
    font-family: 'メイリオ', Meiryo, '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', sans-serif;
}

a
{
    color: #333;
}

a:hover,
a:active,
a:focus
{
    text-decoration: none; 

    opacity: .8;
}

/* フルードイメージにします。 */
img
{
    max-width: 100%;
    height: auto;

    vertical-align: middle;
}

/* svgのIEバグ回避 */
img[src$='.svg']
{
    width: 100%;
    height: auto;
}

code,
pre
{
    font-family: Consolas, Menlo, Courier, monospace;
}

.fade
{
    -webkit-transition-duration: .7s;
            transition-duration: .7s;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); 

    opacity: 0;
}

.fade.on
{
    -webkit-transform: translateY(0);
            transform: translateY(0); 

    opacity: 1;
}

/* ==========================================================================
   Layout
   ========================================================================== */
/* Main
   ----------------------------------------------------------------- */
.l-container
{
    position: relative; 

    overflow: hidden;
}

@media screen and (max-width: 767px)
{
    .l-container
    {
        padding-top: 21.33vw;
    }
}

/* Footer
   ----------------------------------------------------------------- */
/* Main
   ----------------------------------------------------------------- */
/* ==========================================================================
   Object
   ========================================================================== */
/* Component
   ----------------------------------------------------------------- */
/* c-btn
-------------------------------------------------------------------------- */
.c-btn
{
    font-weight: 600;
    line-height: 1;

    position: relative;

    display: inline-block;

    padding: 0;

    cursor: pointer;
    -webkit-transition: background .2s ease, color .2s ease, border .2s ease;
            transition: background .2s ease, color .2s ease, border .2s ease; 
    text-align: center;
    vertical-align: middle;
    text-decoration: none;

    border: none;
    border-color: transparent;
    border-radius: 2em;
    outline: none;
    background-color: transparent;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

@media screen and (min-width: 768px)
{
    .c-btn
    {
        font-size: 14px;
        font-size: .875rem;

        border-width: 2px;
        border-style: solid;
    }
}

.c-btn:hover
{
    opacity: 1;
}

@media screen and (max-width: 767px)
{
    .c-btn--sm
    {
        font-size: 12px;
        font-size: 3.2vw; 
        line-height: 8.53333vw;

        width: 32.53333vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-btn--sm
    {
        font-size: 14px;
        font-size: .875rem;
        line-height: 36px; 

        padding: 0 35px;
    }
}

@media screen and (max-width: 767px)
{
    .c-btn--md
    {
        font-size: 13px;
        font-size: 3.47vw; 
        line-height: 13.33333vw;

        width: 73.33333vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-btn--md
    {
        font-size: 14px;
        font-size: .875rem;
        line-height: 52px; 

        padding: 0 60px;
    }
}

.c-btn--primary
{
    -webkit-transition: .2s ease;
            transition: .2s ease; 

    color: #fff;
    border-color: #179454;
    background: #179454;
}

@media screen and (min-width: 768px)
{
    .c-btn--primary:hover
    {
        color: #179454;
        background: #fff;
    }
}

.c-btn--secondary
{
    -webkit-transition: .2s ease;
            transition: .2s ease; 

    color: #333;
    border-color: #fffa80;
    background: #fffa80;
}

@media screen and (min-width: 768px)
{
    .c-btn--secondary:hover
    {
        border-color: #161726;
        background: #fff;
    }
}

@media screen and (max-width: 767px)
{
    .c-btn__icon
    {
        margin-right: 2.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-btn__icon
    {
        margin-right: 8px;
    }
}

.c-btn__icon--mail
{
    position: relative;
}

@media screen and (max-width: 767px)
{
    .c-btn__icon--mail
    {
        font-size: 18px;
        font-size: 4.8vw; 

        top: .8vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-btn__icon--mail
    {
        font-size: 20px;
        font-size: 1.25rem; 

        top: 3px;
    }
}

.c-btn__icon--pin
{
    position: relative;
}

@media screen and (max-width: 767px)
{
    .c-btn__icon--pin
    {
        font-size: 18px;
        font-size: 4.8vw; 

        top: .8vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-btn__icon--pin
    {
        font-size: 24px;
        font-size: 1.5rem; 

        top: 4px;
    }
}

@media screen and (max-width: 767px)
{
    .c-card
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        text-decoration: none;
    }
}

@media screen and (max-width: 767px)
{
    .c-card__thumb
    {
        width: 32.8vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-card__thumb
    {
        margin-bottom: 30px;
    }
}

.c-card__thumb img
{
    width: 100%;
}

@media screen and (max-width: 767px)
{
    .c-card__thumb img
    {
        width: 32.8vw;
        height: 20.8vw;

        -o-object-fit: cover;
           object-fit: cover;
    }
}

@media screen and (max-width: 767px)
{
    .c-card__content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            flex-direction: column;

        padding-left: 2.93vw; 

        -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

.c-card__title
{
    line-height: 1;

    color: #179454;
}

@media screen and (max-width: 767px)
{
    .c-card__title
    {
        font-size: 16px;
        font-size: 4.27vw; 

        margin-bottom: 2.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-card__title
    {
        font-size: 20px;
        font-size: 1.25rem; 

        margin-bottom: 10px;
    }
}

@media screen and (max-width: 767px)
{
    .c-card__text
    {
        display: none;
    }
}

@media screen and (min-width: 768px)
{
    .c-card__text
    {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 767px)
{
    .c-card__btn
    {
        font-size: 11px;
        font-size: 2.93vw;
        font-weight: normal;
        line-height: 1;

        width: auto;
        padding: 0;

        text-align: left;

        color: #333;
        background: transparent;
    }
}

/* c-container
-------------------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .c-container
    {
        padding: 0 25px;
    }
}

@media screen and (min-width: 768px)
{
    .c-container
    {
        padding: 0 100px;
    }
}

/* c-figure
-------------------------------------------------------------------------- */
.c-figure
{
    position: absolute;
    z-index: -1; 

    display: inline-block;
}

.c-figure img
{
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px)
{
    .c-figure--square
    {
        top: 61.33vw;
        right: 0;

        width: 34.13333vw;
        height: 43.73333vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-figure--square
    {
        top: 9%;
        right: 0;

        width: 24.21%;
    }
}

@media screen and (max-width: 767px)
{
    .c-figure--circle
    {
        top: 155.73vw;
        right: 0;

        width: 38.93333vw;
        height: 38.93333vw;

        -webkit-transform: translateX(43%);
                transform: translateX(43%);
    }
}

@media screen and (min-width: 768px)
{
    .c-figure--circle
    {
        top: 34%;
        left: 0;

        width: 19.06%;

        -webkit-transform: translateX(-19%);
                transform: translateX(-19%);
    }
}

@media screen and (max-width: 767px)
{
    .c-figure--triangle
    {
        top: 311.47vw;
        left: 0;

        width: 38.93333vw;
        height: 38.93333vw;

        -webkit-transform: translateX(-41%);
                transform: translateX(-41%);
    }
}

@media screen and (min-width: 768px)
{
    .c-figure--triangle
    {
        top: 48%;
        right: 0;

        width: 19.53%;

        -webkit-transform: translateX(12%);
                transform: translateX(12%);
    }
}

@media screen and (min-width: 768px)
{
    .c-figure--top.c-figure--triangle
    {
        top: 39%;
    }
}

@media screen and (min-width: 768px)
{
    .c-figure--top.c-figure--circle
    {
        top: 23%;
    }
}

@media screen and (max-width: 767px)
{
    .c-figure--top.c-figure--square
    {
        top: 30.67vw;

        width: 94.66667vw;
        height: 73.86667vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-figure--top.c-figure--square
    {
        top: 200px;

        width: 45.93%;
    }
}

.c-hamburger
{
    position: fixed;
    z-index: 100; 

    cursor: pointer;

    outline: none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 767px)
{
    .c-hamburger
    {
        top: 0;
        right: 0;

        padding: 8.67vw 6.67vw 8.67vw 6.67vw; 
        padding-right: 6.67vw;
        padding-left: 6.67vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    .c-hamburger
    {
        top: 30px;
        right: 30px;

        display: block;

        width: 35px;
    }
}

@media screen and (min-width: 1024px)
{
    .c-hamburger
    {
        display: none;
    }
}

.c-hamburger__btn
{
    position: relative;

    display: block;

    width: 100%;

    cursor: pointer;
    -webkit-transition: all .4s;
            transition: all .4s;

    outline: none;
}

@media screen and (max-width: 767px)
{
    .c-hamburger__btn
    {
        width: 6.4vw;
        height: 4.8vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    .c-hamburger__btn
    {
        z-index: 102; 

        width: 35px;
        height: 26px;
    }
}

.c-hamburger__btn span
{
    position: absolute;
    left: 0;

    display: inline-block;

    content: '';
    -webkit-transition: all .3s;
            transition: all .3s; 

    background: #333;
}

@media screen and (max-width: 767px)
{
    .c-hamburger__btn span
    {
        width: 6.4vw;
        height: .53333vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    .c-hamburger__btn span
    {
        width: 100%;
        height: 2px;
    }
}

.c-hamburger__btn span:nth-of-type(1)
{
    top: 0;
}

@media screen and (max-width: 767px)
{
    .c-hamburger__btn span:nth-of-type(1)
    {
        -webkit-animation: menu-bar01-sp .65s forwards;
                animation: menu-bar01-sp .65s forwards;
    }
}

@media screen and (min-width: 768px)
{
    .c-hamburger__btn span:nth-of-type(1)
    {
        -webkit-animation: menu-bar01 .65s forwards;
                animation: menu-bar01 .65s forwards;
    }
}

.c-hamburger__btn span:nth-of-type(2)
{
    -webkit-transition: all .25s .25s;
            transition: all .25s .25s;

    opacity: 1;
}

@media screen and (max-width: 767px)
{
    .c-hamburger__btn span:nth-of-type(2)
    {
        top: 2.13vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-hamburger__btn span:nth-of-type(2)
    {
        top: 46%;
    }
}

.c-hamburger__btn span:nth-of-type(3)
{
    bottom: 0;
}

@media screen and (max-width: 767px)
{
    .c-hamburger__btn span:nth-of-type(3)
    {
        -webkit-animation: menu-bar02-sp .65s forwards;
                animation: menu-bar02-sp .65s forwards;
    }
}

@media screen and (min-width: 768px)
{
    .c-hamburger__btn span:nth-of-type(3)
    {
        -webkit-animation: menu-bar02 .65s forwards;
                animation: menu-bar02 .65s forwards;
    }
}

@media screen and (max-width: 767px)
{
    .c-hamburger.is-open .c-hamburger__btn span:nth-of-type(1)
    {
        -webkit-animation: active-menu-bar01-sp .65s forwards;
                animation: active-menu-bar01-sp .65s forwards;
    }
}

@media screen and (min-width: 768px)
{
    .c-hamburger.is-open .c-hamburger__btn span:nth-of-type(1)
    {
        -webkit-animation: active-menu-bar01 .65s forwards;
                animation: active-menu-bar01 .65s forwards;
    }
}

.c-hamburger.is-open .c-hamburger__btn span:nth-of-type(2)
{
    opacity: 0;
}

@media screen and (max-width: 767px)
{
    .c-hamburger.is-open .c-hamburger__btn span:nth-of-type(3)
    {
        -webkit-animation: active-menu-bar03-sp .65s forwards;
                animation: active-menu-bar03-sp .65s forwards;
    }
}

@media screen and (min-width: 768px)
{
    .c-hamburger.is-open .c-hamburger__btn span:nth-of-type(3)
    {
        -webkit-animation: active-menu-bar03 .65s forwards;
                animation: active-menu-bar03 .65s forwards;
    }
}

@-webkit-keyframes menu-bar01
{
    0%
    {
        -webkit-transform: translateY(12px) rotate(45deg);
                transform: translateY(12px) rotate(45deg);
    }
    50%
    {
        -webkit-transform: translateY(12px) rotate(0);
                transform: translateY(12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@keyframes menu-bar01
{
    0%
    {
        -webkit-transform: translateY(12px) rotate(45deg);
                transform: translateY(12px) rotate(45deg);
    }
    50%
    {
        -webkit-transform: translateY(12px) rotate(0);
                transform: translateY(12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@-webkit-keyframes menu-bar02
{
    0%
    {
        -webkit-transform: translateY(-12px) rotate(-45deg);
                transform: translateY(-12px) rotate(-45deg);
    }
    50%
    {
        -webkit-transform: translateY(-12px) rotate(0);
                transform: translateY(-12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@keyframes menu-bar02
{
    0%
    {
        -webkit-transform: translateY(-12px) rotate(-45deg);
                transform: translateY(-12px) rotate(-45deg);
    }
    50%
    {
        -webkit-transform: translateY(-12px) rotate(0);
                transform: translateY(-12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@-webkit-keyframes active-menu-bar01
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(12px) rotate(0);
                transform: translateY(12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(12px) rotate(45deg);
                transform: translateY(12px) rotate(45deg);
    }
}

@keyframes active-menu-bar01
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(12px) rotate(0);
                transform: translateY(12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(12px) rotate(45deg);
                transform: translateY(12px) rotate(45deg);
    }
}

@-webkit-keyframes active-menu-bar03
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(-12px) rotate(0);
                transform: translateY(-12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(-12px) rotate(-45deg);
                transform: translateY(-12px) rotate(-45deg);
    }
}

@keyframes active-menu-bar03
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(-12px) rotate(0);
                transform: translateY(-12px) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(-12px) rotate(-45deg);
                transform: translateY(-12px) rotate(-45deg);
    }
}

@-webkit-keyframes menu-bar01-sp
{
    0%
    {
        -webkit-transform: translateY(2.13333vw) rotate(45deg);
                transform: translateY(2.13333vw) rotate(45deg);
    }
    50%
    {
        -webkit-transform: translateY(2.13333vw) rotate(0);
                transform: translateY(2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@keyframes menu-bar01-sp
{
    0%
    {
        -webkit-transform: translateY(2.13333vw) rotate(45deg);
                transform: translateY(2.13333vw) rotate(45deg);
    }
    50%
    {
        -webkit-transform: translateY(2.13333vw) rotate(0);
                transform: translateY(2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@-webkit-keyframes menu-bar02-sp
{
    0%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(-45deg);
                transform: translateY(-2.13333vw) rotate(-45deg);
    }
    50%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(0);
                transform: translateY(-2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@keyframes menu-bar02-sp
{
    0%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(-45deg);
                transform: translateY(-2.13333vw) rotate(-45deg);
    }
    50%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(0);
                transform: translateY(-2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
}

@-webkit-keyframes active-menu-bar01-sp
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(2.13333vw) rotate(0);
                transform: translateY(2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(2.13333vw) rotate(45deg);
                transform: translateY(2.13333vw) rotate(45deg);
    }
}

@keyframes active-menu-bar01-sp
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(2.13333vw) rotate(0);
                transform: translateY(2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(2.13333vw) rotate(45deg);
                transform: translateY(2.13333vw) rotate(45deg);
    }
}

@-webkit-keyframes active-menu-bar03-sp
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(0);
                transform: translateY(-2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(-45deg);
                transform: translateY(-2.13333vw) rotate(-45deg);
    }
}

@keyframes active-menu-bar03-sp
{
    0%
    {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    50%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(0);
                transform: translateY(-2.13333vw) rotate(0);
    }
    100%
    {
        -webkit-transform: translateY(-2.13333vw) rotate(-45deg);
                transform: translateY(-2.13333vw) rotate(-45deg);
    }
}

/* c-icon
-------------------------------------------------------------------------- */
@media screen and (min-width: 768px)
{
    .c-icon--mail
    {
        font-size: 20px;
        font-size: 1.25rem; 

        position: relative;
        top: 4px;
    }
}

/* c-list
-------------------------------------------------------------------------- */
@media screen and (min-width: 768px)
{
    .c-list
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media screen and (max-width: 767px)
{
    .c-list--col2 li
    {
        margin-bottom: 5.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-list--col2 li
    {
        width: 46.32%;
        margin-right: 7.36%;
    }
}

@media screen and (min-width: 768px)
{
    .c-list--col2 li:nth-child(2n)
    {
        margin-right: 0;
    }
}

@media screen and (max-width: 767px)
{
    .c-list--col2 li:last-child
    {
        margin-bottom: 0;
    }
}

.c-list--col2 li:nth-child(2)
{
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
}

/* c-logo
-------------------------------------------------------------------------- */
.c-logo
{
    display: block;

    text-decoration: none;
}

@media screen and (max-width: 767px)
{
    .c-logo
    {
        width: 40vw;
        height: auto;
    }
}

@media screen and (min-width: 768px)
{
    .c-logo
    {
        width: 180px;
        height: auto;
    }
}

/* modal
-------------------------------------------------------------------------- */
@media screen and (max-width: 1023px)
{
    .c-modal
    {
        position: fixed;
        z-index: 100;
        top: 0;

        overflow-y: auto;

        height: 100%;

        -webkit-transition: opacity .3s ease-in-out;
        -webkit-transition: -webkit-transform .3s ease;
                transition: opacity .3s ease-in-out;
                transition: -webkit-transform .3s ease;
                transition:         transform .3s ease;
                transition:         transform .3s ease, -webkit-transform .3s ease; 
        pointer-events: none;

        background: #fff;
    }
}

@media screen and (max-width: 767px)
{
    .c-modal
    {
        right: -64vw;

        width: 64vw;
        padding: 21.33vw 8vw 0vw 8vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    .c-modal
    {
        right: -40%;

        width: 40%;
    }
}

@media screen and (max-width: 767px)
{
    .c-modal__contents
    {
        width: 100%;
        padding: 0vw 0vw 21.33vw 0vw; 

        color: #000;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    .c-modal__contents
    {
        padding: 80px 10% 50px;
    }
}

@media screen and (max-width: 1023px)
{
    .c-modal.is-open
    {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%); 
        pointer-events: auto;

        opacity: 1;
    }
}

/* c-table
-------------------------------------------------------------------------- */
.c-table
{
    width: 100%; 

    text-align: left;
}

.c-table th
{
    font-weight: normal;
}

@media screen and (max-width: 767px)
{
    .c-table th
    {
        width: 24vw;
        padding-bottom: 1.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-table th
    {
        width: 14%;
    }
}

.c-table th::after
{
    content: '：';
}

@media screen and (max-width: 767px)
{
    .c-table td
    {
        padding-bottom: 1.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-table td
    {
        width: 86%;
    }
}

/* c-title
-------------------------------------------------------------------------- */
.c-title
{
    display: block;

    text-decoration: none;
}

.c-title__en
{
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    line-height: 1; 

    display: block;
}

@media screen and (max-width: 767px)
{
    .c-title__en
    {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media screen and (min-width: 768px)
{
    .c-title__en
    {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 767px)
{
    .c-title__en--lg
    {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media screen and (min-width: 768px)
{
    .c-title__en--lg
    {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

.c-title__jp
{
    line-height: 1;

    display: block;

    -webkit-transition-delay: .25s;
            transition-delay: .25s; 
    letter-spacing: .05em;

    color: #179454;
}

@media screen and (max-width: 767px)
{
    .c-title__jp--md
    {
        font-size: 17px;
        font-size: 1.0625rem; 

        margin-top: 4vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-title__jp--md
    {
        font-size: 20px;
        font-size: 1.25rem; 

        margin-top: 20px;
    }
}

@media screen and (max-width: 767px)
{
    .c-title__jp--lg
    {
        font-size: 18px;
        font-size: 1.125rem; 

        margin-top: 4vw;
    }
}

@media screen and (min-width: 768px)
{
    .c-title__jp--lg
    {
        font-size: 26px;
        font-size: 1.625rem; 

        margin-top: 20px;
    }
}

.c-title .fade
{
    -webkit-transition-duration: .7s;
            transition-duration: .7s;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); 

    opacity: 0;
}

.c-title .fade.on
{
    -webkit-transform: translateY(0);
            transform: translateY(0); 

    opacity: 1;
}

/* Project
   ----------------------------------------------------------------- */
/* p-block
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .p-block
    {
        margin-bottom: 13.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-block
    {
        margin-bottom: 60px;
    }
}

.p-block__title
{
    line-height: 1.4; 

    color: #179454;
}

@media screen and (max-width: 767px)
{
    .p-block__title
    {
        font-size: 17px;
        font-size: 1.0625rem; 

        margin-bottom: 2.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-block__title
    {
        font-size: 24px;
        font-size: 1.5rem; 

        margin-bottom: 25px;
    }
}

@media screen and (max-width: 767px)
{
    .p-block__text
    {
        font-size: 13px;
        font-size: 3.47vw; 

        margin-bottom: 5.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-block__text
    {
        margin-bottom: 20px;
    }
}

.p-block__text:last-child
{
    margin-bottom: 0;
}

/* p-company
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .p-company
    {
        margin-bottom: 10.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-company
    {
        margin-bottom: 100px;
    }
}

@media screen and (max-width: 767px)
{
    .p-company__list
    {
        margin-bottom: 10.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-company__list
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        margin-bottom: 70px; 

        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media screen and (max-width: 767px)
{
    .p-company__item
    {
        margin-bottom: 4vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-company__item
    {
        width: 48.14%;
    }
}

@media screen and (max-width: 767px)
{
    .p-company__item:last-child
    {
        margin-bottom: 0;
    }
}

/* p-contact
   ----------------------------------------------------------------- */
.p-contact
{
    text-align: center;

    background-position: center center; 
    background-size: cover;
}

@media screen and (max-width: 767px)
{
    .p-contact
    {
        padding: 18.67vw 6.67vw 18.67vw 6.67vw;

        background-image: url(../img/common_bg_01_sp.jpg);
    }
}

@media screen and (min-width: 768px)
{
    .p-contact
    {
        padding: 90px 0 105px;

        background-image: url(../img/common_bg_01.jpg);
    }
}

.p-contact__title
{
    color: #179454;
}

@media screen and (max-width: 767px)
{
    .p-contact__title
    {
        margin-bottom: 8vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-contact__title
    {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 1.4; 

        margin-bottom: 25px;
    }
}

.p-contact__text
{
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
}

@media screen and (min-width: 768px)
{
    .p-contact__text
    {
        margin-bottom: 30px;
    }
}

.p-contact__footer
{
    -webkit-transition-delay: .5s;
            transition-delay: .5s;
}

@media screen and (max-width: 767px)
{
    .p-contact__footer
    {
        margin-top: 10.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-contact__btn
    {
        width: 274px;
    }
}

/* p-fee
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .p-fee
    {
        margin-bottom: 8vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-fee
    {
        margin-bottom: 40px;
    }
}

.p-fee__desc
{
    font-weight: 600;
}

@media screen and (max-width: 767px)
{
    .p-fee__desc
    {
        font-size: 15px;
        font-size: .9375rem;
    }
}

@media screen and (min-width: 768px)
{
    .p-fee__desc
    {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px)
{
    .p-fee__text
    {
        font-size: 11px;
        font-size: 2.93vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-fee__text
    {
        font-size: 13px;
        font-size: .8125rem;
    }
}

/* p-flow
   ----------------------------------------------------------------- */
@media screen and (min-width: 768px)
{
    .p-flow
    {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 767px)
{
    .p-flow__row
    {
        margin-bottom: 5.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-flow__row
    {
        margin-bottom: 30px;
    }
}

.p-flow__row:last-child
{
    margin-bottom: 0;
}

.p-flow__number
{
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 767px)
{
    .p-flow__number
    {
        font-size: 20px;
        font-size: 5.33vw; 

        margin-right: 1.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-flow__number
    {
        font-size: 24px;
        font-size: 1.5rem; 

        margin-right: 10px;
    }
}

.p-flow__title
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 767px)
{
    .p-flow__title
    {
        font-size: 14px;
        font-size: 3.73vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-flow__title
    {
        font-size: 16px;
        font-size: 1rem; 

        margin-bottom: 10px;
    }
}

.p-flow__item
{
    position: relative;

    padding-left: 1em;
}

.p-flow__item::after
{
    position: absolute;
    top: 0;
    left: 0;

    content: '・';
}

/* p-footer
   ----------------------------------------------------------------- */
.p-footer
{
    color: #fff;
    background: #161726;
}

@media screen and (max-width: 767px)
{
    .p-footer
    {
        padding: 100px 0 70px;
        padding: 26.67vw 0vw 18.67vw 0vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer
    {
        padding: 150px 0 95px;
    }
}

@media screen and (max-width: 767px)
{
    .p-footer__container
    {
        padding: 0vw 6.67vw 0vw 6.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer__container
    {
        padding: 0 7.81% 0 7.81%;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer__information
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media screen and (max-width: 767px)
{
    .p-footer__col--copyright
    {
        margin-top: 12vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer__col--copyright
    {
        text-align: right;
    }
}

@media screen and (max-width: 767px)
{
    .p-footer__summary
    {
        margin-top: 2.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer__summary
    {
        font-size: 12px;
        font-size: .75rem; 

        margin-top: 10px;
    }
}

.p-footer__permission
{
    color: #fff;
}

@media screen and (max-width: 767px)
{
    .p-footer__permission
    {
        font-size: 11px;
        font-size: .6875rem;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer__permission
    {
        font-size: 12px;
        font-size: .75rem;
    }
}

.p-footer__copyright
{
    color: #707070;
}

@media screen and (max-width: 767px)
{
    .p-footer__copyright
    {
        font-size: 12px;
        font-size: .75rem; 

        margin-top: 8px;
    }
}

@media screen and (min-width: 768px)
{
    .p-footer__copyright
    {
        font-size: 13px;
        font-size: .8125rem; 

        margin-top: 10px;
    }
}

/* p-form
   ----------------------------------------------------------------- */
.p-form
{
    max-width: 800px;
    margin: 0 auto;
}

.p-form p
{
    font-size: 14px;
    font-size: .875rem;

    margin-bottom: 30px;
}

.p-form p a
{
    font-weight: bold; 

    -webkit-transition: .3s;
            transition: .3s;
}

.p-form p .p-required
{
    margin: 0 5px;
}

.p-form .p-required
{
    font-size: 10px;
    font-size: .625rem;

    display: inline-block;

    margin-left: 5px; 
    padding: 1px 2px;

    color: #fff;
    border-radius: 3px;
    background: #ed5151;
}

.p-form .mailform
{
    width: 100%;
    margin-bottom: 30px;
}

.p-form .mailform th
{
    font-weight: normal; 

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 200px;
    padding-top: 9px;

    text-align: left;
    vertical-align: top;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.p-form .mailform td
{
    width: calc(100% - 200px);
}

.p-form .mailform th,
.p-form .mailform td
{
    font-size: 16px;
    font-size: 1rem;

    padding-bottom: 15px;
}

.p-form .mailform input,
.p-form .mailform textarea
{
    font-size: 16px;
    font-size: 1rem;

    width: 100% !important;
    max-width: 100%;
    padding: 10px; 

    border: 1px solid #a2a2a2;
    border-radius: 5px;
}

.p-form .mailform input[type='text']
{
    max-width: 300px;
}

.p-form .mailform input[type='tel']
{
    max-width: 200px;
}

.p-form .mailform input[type='email']
{
    max-width: 450px;
}

.p-form .mailform textarea
{
    height: 200px !important;
}

.p-form .mfp_buttons
{
    text-align: center;
}

.p-form .mfp_buttons button
{
    font-size: 14px;
    font-size: .875rem;
    font-weight: bold;
    line-height: 36px;

    padding: 0 35px;

    cursor: pointer;
    -webkit-transition: .2s ease;
            transition: .2s ease; 

    color: #fff;
    border: 2px solid #179454;
    border-radius: 2em;
    background: #179454;
    text-shadow: none;
}

.p-form .mfp_buttons button:hover
{
    color: #179454; 
    background-color: #fff;
}

@media (max-width: 768px)
{
    .p-form .mailform tbody,
    .p-form .mailform tr,
    .p-form .mailform th,
    .p-form .mailform td
    {
        display: table;

        width: 100%;
        max-width: 100%;
    }
    .p-form .mailform th
    {
        margin-bottom: 5px;
    }
    .p-form .mailform td
    {
        margin-bottom: 15px;
    }
    .p-form .mailform input[type='text'],
    .p-form .mailform input[type='tel'],
    .p-form .mailform input[type='email']
    {
        max-width: 100%;
    }
    .p-form .mfp_buttons button
    {
        font-size: 3.47vw;
        line-height: 13.33333vw;

        width: 73.33333vw;
    }
}

table#mfp_confirm_table tr th,
table#mfp_confirm_table tr td
{
    font-size: 14px;
    font-size: .875rem;
}

table#mfp_confirm_table tr td
{
    overflow-y: auto;
}

.mfp_buttons .mfp_element_button
{
    font-size: 14px;
    font-size: .875rem;
    font-weight: bold;
    line-height: 36px;

    width: 140px;
    margin-bottom: 10px;

    cursor: pointer;
    -webkit-transition: .2s ease;
            transition: .2s ease;
    text-align: center; 

    border-radius: 2em;
    text-shadow: none;
}

.mfp_buttons #mfp_button_send
{
    color: #fff; 
    border: 2px solid #179454;
    background: #179454;
}

.mfp_buttons #mfp_button_send:hover
{
    color: #179454; 
    background-color: #fff;
}

.mfp_buttons #mfp_button_cancel
{
    border: 2px solid #fffa80; 
    background: #fffa80;
}

.mfp_buttons #mfp_button_cancel:hover
{
    opacity: .7;
}

@media (max-width: 768px)
{
    .mfp_buttons .mfp_element_button
    {
        line-height: 25px;
    }
}

.p-thanks p
{
    text-align: center;
}

.p-thanks .p-page__btn
{
    margin-top: 50px;
}

/* p-gnav
-------------------------------------------------------------------------- */
@media screen and (min-width: 1024px)
{
    .p-gnav
    {
        -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    }
}

@media screen and (max-width: 767px)
{
    .p-gnav__list
    {
        text-align: center;
    }
}

@media screen and (min-width: 1024px)
{
    .p-gnav__list
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 1023px)
{
    .p-gnav__item
    {
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 1024px)
{
    .p-gnav__item
    {
        margin-right: 2em;
    }
}

@media screen and (min-width: 1280px)
{
    .p-gnav__item
    {
        margin-right: 3em;
    }
}

@media screen and (min-width: 1024px)
{
    .p-gnav__item:last-child
    {
        margin-right: 0;
    }
}

@media screen and (max-width: 767px)
{
    .p-gnav__item--btn
    {
        margin-top: 3em;
    }
}

.p-gnav__link
{
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
}

@media screen and (max-width: 767px)
{
    .p-gnav__link
    {
        font-size: 14px;
        font-size: 3.73vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-gnav__link
    {
        font-size: 15px;
        font-size: .9375rem;
    }
}

@media screen and (max-width: 767px)
{
    .p-gnav__btn
    {
        line-height: 10.66667vw; 

        display: block;

        margin: 0 auto;
    }
}

@media screen and (min-width: 768px)
{
    .p-gnav__btn
    {
        line-height: 36px; 

        width: 157px;
        padding: 0;

        text-align: center;
    }
}

@media screen and (max-width: 1023px)
{
    .p-gnav.is-open .p-gnav__item
    {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0); 

        opacity: 1;
    }
}

/* p-header
   ----------------------------------------------------------------- */
.p-header
{
    width: 100%;
}

@media screen and (min-width: 768px)
{
    .p-header
    {
        padding-top: 40px;
    }
}

@media screen and (max-width: 767px)
{
    .p-header__banner
    {
        position: fixed;
        z-index: 98;
        top: 0;
        left: 0;

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        width: 100%;
        height: 21.33333vw;
        padding-left: 6.67vw; 

        border-bottom: 1px solid #ddd;
        background: #fff;

        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media screen and (min-width: 768px)
{
    .p-header__title
    {
        width: 180px;
    }
}

@media screen and (min-width: 768px)
{
    .p-header__container
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        width: 100%;
        padding-right: 4.68%; 
        padding-left: 4.68%;

        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media screen and (min-width: 1024px)
{
    .p-header--top .p-header__container
    {
        -webkit-transition: .75s;
                transition: .75s;
        -webkit-transition-delay: .5s;
                transition-delay: .5s; 
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);

        opacity: 0;
    }
}

@media screen and (min-width: 1024px)
{
    .p-header.on .p-header__container
    {
        -webkit-transform: translateY(0);
                transform: translateY(0); 

        opacity: 1;
    }
}

/* IE10〜11 */
_:-ms-input-placeholder,
:root .p-header__container
{
    -webkit-transition: none;
            transition: none; 
    transform: translateY(0);

    opacity: 1;
}

/* Edge */
@supports (-ms-ime-align: auto)
{
    .p-header__container,
    .p-header--top .p-header__container
    {
        -webkit-transition: none;
                transition: none; 
        -webkit-transform: translateY(0);
                transform: translateY(0);

        opacity: 1;
    }
}

/* p-mainvisual
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .p-mainvisual
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            flex-direction: column-reverse;

        margin-bottom: 18.67vw; 
        padding: 16vw 0vw 0vw 0vw;

        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
    }
}

@media screen and (min-width: 768px)
{
    .p-mainvisual
    {
        position: relative;

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        width: 78.12%;
        margin: 120px auto 150px; 
        padding-top: 90px;
    }
}

.p-mainvisual__content
{
    opacity: 0;
}

@media screen and (max-width: 767px)
{
    .p-mainvisual__content
    {
        padding: 0vw 6.67vw 0vw 6.67vw; 

        -webkit-transition-delay: .75s;
                transition-delay: .75s;
        -webkit-transition-duration: 1s;
                transition-duration: 1s;
        -webkit-transform: translateX(5%);
                transform: translateX(5%);
    }
}

@media screen and (min-width: 768px)
{
    .p-mainvisual__content
    {
        position: absolute;
        z-index: 2; 
        top: 0;
        left: 0;

        width: 100%;

        -webkit-transition-duration: .75s;
                transition-duration: .75s;
        -webkit-transform: translateX(-5%);
                transform: translateX(-5%);
    }
}

.p-mainvisual__label
{
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 767px)
{
    .p-mainvisual__label
    {
        font-size: 16px;
        font-size: 4.27vw; 

        margin-bottom: 5.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-mainvisual__label
    {
        font-size: 28px;
        font-size: 1.75rem; 

        margin-bottom: 45px;
    }
}

@media screen and (max-width: 767px)
{
    .p-mainvisual__copy
    {
        width: 68vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-mainvisual__copy
    {
        width: 53.14%;
    }
}

.p-mainvisual__copy img
{
    width: 100%;
}

.p-mainvisual__lead
{
    font-weight: 600;
    line-height: 1.5;
}

@media screen and (max-width: 767px)
{
    .p-mainvisual__lead
    {
        font-size: 13px;
        font-size: 3.47vw; 

        margin-top: 6.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-mainvisual__lead
    {
        font-size: 14px;
        font-size: .875rem; 

        margin-top: 30px;
    }
}

@media screen and (min-width: 1024px)
{
    .p-mainvisual__lead
    {
        font-size: 17px;
        font-size: 1.25vw; 

        margin-top: 40px;
    }
}

@media screen and (min-width: 1024px)
{
    .p-mainvisual__newline
    {
        display: none;
    }
}

.p-mainvisual__image
{
    opacity: 0;
}

@media screen and (max-width: 767px)
{
    .p-mainvisual__image
    {
        margin-right: 6.67vw;
        margin-bottom: 7.47vw; 

        -webkit-transition-delay: .5s;
                transition-delay: .5s;
        -webkit-transition-duration: 1s;
                transition-duration: 1s;
        -webkit-transform: translateX(-10%);
                transform: translateX(-10%);
    }
}

@media screen and (min-width: 768px)
{
    .p-mainvisual__image
    {
        width: 52.77%; 
        margin-left: auto;

        -webkit-transition-delay: .25s;
                transition-delay: .25s;
        -webkit-transition-duration: 1s;
                transition-duration: 1s;
        -webkit-transform: translateX(10%);
                transform: translateX(10%);
    }
}

.p-mainvisual.on .p-mainvisual__content,
.p-mainvisual.on .p-mainvisual__image
{
    -webkit-transform: translateX(0);
            transform: translateX(0); 

    opacity: 1;
}

/* IE10〜11 */
_:-ms-input-placeholder,
:root .p-mainvisual__content,
_:-ms-input-placeholder,
:root .p-mainvisual__image
{
    -webkit-transition: none;
            transition: none; 
    transform: translateY(0);

    opacity: 1;
}

/* Edge */
@supports (-ms-ime-align: auto)
{
    .p-mainvisual__content,
    .p-mainvisual__image
    {
        -webkit-transition: none;
                transition: none; 
        -webkit-transform: translateY(0);
                transform: translateY(0);

        opacity: 1;
    }
}

/* p-nav-footer
   ----------------------------------------------------------------- */
.p-nav-footer
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 767px)
{
    .p-nav-footer
    {
        display: none;
    }
}

@media screen and (min-width: 768px)
{
    .p-nav-footer
    {
        margin-bottom: 90px;
    }
}

.p-nav-footer__item
{
    font-weight: 600;
}

@media screen and (min-width: 768px)
{
    .p-nav-footer__item
    {
        font-size: 13px;
        font-size: .8125rem; 

        margin-right: 3em;
    }
}

.p-nav-footer__link
{
    text-decoration: none; 

    color: #fff;
}

/* p-page
   ----------------------------------------------------------------- */
.p-page
{
    position: relative;
}

@media screen and (max-width: 767px)
{
    .p-page
    {
        padding: 13.33vw 6.67vw 18.67vw 6.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-page
    {
        width: 76.56%;
        margin: 0 auto;
        padding-top: 145px;
        padding-bottom: 120px;
    }
}

.p-page__header
{
    text-align: center;
}

@media screen and (max-width: 767px)
{
    .p-page__header
    {
        margin-bottom: 17.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-page__header
    {
        margin-bottom: 100px;
    }
}

.p-page__image
{
    -webkit-transition-delay: .5s;
            transition-delay: .5s;
}

@media screen and (max-width: 767px)
{
    .p-page__image
    {
        margin-bottom: 21.33vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-page__image
    {
        margin-bottom: 125px;
    }
}

.p-page__image img
{
    width: 100%;
}

@media screen and (max-width: 767px)
{
    .p-page__image img
    {
        width: 86.66667vw;
        height: 53.33333vw;

        -o-object-fit: cover;
           object-fit: cover;
    }
}

@media screen and (max-width: 767px)
{
    .p-page__body
    {
        -webkit-transition-delay: .5s;
                transition-delay: .5s;
    }
}

@media screen and (min-width: 768px)
{
    .p-page__body
    {
        padding-right: 8.67%; 
        padding-left: 8.67%;
    }
}

@media screen and (max-width: 767px)
{
    .p-page__content
    {
        margin-bottom: 18.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-page__content
    {
        margin-bottom: 150px;
    }
}

.p-page__btn
{
    text-align: center;
}

/* p-service
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .p-service
    {
        padding: 0vw 6.67vw 0vw 6.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-service
    {
        width: 78.12%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px)
{
    .p-service__block
    {
        margin-bottom: 18.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-service__block
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        margin-bottom: 120px; 

        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media screen and (min-width: 768px)
{
    .p-service__block--rev
    {
            flex-direction: row-reverse; 

        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
    }
}

@media screen and (max-width: 767px)
{
    .p-service__thumb
    {
        height: 53.33333vw;
        margin-bottom: 4.53vw;

        -o-object-fit: cover;
           object-fit: cover;
    }
}

@media screen and (min-width: 768px)
{
    .p-service__thumb
    {
        width: 51.85%;
    }
}

.p-service__thumb img
{
    width: 100%;
}

@media screen and (min-width: 768px)
{
    .p-service__content
    {
        width: 41.66%; 
        padding-top: 4%;
    }
}

@media screen and (max-width: 767px)
{
    .p-service__text
    {
        margin-top: 15px;
    }
}

@media screen and (min-width: 768px)
{
    .p-service__text
    {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px)
{
    .p-service__btn
    {
        margin-top: 6.67vw;
    }
}

@media screen and (min-width: 768px)
{
    .p-service__btn
    {
        margin-top: 30px;
    }
}

.p-service .fade
{
    -webkit-transition-duration: .7s;
            transition-duration: .7s;
    -webkit-transform: translateY(50px);
            transform: translateY(50px); 

    opacity: 0;
}

.p-service .fade.on
{
    -webkit-transform: translateY(0);
            transform: translateY(0); 

    opacity: 1;
}

/* Utility
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px)
{
    .pc
    {
        display: none !important;
    }
}

@media screen and (min-width: 768px)
{
    .sp
    {
        display: none !important;
    }
}