@charset "UTF-8";

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    font-family: "Hiragino Sans", "Noto Sans JP", "Sawarabi Gothic", "ヒラギノ角ゴ ProN", apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Meiryo, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1;
    background: #fff;
    background-image: url(../images/background.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body::-webkit-scrollbar {
    display: none;
}

p {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
    color: #1a1a1a;
    font-family: "Hiragino Sans", "Noto Sans JP", "Sawarabi Gothic", "ヒラギノ角ゴ ProN", apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Meiryo, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

a {
    outline: none;
    text-decoration: none;
}

a img {
    outline: none;
    border: 0;
}

:focus {
    outline: 0;
}

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

dl,
dt,
dd {
    margin: 0;
}

input,
textarea {
    display: block;
    margin: auto;
}

::-webkit-input-placeholder {
    color: #999;
}

::-moz-placeholder {
    color: #999;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #999;
}

/* iOS style reset */

input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

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

input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px;
}

/* アニメーション・scalechange */

@-webkit-keyframes scalechange {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scalechange {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.scalechange {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-animation: scalechange 2s linear infinite;
    -moz-animation: scalechange 2s linear infinite;
    -ms-animation: scalechange 2s linear infinite;
    -o-animation: scalechange 2s linear infinite;
    animation: scalechange 2s linear infinite;
}

/*フェードイン用*/

.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/*波紋アニメーション用設定*/

.ripple {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    box-shadow: 0 0 5px #000;
    /*この要素が波紋を発生させたい要素の下に来るように設定*/
    z-index: 1;
    /*アニメーション*/
    animation-name: rippleAnimation;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    -webkit-animation-name: rippleAnimation;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    -moz-animation-name: rippleAnimation;
    -moz-animation-timing-function: ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1.5s;
}

@keyframes rippleAnimation {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        transform: scale(1.1, 1.3);
        opacity: 0;
    }
}

@-webkit-keyframes rippleAnimation {
    0% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.1, 1.3);
        opacity: 0;
    }
}

@-moz-keyframes rippleAnimation {
    0% {
        -moz-transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(1.1, 1.3);
        opacity: 0;
    }
}

/******************************************************************************
*
* [共通]設定
*
******************************************************************************/

/*コンテナ*/

.wrap {
    width: 960px;
    margin: auto;
}

.middle_wrap {
    width: 1400px;
    margin: auto;
}

.full_wrap {
    width: 100%;
}

.wrap_w {
    background: #fff;
}

.wrap_s_b {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.wrap_s_w {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/*フォント*/

.font-gothic {
    font-family: "Hiragino Sans", "Noto Sans JP", "Sawarabi Gothic", "ヒラギノ角ゴ ProN", apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Meiryo, sans-serif;
}

.font-mincho {
    font-family: "Sawarabi Mincho", Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}

.font-maru {
    font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Noto Sans JP", "Sawarabi Gothic", "ヒラギノ角ゴ ProN", apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Meiryo, sans-serif;
}

.font-jost {
    font-family: 'Jost', sans-serif;
}

/*テキスト装飾*/

strong {
    font-weight: 700;
}

.fsb {
    font-size: 150%;
}

.fsb2 {
    font-size: 150%;
    color: #ff0d4b;
    background: linear-gradient(rgba(255, 255, 102, 0) 40%, #ffff66 60%);
}

.e1 {
    color: #ff0d4b;
}

.e2 {
    color: #ff0d4b;
    background: linear-gradient(rgba(255, 255, 102, 0) 40%, #ffff66 60%);
}

.e3 {
    background: linear-gradient(rgba(255, 255, 102, 0) 40%, #ffff66 60%);
}

.e4 {
    color: #0d73ff;
}

/*2カラム共通*/

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

.lp2c > div {
    width: 48%;
}

.lp2c.lp2c_r {
    /*入れ替え*/
    flex-flow: row-reverse;
}


/******************************************************************************
*
* [共通]ヘッダー
*
******************************************************************************/

header.hero_area {
    background-image: url(../images/header_bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

header.hero_area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*トップバー*/

header.hero_area .top_bar {
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
}

header.hero_area .top_bar img {
    display: block;
    width: 120px;
}

/*インナー*/

header.hero_area .hero_area_inner {
    text-align: center;
    padding-bottom: 50px;
    position: relative;
}

header.hero_area .hero_area_inner .header_logo {
    margin-bottom: 50px;
}

/*装飾ライン*/

.line {
    width: 1px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 999;
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.line .line_move {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fe9a85;
    /*アニメーション*/
    animation-name: line;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-animation-name: line;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -moz-animation-name: line;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
}

@keyframes line {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}

@-webkit-keyframes line {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}

@-moz-keyframes line {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}

/******************************************************************************
*
* [共通]コンテンツ
*
******************************************************************************/

/*コンテナ*/

article.content_article {
    padding: 50px 0;
}

article.content_article > .sec_wrap {
    margin-bottom: 50px;
}

article.content_article > .sec_wrap:last-child {
    margin-bottom: 0;
}

article.content_article section.ca_sec > p {
    padding: 3em;
}

/*見出し*/

.lp_banner {
    background-image: url(../images/banner_bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.lp_banner .lb_msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.lp_banner .lb_msk::after,
.lp_banner .lb_msk::before {
    content: "";
    display: block;
    width: 25%;
    height: 1px;
    background: #8cc11f;
    position: absolute;
}

.lp_banner .lb_msk::after {
    top: 17px;
    right: 0;
}

.lp_banner .lb_msk::before {
    bottom: 17px;
    left: 0;
}

.lp_banner .lb_logo {
    background-image: url(../images/logo_w.png);
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 25.7px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.lp_banner h2 {
    text-align: center;
    font-size: 30px;
    line-height: 1.7;
    font-weight: 800;
    color: #fff;
    position: relative;
    padding: 3em 0;
}

.lp_banner h2 small {
    font-size: 70%;
}

.lp_banner h2 img {
    display: block;
    margin: auto;
}

/*画像*/

.lp_img {
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.lp_img02 {
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.lp_img img {
    width: 100%;
}

.lp_img.li_r {
    width: 100% !important;
}

.lp_img.mb {
    margin-bottom: 50px;
}

/*---------------------
* プロフィール
---------------------*/

.profile {
    background: #000f0c;
}

/*タイトル*/

.profile .p_title img {
    display: block;
}

/*テキスト*/

.profile .p_inner {
    padding: 30px;
}

.profile .p_inner > p {
    color: #fff;
}

/*ポートフォリオ*/

.profile .p_inner .p_portfolio {
    padding: 20px;
    background: -moz-linear-gradient(15.06% 134.51% 45deg, rgba(0, 205, 172, 1) 0%, rgba(249, 0, 249, 1) 99.95%);
    background: -webkit-linear-gradient(45deg, rgba(0, 205, 172, 1) 0%, rgba(249, 0, 249, 1) 99.95%);
    background: -webkit-gradient(linear, 15.06% 134.51%, 84.94% -34.51%, color-stop(0, rgba(0, 205, 172, 1)), color-stop(0.9995, rgba(249, 0, 249, 1)));
    background: -o-linear-gradient(45deg, rgba(0, 205, 172, 1) 0%, rgba(249, 0, 249, 1) 99.95%);
    background: -ms-linear-gradient(45deg, rgba(0, 205, 172, 1) 0%, rgba(249, 0, 249, 1) 99.95%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CDAC', endColorstr='#F900F9' ,GradientType=0)";
    background: linear-gradient(45deg, rgba(0, 205, 172, 1) 0%, rgba(249, 0, 249, 1) 99.95%);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CDAC', endColorstr='#F900F9', GradientType=1);
    margin-top: 30px;
}

.profile .p_inner .p_portfolio h3 {
    text-align: center;
    color: #fff;
    font-size: 22px;
    line-height: 1.5;
    font-weight: bold;
    padding-bottom: 15px;
    margin-bottom: 25px;
    position: relative;
}

.profile .p_inner .p_portfolio h3::before {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50px;
}

.profile .p_inner .p_portfolio .pp_list ul {
    display: flex;
    justify-content: space-between;
}

.profile .p_inner .p_portfolio .pp_list ul li {
    width: 23%;
}

.profile .p_inner .p_portfolio .pp_list ul li img {
    display: block;
    width: 100%;
}

.profile .p_inner .p_portfolio .pp_aside p {
    text-align: center;
    font-size: 12px;
    color: #fff;
    opacity: 0.6;
}

/*---------------------
* [sec3] 5つの理由
---------------------*/

.sec3_reason .inner_c {
    width: 91%;
    margin: 0 auto 50px;
    background: #f1f1f1;
    box-sizing: border-box;
}

.sec3_reason .inner_c:last-child {
    margin: 0 auto;
}

.sec3_reason .inner_c .lp_img {
    width: 93%;
}

.sec3_reason .inner_c > p {
    padding: 2em;
}

.s3_img11,
.s3_img19,
.s3_img28 {
    margin-bottom: 30px;
}

/*---------------------
* [sec3] 3つのビジネス
---------------------*/

.sec3_business .sec_b_i {
    width: 91%;
    margin: 0 auto 50px;
    background: #f1f1f1;
    box-sizing: border-box;
}

.sec3_business .sec_b_i:last-child {
    margin: 0 auto;
}

.sec3_business .sec_b_i > p {
    padding: 2em;
}

.sec3_business .sec_b_i .lp_img {
    width: 93%;
}

.s3_img33,
.s3_img35 {
    margin-bottom: 30px;
}

/*---------------------
* [sec9] 3つの要素
---------------------*/

.sec9_elem .sec9_elem_inner {
    width: 91%;
    margin: 0 auto 50px;
    background: #f1f1f1;
    box-sizing: border-box;
    line-height: 1.7;
    font-size: 12px;
    color: #666666;
}

.sec9_elem .sec9_elem_inner:last-child {
    margin: 0 auto;
}

.sec9_elem .sec9_elem_inner dl dt img {
    display: block;
}

.sec9_elem .sec9_elem_inner dl dd {
    padding: 2em;
}

/*---------------------
* [sec12] 次回予告
---------------------*/

.next_mov {
    width: 91%;
    margin: 0 auto;
    height: auto;
    position: relative;
}

.next_mov::before {
    content: "";
    display: block;
    padding-top: 56.3%;
}

.next_mov iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
}

/*影*/

.next_mov::after {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    right: -20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #0071bc;
    z-index: 5;
}

/*---------------------
* [sec12] ボタン
---------------------*/

.foot_btn {
    display: flex;
}

.foot_btn > div {
    width: 50%;
}

.foot_btn img {
    width: 100%;
    display: block;
    transition: all 0.5s;
}

.foot_btn img:hover {
    opacity: 0.8;
}


/******************************************************************************
*
* [共通]フッター
*
******************************************************************************/

footer {
    background: #000;
    padding: 50px 0;
    text-align: center;
}

footer .foot_inner {
    width: 98%;
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    margin: 0 auto;
}

footer p.copy {
    color: #eee;
    font-size: 11px;
    font-weight: 300;
    line-height: 2.5;
}

footer p.copy a.tokushoho {
    font-size: 14px;
    text-decoration: none;
    color: #eee;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

footer p.copy a.tokushoho:hover {
    opacity: 0.5;
}

/******************************************************************************
*
* [共通]IE & Edge対応
*
******************************************************************************/

/*IE10*/

@media all and (-ms-high-contrast:none) {}

/*IE11*/

@media all and (-ms-high-contrast:none) {

    *::-ms-backdrop,
    .selector {}
}

/*Edge*/

@supports (-ms-ime-align:auto) {}


/******************************************************************************
*
* [共通]レスポンシブ対応
*
******************************************************************************/

/*1920px以下*/

@media only screen and (max-width: 1920px) {}

/*1400px以下*/

@media only screen and (max-width: 1400px) {
    .middle_wrap {
        width: 92%;
    }
}

/*960px以下*/

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

    /*---------------------
    * [共通]コンテンツ
    ---------------------*/

    .wrap {
        width: 92%;
    }

}

/*644px以下*/

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

    /*---------------------
    * [共通]背景
    ---------------------*/

    body {
        background: none;
    }

    body::after {
        content: "";
        display: block;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-image: url(../images/background.jpg);
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    /*---------------------
    * [共通]コンテンツ
    ---------------------*/

    p {
        font-size: 16px;
    }

    /*2カラム共通*/

    .lp2c {
        display: block;
    }

    .lp2c > div {
        width: 100%;
    }

    .lp2c > div:last-child {
        margin-top: 25px;
    }

    /*改行*/

    br.brRes {
        display: none;
    }

    /*---------------------
    * [共通]ヘッダー
    ---------------------*/

    /*トップバー*/

    header.hero_area .top_bar img {
        width: 80px;
    }

    /*インナー*/

    header.hero_area .hero_area_inner {
        padding-bottom: 30px;
    }

    header.hero_area .hero_area_inner .header_logo {
        margin-bottom: 20px;
    }

    header.hero_area .hero_area_inner .header_logo img {
        width: 80%;
    }

    header.hero_area .hero_area_inner .header_num img {
        width: 70%;
    }

    /*装飾ライン*/

    .line {
        height: 30px;
        bottom: -15px;
    }

    /*見出し*/

    .lp_banner .lb_logo {
        width: 80px;
        height: 20.56px;
    }

    .lp_banner h2 {
        font-size: 5vw;
        padding: 3.5em 0.3em;
    }

    .lp_banner h2 small {
        font-size: 60%;
    }

    /*画像*/

    .lp_img {
        width: 93%;
    }

    .lp_img.mb {
        margin-bottom: 30px;
    }

    /*---------------------
    * [共通]コンテンツ
    ---------------------*/

    /*コンテナ*/

    article.content_article {
        padding: 30px 0;
    }

    article.content_article section.ca_sec > p {
        padding: 1.5em 1em;
    }

    /*プロフィール*/

    .profile .p_inner {
        padding: 15px;
    }

    .profile .p_inner .p_portfolio {
        padding: 15px;
        margin-top: 30px;
    }

    .profile .p_inner .p_portfolio h3 {
        font-size: 5vw;
    }

    .profile .p_inner .p_portfolio .pp_list ul {
        flex-wrap: wrap;
    }

    .profile .p_inner .p_portfolio .pp_list ul li {
        width: 48%;
    }

    .profile .p_inner .p_portfolio .pp_aside p {
        text-align: left;
        font-size: 10px;
        opacity: 0.8;
    }

    /*[sec3] 5つの理由*/

    .sec3_reason .inner_c {
        width: 100%;
        margin: 0 auto;
    }

    .sec3_reason .inner_c .lp_img {
        width: 92%;
    }

    .sec3_reason .inner_c > p {
        padding: 1em;
    }

    .s3_img11,
    .s3_img19,
    .s3_img28 {
        margin-bottom: 20px;
    }

    /*[sec3] 3つのビジネス*/

    .sec3_business .sec_b_i {
        width: 100%;
        margin: 0 auto;
    }

    .sec3_business .sec_b_i > p {
        padding: 1em;
    }

    .sec3_business .sec_b_i .lp_img {
        width: 92%;
    }

    .s3_img33,
    .s3_img35 {
        margin-bottom: 20px;
    }

    /*[sec9] 3つの要素*/

    .sec9_elem .sec9_elem_inner {
        margin: 0 auto 30px;
    }

    .sec9_elem .sec9_elem_inner dl dd {
        padding: 1em;
    }

    /*次回予告*/

    .next_mov::after {
        top: 8px;
        right: -8px;
    }

    /*---------------------
    * [共通]フッター
    ---------------------*/

    footer .foot_inner {
        width: 95%;
        width: -webkit-calc(95%);
        width: calc(95%);
    }

}

/*375px以下*/

@media only screen and (max-width: 375px) {}

/*360px以下*/

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

/*330px以下*/

@media only screen and (max-width: 330px) {}