* {
    box-sizing: border-box;
}

body {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    line-height: 1.6;
    333322 color: #333333;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
}

.pankuzu {
    display: block;
    max-width: 1232px;
    margin: 10px auto 50px auto;
}

.pankuzu * {
    display: inline-block;
}

.pankuzu li:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    display: inline-block;
    transform: rotate(45deg);
    margin: 0 10px;
}

.pankuzu li:last-child:after {
    display: none;
}

section {
    max-width: 1232px;
    overflow: hidden;
    margin: 10px auto;
}

/*-------------------------
    アンカー・ボタン
---------------------------*/
a {
    color: #1B224C;
    word-break: break-word;
}

a:hover {
    color: #666666;
    text-decoration: none !important;
    opacity: 0.75;
}

.btn {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #fff;
    background-color: #37d2e7;
    border-radius: 0.5rem;
    border: 1px solid #37d2e7;
    margin: auto 10px;
    display: inline-block;
}

.btn:hover {
    text-decoration: none !important;
    background-color: #fff;
    color: #37d2e7;
}

/*-------------------------
    並列ボタン
---------------------------*/
.btn_01 {
    /*水色ボタン*/
    display: block;
    height: 50px;
    width: 350px;
    line-height: 50px;
    border-radius: 5px;
    background-color: #37d2e7;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    border: 1px solid #37d2e7;
    padding: 0;
}

.btn_01:hover {
    background-color: #fff;
    color: #37d2e7;
    text-decoration: none !important;
}

.btn_02 {
    /*紺ボタン*/
    display: block;
    height: 50px;
    width: 350px;
    line-height: 50px;
    border-radius: 5px;
    background-color: #1B224C;
    border: 1px solid #1B224C;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 0;
}

.btn_02:hover {
    background-color: #fff;
    color: #1B224C;
    padding-bottom: 1px;
    text-decoration: none !important;
}

.btn_03 {
    display: block;
    height: 50px;
    width: 80%;
    line-height: 50px;
    border-radius: 5px;
    background-color: #d5d5d5;
    color: #1B224C;
    text-align: center;
    font-size: 20px;
    border: 1px solid #d5d5d5;
    padding: 0;
    cursor: pointer;
}

.arrow_b {
    width: 30px;
    margin: auto;
    display: block;
    border-top: 20px solid #1B224C;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
}

/*-------------------------
    dl dt dd 横並び
---------------------------*/
dt {
    font-size: 16px;
    float: left;
}

dd {
    font-size: 16px;
    margin-left: 1rem;
}

textarea,
input[type=text],
input[type=number],
input[type=date],
input[type=time],
input[type=email],
input[type=tel],
input[type=password],
input[type=search] {
    padding: 1rem;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 1.2 !important;
}

input[type=text],
input[type=number],
input[type=date],
input[type=time],
input[type=email],
input[type=tel],
input[type=password] {
    min-width: 100px;
    min-height: 1em;
}

/*--------------------
    text-align設定
----------------------*/
.txtRight {
    text-align: right;
}

.txtLeft {
    text-align: left;
}

.txtCenter {
    text-align: center;
}

/*--------------------
    position設定
----------------------*/
.rela {
    position: relative;
}

.ab {
    position: absolute;
}


/*--------------------
    display設定
----------------------*/
.flex {
    display: flex;
}

.flex_change {
    display: flex;
}

.flex_center {
    display: flex;
    justify-content: center;
}

.flex_end {
    /*左下合わせ*/
    display: flex;
    justify-content: end;
}

.flex_bl {
    /*下合わせ*/
    display: flex;
    align-items: baseline;
}

.flex_between {
    /*両端ぴったり*/
    display: flex;
    justify-content: space-between;
}

.flex_evenly {
    display: flex;
    justify-content: space-evenly;
}

.flex_start {
    display: flex;
    justify-content: flex-start;
}

.flex_around {
    display: flex;
    justify-content: space-around;
}

.itmCenter {
    align-items: center;
}

.block {
    display: block;
}

/*--------------------
    フォント
----------------------*/
p {
    font-size: 16px;
    color: #1B224C;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.h1 {
    font-size: 26px;
    color: #1B224C;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.h2 {
    font-size: 22px;
    color: #1B224C;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.h3 {
    font-size: 16px;
    color: #1B224C;
}

.sky {
    color: #00ACBA;
}

/*--------------------
    線
----------------------*/
.br1p {
    border-right: 1px solid #1B224C;
}

.bl1p {
    border-left: 1px solid #1B224C;
}

.bt1p {
    border-top: 1px solid #1B224C;
}

.bb1p {
    border-bottom: 1px solid #1B224C;
}

.br3p {
    border-right: 3px solid #1B224C;
}

.bl3p {
    border-left: 3px solid #1B224C;
}

.bt3p {
    border-top: 3px solid #1B224C;
}

.bb3p {
    border-bottom: 3px solid #1B224C;
}

.br5p {
    border-right: 5px solid #1B224C;
}

.bl5p {
    border-left: 5px solid #1B224C;
}

.bt5p {
    border-top: 5px solid #1B224C;
}

.bb5p {
    border-bottom: 5px solid #1B224C;
}

/*--------------------
    テキストブロック
----------------------*/


.pc30 {
    display: flex;
    width: 30%;
}

.catego img {
    padding: 10px;
    text-align: center;
    opacity: 1;
    transition: .3s;
}

.catego {
    justify-content: center;
    margin: 0 auto;
}

.text01 {
    width: 100%;
}

.text01 {
    padding: 10px;
}

.text01 img {
    padding: 10px;
}

.text01 .marker {
    font-size: 12px;
    padding: 0.25rem 1rem;
    display: inline-block;
    background-color: #1B224C;
    color: #fff;
}

.text01 .h2 {
    margin-bottom: 10px;
    font-weight: bold;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.text01_P {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.text02 {
    height: 110px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}

.text02 p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.text02 h4 {
    font-size: 12px;
    position: absolute;
    bottom: 0;
}

.text03 {
    height: 90px;
    margin-bottom: 20px;
}

.text03 .h2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.text03 p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.text03 h4 {
    font-size: 12px;
    margin-bottom: 15px;
}

.text06 {
    margin: auto;
    min-height: 200px;
    margin-bottom: 50px;
    padding: 0 20px;
}

.text06 p {
    border-top: 1px solid;
}

.text06 .h2 {
    font-size: 22px;
    font-weight: bold;
}

.text07 {
    padding: 20px 30px;
    background-color: #F8F8F8;
}

.text08 {
    width: 60%;
    display: block;
}

.text09 {
    width: 50%;
}

/*--------------------
    画像サイズ
----------------------*/
.co_logo {
    width: 150px;
    height: 45px;
    object-fit: cover;
}

.img50_50 {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.img100_70 {
    width: 100px;
    height: 70px;
    object-fit: cover;
}

.img150_110 {
    width: 150px;
    height: 110px;
    object-fit: cover;
}

.img210_140 {
    width: 300px;
}

.img240_170 {
    width: 350px;
    object-fit: cover;
}

.img250_170 {
    width: 250px;
    height: 170px;
    object-fit: cover;
}

.img270_200 {
    width: 270px;
    height: 200px;
    object-fit: cover;
}

.img270_190 {
    width: 100%;
    object-fit: cover;
}

.img280_170 {
    width: 280px;
    height: 170px;
    object-fit: cover;
}

.img310_190 {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.img350_240 {
    width: 400px;
    object-fit: cover;
}

.img400_250 {
    width: 60%;
    object-fit: cover;
}

.img590_130 {
    width: 590px;
    height: 130px;
    object-fit: cover;
}

.img590_370 {
    width: 100%;
    object-fit: cover;
}

.img700_350 {
    width: 100%;
    object-fit: cover;
}

.r10 {
    border-radius: 10px;
}

.r1000 {
    border-radius: 1000px;
}

/*-------------------------
ページナビ（passnav)
---------------------------*/
.passnav {
    width: 90%;
    padding: 0.1rem 0;
}

.passnav .flex {
    width: 900px;
    margin: 0 auto;
    text-align: left;
}

.passnav .flex a,
.passnav .flex p {
    padding-right: 5px;
    color: #1B224C;
}

.passnav .flex a:hover {
    color: #FFFFFFF;
}

/******************************
pankパンくずリスト
******************************/
.flex_pank {
    display: flex;
    margin-left: 15%;
}

.flex_pank p {
    padding-right: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.flex_pank01 {
    display: flex;
    margin-left: 10%;
}

.flex_pank01 p {
    padding-right: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/******************************
pagination
******************************/
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    margin-top: 100px;
}

.page-item {
    display: list-item;
    text-align: -webkit-match-parent;
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    transition: opacity .2s;
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 1em;
}

.page-item.active .page-link {}

.page-item:first-child .page-link {}

.page-item:last-child .page-link {
    color: #1B224C;
}

span.page-link {
    color: #1B224C;
}

.page-link {
    color: #1B224C;
    padding: 10px 50px;
    background-color: #F8F8F8;
    border-radius: 10px;
}

.mini .page-link {}

a.page-link:hover {
    z-index: 2;
    text-decoration: none !important;
}

.page-link {}

.page-item.active .page-link {
    color: #fff;
    background-color: #1B224C;
}

a.page-link:hover {
    color: #fff !important;
    background-color: #1B224C !important;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

/*-------------------------------------------
        ホームキーヴィジュ
---------------------------------------------*/
.key_v {
    width: 100%;
    min-height: 480px;
    margin-top: 80px;
    background-image: url(https://placehold.jp/1280x480.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.key_v .copy {
    padding-top: 90px;
    padding-bottom: 30px;
    font-size: 48px;
}

.key_v .btn {
    margin-top: 50px;
    margin-bottom: 20px;
}

.key_v p {
    max-width: 600px;
    margin: auto;
}

.sec01 .h2 {
    margin: auto;
}

.customer01 {
    padding: 0 10px;
}

.customer01 p {
    padding-top: 10px;
}

.detail_inf {
    background-color: #f8f8f8;
    padding: 50px;
}

.flow {
    display: table;
    width: 100%;
}

.flow div {
    margin-bottom: 25px;
}

.flow .flex {
    background-color: #f1f1f1;
}

.flow .h2 {
    width: 180px;
    padding: 0.5rem 1rem;
}

.flow p {
    margin: auto 0;
    padding: 0 1rem;
}

/*-------------------------------------------
        FAQ
---------------------------------------------*/
.faq {
    margin-bottom: 100px;
}

.faq .wrap {
    width: 100%;
    margin: 0 auto;
}

.faq .h2 {
    margin-bottom: 20;
}

.faq .q-title {
    width: 100%;
    padding: 10px 0px;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px solid;
    border-top: 1px solid;
}

.faq .q-title:after {
    content: "＋";
    position: absolute;
    right: 1em;
    top: 0;
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
}

.faq .q-title.open:after {
    content: "－";
    font-weight: bold;
}

.faq .q-title .q:before {
    /*content: "Q.";*/
    display: inline-block;
    color: #37d2e7;
    width: 1em;
    text-align: left;
}

.faq .q-title .q {
    padding-left: 3em;
    text-indent: -1em;
    font-size: 16px;
    font-weight: bold;
}

.faq .faq-box {
    width: 100%;
    padding: 30px;
    background-color: #f1f1f1;
}

.faq .faq-box p span {
    display: block;
    padding: 5px 0 20px 0;
    font-size: 16px;
}

/*-------------------------------------------
        ブログ
---------------------------------------------*/
.miniblog {
    width: 45%;
    margin: 0 auto auto auto;
}

.miniblog .img_ctgr {
    bottom: 20px;
}

.img_ctgr {
    text-align: center;
    padding: 0.25rem;
    background-color: #1B224C;
    color: #fff;
    opacity: 0.8;
    width: 100%;
    font-size: 12px;
}

/*-------------------------------------------
        お知らせ
---------------------------------------------*/
.mininews {
    width: 45%;
    margin: 0 auto auto auto;
}

/*-------------------------------------------
        CTA
---------------------------------------------*/
.cta {
    width: 100%;
    min-height: 250px;
    text-align: center;
    background-image: url(https://placehold.jp/1280x250.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cta .h1 {
    padding-top: 30px;
    padding-bottom: 10px;
}

.cta .btn {
    margin-bottom: 20px;
}

.cta_tel {
    display: flex;
    justify-content: center;
    margin: auto;
    text-align: center;
    height: 80px;
    padding: 1rem;
}

.cta_tel p {
    width: 250px;
    margin-top: 19px;
}

/*-------------------------------------------
        企業様を支援してます
---------------------------------------------*/
.customer_logos div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.customer_logos .co_logo {
    height: 60px;
    margin: 15px;
    text-align: center;
}

.cause {
    width: 1232px;
    padding: 60px 0;
}

.cause .cause_inner {
    width: 250px;
    padding: 0 15px;
    text-align: center;
}

.cause .cause_inner img {
    width: 100%;
    border-radius: 1000px;
    margin: auto;
}

.cause .cause_inner .h2 {
    margin: auto;
    padding-top: 30px;
    padding-bottom: 20px;
}

.cause .cause_inner p {
    text-align: left;
}

/*--------------------------------------------
        サービストップ・youtube
---------------------------------------------*/

.video-wrap {
    max-width: 600px;
    /* ここに動画の横幅を指定 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.video {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 0;
}

.video video {
    width: 100%;
    height: 100%;
}

.videotitle {
    margin-bottom: 10px;
}

/*--------------------------------------------
        提供サービス
---------------------------------------------*/
.srvc_outline .marker {
    background-color: inherit;
    padding: inherit;
    color: initial;
    font-weight: bold;
}

.srvc_outline .h2 {
    margin-top: 0;
}

.srvc_outline .rink {
    display: block;
    padding-top: 30px;
    color: #00ACBA;
}

.anc_img {
    width: 275px;
    height: 200px;
    background-image: url(https://placehold.jp/275x200.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 30px;
    margin: auto 15px;
}

.anc_img .h2 {
    padding-top: 50px;
    text-align: center;
    color: #1B224C;
}

.anc_img p {
    padding-top: 30px;
    text-align: center;
    color: #1B224C;
}

.anc_img:hover {
    box-shadow: 0 10px 25px 0 rgba(27, 34, 76, 0.5);
    text-decoration: none !important;
}

/*-------------------------------------------
        料金
---------------------------------------------*/
.plan_top {
    width: 900px;
}

.plan_top .h2 {
    margin: auto;
}

.plan_top .flex {
    width: 660px;
    margin: 40px auto;
}

.plan_top .flex .bold {
    padding: 1.5rem;
    width: 280px;
    height: 90px;
    border: 1px solid;
    margin: auto 30px;
}

.plan_list .plan_baners {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

.plan_list .plan_baner {
    width: 220px;
}

.plan_list .plan_baner_inner {
    border: 1px solid;
}

.plan_list .plan_baner_inner .plan_name {
    padding: 1.25rem;
    background-color: #1B224C;
}

.plan_list .plan_baner_inner .plan_name .h2,
.plan_list .plan_baner_inner .plan_name p {
    color: #fff;
}

.plan_list .plan_baner_inner .plan_cnt {
    height: 470px;
}

.plan_list .plan_cnt .btn {
    font-size: 18px;
    border-radius: 1000px;
    padding: 1rem;
    color: #1B224C;
    background-color: #fff;
    border: 1px solid #1B224C;
    margin: 20px auto;
}

.plan_list .plan_cnt .btn:hover {
    background-color: #1B224C;
    color: #fff;
}

.plan_list .btn_ent {
    width: 100%;
    font-size: 18px;
    padding: 0.5rem;
    margin: auto;
    margin-top: 10px;
    background-color: #1B224C;
    border: 1px solid #1B224C;
}

.plan_list .btn_ent:hover {
    background-color: #fff;
    color: #1B224C;
}

.plan_list .pickup .plan_baner_inner {
    border: 1px solid #00ACBA;
}

.plan_list .pickup .plan_name,
.plan_list .pickup .btn_ent {
    background-color: #00ACBA;
    border: 1px solid #00ACBA;
}

.plan_list .pickup .btn_ent:hover {
    background-color: #fff;
    color: #00ACBA;
}

.plan_list .pickup .plan_cnt .h2 {
    color: #00ACBA;
}

.plan_sup .plan_sup_inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/*-------------------------------------------
        事例
---------------------------------------------*/
.plr90 {
    padding-right: 90px;
    padding-left: 90px;
}

.precedent_srch {
    width: 1232px;
    background-color: #1B224C;
    padding: 20px;
}

.precedent_srch p,
.precedent_srch .h1,
.precedent_srch .h2 {
    color: #fff;
}

.precedent_srch .title:after {
    content: "×";
    position: absolute;
    right: 1em;
    top: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
}

.precedent_srch .bdr {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    padding: 0 120px;
}

.precedent_srch .srch_box {
    height: 360px;
}

.precedent_srch .srch_box li {
    margin-bottom: 20px;
}

.precedent_srch .srch_box input {
    transform: scale(1.75);
}

.precedent_srch .srch_box label {
    padding-left: 30px;
    color: #fff;
}

.precedent_srch .srch_box input[type="checkbox"] {
    display: none;
}

/* チェックボックスの代わりを成すラベル */
.precedent_srch .srch_box input[type="checkbox"] {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 10px;
}

/* ラベルの左に表示させる正方形のボックス□ */
.precedent_srch .srch_box input[type="checkbox"]::before {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color: #fff;
    /* 枠の色変更 お好きな色を */
    background-color: #1B224C;
    /* 背景の色変更 お好きな色を */
}

/* チェックが入った時のレ点 */
.precedent_srch .srch_box input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -6px;
    top: 50%;
    left: 1px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: #fff;
    /* チェックの色変更 お好きな色を */
}

.precedent_srch .btn {
    background-color: initial;
    border: 1px solid #fff;
    padding: 1rem 10rem;
}

.precedent_srch .btn:hover {
    background-color: #fff;
    color: #1B224C;
}

/*------------------------------------------
        事例(各会社)
---------------------------------------------*/
.customer02 {
    margin: auto auto 60px auto;
    padding: 40px;
    background-color: #F8F8F8;
}

.customer02 .text04 {
    min-height: 190px;
    min-width: 60%;
}

.text04 .h2 {
    margin: 15px 0;
}

.text04 p {
    padding: 0.1rem 0.5rem;
    border: 1px solid #1B224C;
}

.customer_list a:hover {
    text-decoration: none !important;
}

/*------------------------------------------
        事例(記事)
---------------------------------------------*/
.precedent_artcl,
.artcl_section {
    width: 1000px;
}

.precedent_artcl {
    margin: auto;
    margin-top: 0;
}

.text05 {
    padding: 30px 50px;
    margin: auto;
    margin-top: 20px;
    background-color: #F8F8F8;
}

.text05 a {
    font-weight: bold;
}

/*-------------------------------------------
        事例(いいね シェア　Tweet)
---------------------------------------------*/
.artcl_shere {
    display: flex;
    margin: 50px 0;
}

.artcl_shere p {
    font-size: 10px;
    padding: 0.25rem 0.75rem;
    font-weight: bold;
    color: #fff;
}

.artcl_shere .good,
.artcl_shere .shere {
    background-color: #305097;
    border-radius: 5px;
    cursor: pointer;
}

.artcl_shere .tweet {
    background-color: #00ACED;
    border-radius: 5px;
    cursor: pointer;
}

.artcl_shere .good:hover,
.artcl_shere .shere:hover,
.artcl_shere .tweet:hover {
    background-color: #707070;
}

.artcl_shere .fa-solid,
.artcl_shere .fa-brands {
    padding-top: 3px;
    margin-right: 5px;
}

.artcl_head {
    display: flex;
    align-items: center;
    width: 100%;
    margin: auto;
    position: relative;
}

.artcl_head .txtRight {
    position: absolute;
    right: 0;
}

/*-------------------------------------------
        会社概要
---------------------------------------------*/
.key_v02 {
    width: 100%;
    min-height: 280px;
    background-image: url(https://placehold.jp/1280x280.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 70px 10px;
}

.key_v02 .txtCenter {
    width: 900px;
}

.com_list .list_item {
    padding: 16px 0;
    display: flex;
    border-top: 1px solid #D5D5D5;
}

.com_list .last_item {
    border-bottom: 1px solid #D5D5D5;
}

.com_list .list_l {
    width: 20%;
    display: block;
}

.com_list .list_r {
    width: 80%;
    display: block;
}

.com_list a {
    color: #00ACBA;
}


.prf {
    width: 280px;
}

.prf a {
    color: #00ACBA;
}

/*-------------------------------------------
        セミナー
---------------------------------------------*/
.smnr_item .rela {
    width: 100%;
}

.smnr_item .rela .h2 {
    width: 90%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-bottom: 100px;
}

.smnr_item .ab {
    bottom: 0;
    width: 100%;
}

/*-------------------------------------------
        記事・セミナーリスト
---------------------------------------------*/
.artcl_item .ab {
    bottom: 0;
    background-color: #1B224C;
    color: #fff;
    text-align: center;
    padding: 0.25rem;
    width: 100%;
}

.artcl_item .text .h2 {
    max-width: 630px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*-------------------------------------------
        セミナー・公開中/2分割記事/
---------------------------------------------*/
.artcl02_main {
    padding: 0 auto;
    margin: 0 auto;
}

.artcl02_sub {
    width: 25%;
}

.li {
    margin-left: 30px;
    list-style-type: disc;
    color: #00ACBA;
    font-size: 18px;
}

.ol .li {
    list-style-type: decimal;
}

.li span {
    color: initial;
}

.form_title {
    margin-top: 40px;
    width: 100%;
    padding: 1rem 0;
    background-color: #1B224C;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.form01 input[type=text],
.form01 input[type=email],
.form01 input[type=tel],
.form01 textarea {
    width: 100%;
    margin-top: 10px;
}

.form01 textarea {
    padding: 15px 20px;
    resize: none;
}

.form01 input[type=radio],
.form01 input[type=checkbox] {
    zoom: 1.5;
    margin-right: 10px;
}

.artcl02_sub .img_ctgr {
    font-size: 12px;
    width: 100%;
    padding: 0.15rem 0;
}

.artcl02_sub .text02 {
    height: initial;
}

/*-------------------------------------------
        セミナー・レポート
---------------------------------------------*/
.b_tab {
    display: flex;
    width: 100%;
    margin: 50px auto;
    border-bottom: 1px solid #D5D5D5;
}

.b_tab .flex {
    margin: auto 0 auto auto;
}

.b_tab .flex .bold {
    padding: 0 15px 15px;
    display: block;
    margin-bottom: -18px;
}

.b_tab .flex .bold:hover {
    text-decoration: none !important;
}

/*-------------------------------------------
        ブログ
---------------------------------------------*/
.quot {
    /*引用記号*/
    font-size: 90px;
    height: 90px;
    color: #B4B4B4;
}

.writer_prf {
    padding: 30px;
    border: 1px solid #1B224C;
    border-radius: 5px;
}

.writer_prf .flex p {
    font-size: 18px;
}


/*-------------------------------------------
        お知らせ
---------------------------------------------*/
.news_list a {
    padding: 20px 0;
    border-top: 1px solid #D5D5D5;
}

.news_list .lastitem {
    border-bottom: 1px solid #D5D5D5;
}

/*-------------------------------------------
        資料請求
---------------------------------------------*/
.imgs {
    height: 245px;
    display: block;
}

.ab01 {
    position: absolute;
    top: 0;
    right: 0;
}

.ab02 {
    position: absolute;
    top: 75px;
    right: 130px;
}

.ab01_2 {
    position: absolute;
    top: 0;
    right: 0;
}

.ab02_2 {
    position: absolute;
    top: 75px;
    right: 130px;
}

/*-------------------------------------------
        資料請求
---------------------------------------------*/
.fa-solid {
    padding-top: 11px;
    transform: rotate(20deg);
    padding-top: 15px;
    zoom: 0.8;
}

.dcmt_form01 .form {
    width: 460px;
}

.dcmt_form02 .text07 {
    padding: 50px 160px;
}

.dcmt_form02 .btn_02 {
    background-color: #D5D5D5;
    color: #1B224C;
    border: 1px solid #D5D5D5;
}

.dcmt_form02 .btn_02:hover {
    background-color: #fff;
}

.headermini {
    padding: 25px 35px;
    background-color: #f8f8f8;
}

/*-------------------------------------------
        プライバシーポリシー
---------------------------------------------*/

.privacy .h2 {
    margin-bottom: 30px;
}


/*-------------------------------------------
        戻る
---------------------------------------------*/

.return {
    text-align: right;
    padding-right: 10%;
}

/*-----------------------------------------------------
　       mobileのみで表示(cssの最後に記述)
-------------------------------------------------------*/
.mob {
    display: none;
}

/*-----------------------------------------------------
　   次の記事・前の記事
-------------------------------------------------------*/
.another_page {
    width: 80%;
}

.prev-next-link {
    margin-bottom: 80px;
}

.prev-next-link a {
    border-bottom: 1px #ddd solid;
    display: block;
    text-decoration: none;
    padding: 14px 5% 14px 5%;
}

.prev-next-link p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
}

.prev-next-link a:first-child {
    border-top: 1px #ddd solid;
}

.prev-next-link a:hover {
    background-color: #f6f6f6;
}

.prev-next-label {
    font-size: .825rem;
    color: #000;
    margin-bottom: 10px;
}

.prev-link {
    background: url(http://www.webcreatorbox.com/sample/images/arrow-prev.svg) no-repeat 10px center;
}

.next-link {
    background: url(http://www.webcreatorbox.com/sample/images/arrow-next.svg) no-repeat right 10px center;
}

.prev-link,
.next-link {
    background-size: 16px 28px;
}

/*--------------------
    フォント
----------------------*/


.sns {
    zoom: 1.4;
    padding: 5px 0;
    text-decoration: none;

}

.sns img {
    padding: 10px;
    height: 45px;
}


.flex {
    display: flex;
}

.flex_center {
    display: flex;
    justify-content: center;
}

.fas {
    line-height: unset !important;
    margin-right: 5px;
}

.txtCenter {
    text-align: center !important;
}

.txtLeft {
    text-align: left !important;
}

.txtRight {
    text-align: right !important;
}

.f_left {
    float: left !important;
}

.f_right {
    float: right !important;
}

.f_clear {
    clear: both !important;
}

.ttl {
    border-bottom: 3px solid #37d2e7;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #37d2e7;
}

/*--角丸--*/
.br10 {
    border-radius: 10px;
}

.br1000 {
    border-radius: 1000px;
}

.photo {
    text-align: center;
}

.logo {
    margin: 0 auto;
    max-width: 250px;
    text-align: center;
}

.logo img {
    max-width: 250px;
}

.youtube {
    width: 853px;
    height: 480px;
    text-align: center;
}

.number {
    width: 65px;
    height: 65px;
    display: block;
    background-color: #186aa5;
    text-align: center;
    line-height: 65px;
    border-radius: 1000px;
    font-size: 30px;
    color: #fff;
    margin: auto;
}

/*隠し*/
.hide {
    display: none;
}


/*丸数字*/
.number {
    width: 65px;
    height: 65px;
    display: block;
    background-color: #186aa5;
    text-align: center;
    line-height: 65px;
    border-radius: 1000px;
    font-size: 30px;
    color: #fff;
    margin: auto;
}

/*--slick関連--*/
.slick-prev {
    width: 25px;
    height: 25px;
    left: -30px;
    margin: auto;
    text-align: center;
    z-index: 100;
}

.slick-next {
    width: 25px;
    height: 25px;
    margin: auto;
    text-align: center;
    z-index: 100;
}

.slick-prev:before {
    color: #b3b3b3;
    font-size: 30px;

}

.slick-next:before {
    color: #b3b3b3;
    font-size: 30px;

}

.slider {
    visibility: hidden;
}

.slick-initialized {
    visibility: visible;
}



/*----アートボード「content」------*/
.content p {
    padding-top: 10px;
    margin: auto;
}

.content h1 {
    width: 65%;
    margin: 0 auto;
    font-weight: bold;
}

.content .text {
    margin: auto 0;
    max-width: 400px;
}

.content .text p,
.content .text h1 {
    width: 100%;
}

.cnt02 h1 {
    width: 50%;
    margin-left: 10px;
}

.cnt02 p {
    width: 90%;
    margin-left: 30px;
    margin-right: 20px;
    padding-top: 0;
}

.cnt03 .photo {
    padding: auto;
}

.cnt03 .disap {
    display: none;
}

.cnt03 img {
    border-radius: 1000px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.ctn06 {
    text-align: center;
}

.cnt07 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
}

.cnt07 .photo {
    width: 70%;
    text-align: initial;
    grid-column: 1;
    margin: 0 auto;
}

.cnt07 img {
    width: 300px;
    height: 300px;
}

.cnt07 .text {
    grid-column: 2;

}

.cnt07 h1 {
    margin-left: 0;
    text-align: left;
}

.cnt7 p {
    max-width: 400px;
}

/*----アートボード「content」------*/

/*----アートボード「how it works」------*/
.how h1 {
    padding-bottom: 50px;
}

.how.step {
    margin: 0 auto;
    width: 310px;
}

.how .step .photo {
    margin: 0 auto;
    width: 110px;
}

.how .step img {
    width: 100px;
    height: 100px;
}

.how .step h2 {
    text-align: center;
    margin: 30px auto 20px auto;
}

.how .step p {
    margin: auto;
    text-align: center;
}

.how01 .step {
    border: 0px solid;
    background-color: #f7f7f7;
    padding: 20px;
    margin: 0 10px;
}

.how01 .step .photo {
    border-bottom: 1px solid #999;
    padding-bottom: 20px;
}

.how02 .step,
.how03 .step {
    padding-bottom: 50px;
    width: 80%;
    margin: 0px auto;
}

.how02 .step .photo,
.how03 .step .photo {
    width: 150px;
    height: 150px;
    border-radius: 1000px;
    margin: auto;
}

.how02 .step img {}

.how02 .num div {
    width: 100px;
    margin: 0 auto;
}

.how02 .num {
    padding-left: 42.5px;
    padding-right: 42.5px;
    margin: auto 0;
}


.how02 .step .text p,
.how02 .step .text h2,
.how03 .step .text p,
.how03 .step .text h2 {
    text-align: inherit;
    margin-bottom: 10px;
}

.how03 .step .box {
    position: relative;
}

.how03 .step .photo {
    margin-right: 75px;
}

.how03 .step .number {
    position: absolute;
    top: -15px;
    left: -15px;
}

.how03 .step .text {
    padding-left: 75px;
    margin: auto;
    border-left: 8px solid #eee;
}

.how03 .step h2 {
    margin: initial;
}

.how04 .text,
.how05 .text {
    padding: 0 20px;
}

.how04 .p,
.how05 .p {
    padding: 0 10px;
}

.how04 .number,
.how05 .number {
    width: 88px;
    height: 88px;
    line-height: 88px;
}

/*----アートボード「how it works」------*/

/*-----アートボード「testmonials」------*/
.testmonials .top-text {
    text-align: center;
    margin: auto;
}

.testmonials.profile {
    text-align: center;
    width: 300px;
    padding: 0 30px;
    margin: 0 auto;
}

.testmonials h2 {
    margin-bottom: 15px;
}

.testmonials .profile .photo {
    margin: 0 auto;
    width: 100px;
    height: 100px;
}

.testmonials .profile img {
    border-radius: 1000px;
    width: 100px;
    height: 100px;
    margin-top: 50px;
}

.testmonials .profile .text {
    width: 270px;
    padding: 65px 20px 30px 20px;
    text-align: center;
    margin: 0 20px;
    background-color: #f7f7f7;
}

.testmonials .slick-inner .text h1 {
    text-align: center;
    padding-bottom: 20px;
}

.slider {
    width: 90%;
    margin: auto;
    display: flex;
}

.testmonials01 .slider .slick-inner,
.testmonials02 .slider .slick-inner {
    margin: auto;
    float: left;
    width: 300px;
}

.testmonials01 .slick-inner .photo,
.testmonials01 .slick-inner .photo {
    width: 100px;
    height: 100px;
}

.testmonials01 .slick-inner img,
.testmonials02 .slick-inner img,
.testmonials03 .profile img {
    border-radius: 1000px;
    width: 100px;
    height: 100px;
    margin: 40px 0 0 10px;
}

.testmonials01 .slick-inner .slider-text,
.testmonials02 .slick-inner .slider-text {
    padding: 70px 20px 30px 20px;
    margin: -45px 5% 20px 5%;
    text-align: left;
    background-color: #f7f7f7;
}

.testmonials02 .slider .slick-inner {
    text-align: center;
    margin-top: 50px;
}

.testmonials02 .slick-inner img {
    margin-top: 125px;
    margin: auto;
    border: 2px solid;
}

.testmonials02 .slick-inner .slider-text {
    padding-top: 30px;
    margin-top: 20px;
    text-align: center;
}

.testmonials02 .slick-inner .slider-text h1 {
    padding-bottom: 20px;
}

.testmonials02 .slick-inner .slider-text p {
    text-align: center;
}

.testmonials03 h2 {
    padding: 0 5%;
}

.testmonials03 .name h2 {
    margin: 20px auto 10px auto;
}

.testmonials03 .slider h1 {
    padding: 0 60px;
    margin: auto;
}

.testmonials03 .slick-inner .slider-text,
.testmonials04 .slick-inner .slider-text {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

.testmonials03 .profile img {
    margin: 40px auto 20px auto;
}

.testmonials03 .profile .name {
    padding: 10px 0 40px 0;
    text-align: center;
    margin: 0 auto;
}

.testmonials03 .profile .name h1 {
    text-align: center;
    padding-bottom: 10px;
}

.testmonials03 .profile .name p {
    text-align: center;
}

.testmonials04 .photo img {
    border-radius: 1000px;
    width: 200px;
    height: 200px;
    margin: 30px auto 30px auto;
}

.testmonials04 .slider-text h2 {
    margin: auto;
    text-align: center;
    width: 80%;
}

.testmonials04 .slider .text {
    padding: 40px 0;
    text-align: center;
    margin: 0 auto;
}

.testmonials04 .text h2 {
    text-align: center;
}

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

.testmonials05 .slick-inner .profile {
    display: flex;
}

.testmonials05 .slick-inner .profile .box {
    text-align: right;
    margin: 20px auto;
    padding: auto;
    position: relative;
}

.testmonials05 .profile .box .photo {
    border-radius: 1000px;
    width: 230px;
    height: 230px;
}

.testmonials05 .profile .box h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: -35px;
}

.testmonials05 .profile .box .name {
    padding-top: 15px;
    text-align: center;
    margin: 0 auto;
}

.testmonials05 .name h1 {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
}

.testmonials05 .name p {
    font-size: 14px;
    text-align: center;
}

.testmonials05 .slick-inner .text {
    margin: auto;
    text-align: initial;
    width: 660px;
    background-color: initial;
}

.testmonials05 .slick-inner .text h1 {
    text-align: left;
}

.testmonials06 .slider a img {
    border-radius: 1000px;
    width: 150px;
    height: 150px;
    margin: auto auto 50px auto;
}

.testmonials06 h1 {
    width: 80%;
    margin: 0 auto;
}

.testmonials06 h2 {
    margin: 50px auto 20px auto;
    width: 80%;
    text-align: center;
}

.testmonials06 .text {
    padding-top: 20px;
    text-align: center;
    margin: 0 auto;
}

.testmonials06 .text h2 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;

}

.testmonials06 .text p {
    font-size: 14px;
    text-align: center;
}

.testmonials07 .slick-inner {
    margin: auto;
    padding: 0 20px;
    display: flex;
}

.testmonials07 img {
    margin: auto 40px auto 0;
    width: 350px;
    height: 350px;
    text-align: right;
    vertical-align: bottom;
}

.testmonials07 .slider-text {
    text-align: left;
    width: 600px;
    vertical-align: bottom;
}

.testmonials07 .slider-text h3 {
    font-size: 45px;
    font-weight: bold;
}

.testmonials07 .slider-text .name {
    margin-top: 20px;
}

.testmonials07 .slider-text .name h1 {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 5px;
}

.testmonials07 .slider-text .name p {
    font-size: 18px;
}

.testmonials07 .slick-initialized {
    visibility: visible;
}

/*-----アートボード「testmonials」------*/


/*-----アートボード「portfolio」------*/
.categorys {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    /*space-around;*/
    margin: 40px auto;
}

.categorys a {
    text-align: center;
    font-size: 15px;
    padding: 5px;
    border-radius: 100vh;
    border: 1px solid #999;
    cursor: pointer;
    margin: 5px 5px;
}

.portfolio {
    width: 90%;
}

.categorys a:hover {
    text-decoration: none !important;
    background-color: #eee;
    border: 1px solid #eee;
}

.portfolio figure {
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.portfolio figure .name_ctgr {
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.portfolio figure .name_ctgr h2 {
    font-weight: bold;
    white-space: nowrap;
}

.portfolio p {
    margin-top: 10px;
}

.portfolio .name_ctgr {
    text-align: center;
}

.portfolio .slider {
    position: relative;
}

.portfolio figure img {
    margin: auto;
    max-width: 500px;
    height: auto;
    object-fit: cover;
}

.portfolio .slick-prev {
    left: 60px;
    color: #AAAAAA;
    z-index: 1;
}

.portfolio .slick-next {
    right: 60px;
    color: #AAAAAA;
}

.portfolio .slick-dots {
    bottom: -45px;
}

.portfolio01 content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 5px 15px 5px 15px;
}

.portfolio01 figure img {
    max-width: 90%;
    height: auto;
    margin: 15px;
}

.portfolio02 .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin: 0 auto 50px auto;
}

.portfolio02 figure img {
    max-width: 90%;
    height: auto;
    margin: 5%;
    object-fit: cover;
}

.portfolio03 .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin: 0 auto;
}

.portfolio03 figure img {
    max-width: 90%;
    height: auto;
    margin: 5%;
    object-fit: cover;
}

.portfolio04 .slider-for {
    width: 90%;
    margin: auto;
}

.portfolio04 figure img {
    width: 500px;
    height: auto;
    object-fit: cover;
    margin: auto;
}

.portfolio04 .slider-nav {
    padding-top: 65px;
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.portfolio04 .slick-slide {
    padding: 0 5px 0 5px;
    margin: 0 auto;
    height: auto;
}

.portfolio04 .slick-dots {
    display: none;
}

.portfolio04 .slider-for {
    visibility: hidden;
}

.portfolio04 .slider-nav {
    visibility: hidden;
}

.portfolio04 .slick-initialized {
    visibility: visible;
}


/*-----アートボード「portfolio」------*/

/*-----アートボード「login」------*/

.login {
    text-align: center;
}

.login p {
    padding: 40px 0 20px 0;
}

.login form a p {
    padding: 15px 0;
}

.login .sns {
    width: 20%;
    margin: 0 5px 0 5px;
    background-color: #E8EFF7;
}

.login .back {
    text-align: left;
    font-size: 15px;
    margin: 70px 0 80px 70px;
}

.login img {
    margin: 0 auto 50px auto;
    max-width: 150px;
}

.login ul {
    list-style-type: none;
}

.login .tab-content,
.login .tab-content22 {
    display: none;
}

.login .tab-content.active,
.login .tab-content22.active {
    display: block;
}

.login form input {
    display: block;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    outline: none;
}

.login figure img {
    padding: 0 5px;
    width: 250px;
}

.login11 form input[type=checkbox],
.login22 form input[type=checkbox] {
    display: none;
}

.login11 form .checkbox01,
.login22 form .checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 20px 30px 40px;
    position: relative;
    width: auto;
}

.login11 form .checkbox01::before,
.login22 form .checkbox01::before {
    background: #fff;
    border: 1px solid #231815;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 38%;
    width: 16px;
}

.login11 form .checkbox01::after,
.login22 form .checkbox01::after {
    border-right: 3px solid #ed7a9c;
    border-bottom: 3px solid #ed7a9c;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 38%;
    transform: rotate(45deg);
    width: 5px;
}

.login11 input[type=checkbox]:checked+.checkbox01::after,
.login22 input[type=checkbox]:checked+.checkbox01::after {
    opacity: 1;
}

.login11 .wrap-tab,
.login22 .wrap-tab {
    width: 480px;
    margin: 0 auto;
    text-align: center;
}

.login11 .list-tab,
.login22 .list-tab22 {
    display: flex;
    margin: 0 auto;
    text-align: center;
}

.login11 .list-tab>li {
    padding-top: 30px;
    width: 240px;
    height: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #ababab;
    box-sizing: border-box;
    cursor: pointer;
}

.login11 .list-tab .active {
    border-bottom: 5px solid #000;
    color: #000;
}

.login11 form {
    margin: 0 auto 20px;
    width: 480px;
    text-align: center;
    padding: 40px 40px 0 40px;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    vertical-align: middle;
}

.login22 .list-tab22>li {
    padding-top: 30px;
    width: 240px;
    height: 80px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #ababab;
    background-color: #eee;
    cursor: pointer;
}

.login22 .list-tab22 .active {
    background-color: #ACD3FF;
    border: none;
    color: #000;
}

.login22 form {
    margin: 0 auto 20px;
    width: 480px;
    text-align: center;
    padding: 40px 40px 0 40px;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    vertical-align: middle;
    background-color: #ACD3FF;
    margin-bottom: 10px;
}

/*-----アートボード「login」------*/

/*-----アートボード「contact」------*/
.contact form,
.contact content .left,
.contact content .right {
    width: 60%;
    margin: 0 50px;
}

.contact .sns {
    margin: 10px 0;
    padding: 0 5px;
}

.contact01 .sns,
.contact02 .sns {
    margin: 10px auto 10px auto;
}

.contact form input {
    display: block;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    outline: none;
}

.contact form select {
    display: block;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    outline: none;
}

.contact form select option {
    padding: 10px 0 10px 0;
    font-size: 18px;
}

.contact form textarea {
    display: block;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    outline: none;
    resize: none;
}

.contact form {
    text-align: center;
    margin: 0 auto;
    width: 55%;
    justify-content: center;
}


.contact02 {
    width: 90%;
}

.contact02 form input {
    display: block;
    width: 90%;
    padding: 20px;
    margin: 0 10px 20px 0;
    outline: none;
}

.contact02 form select {
    display: block;
    width: 90%;
    padding: 20px;
    margin: 0 0 20px 10px;
    outline: none;
}

.contact02 form select option {
    padding: 10px 0 10px 0;
    font-size: 18px;
}

.contact02 form textarea {
    display: block;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    outline: none;
    resize: none;
}

.contact02 .under {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
}

.contact02 .under h1 {
    font-weight: bold;
    text-align: center;
    padding: 0 20px;
}

.contact02 .under .tel {
    border-right: 1px solid;
}

.contact02 .under .mail {
    border-left: 1px solid;
}

/*-----アートボード「contact」------*/


/*-----アートボード「team」------*/
.team {
    text-align: center;
}

.team .sns {
    padding: 5px 5px;
}

.team .sns a:hover {
    text-decoration: none !important;
}

.team03 .sns {
    margin: 0 auto;
    padding: 5px 5px;
}

.team04 .sns {
    padding: 5px 2px;
    zoom: 1.4;
}

.team .list {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.team .list .profile {
    padding: 0 10px 40px 10px;
    width: 100%;
}

.team .list .profile img {
    border-radius: 1000px;
    width: 90%;
    object-fit: cover;
}

.team .list .profile .name {
    padding-top: 13%;
    font-weight: bold;
}

.team .list .profile .job {
    text-align: left;
    padding: 0 20px;
}

.team01 .list {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*    grid-template-rows: repeat(2, 1fr);*/
}

.team01 .list .profile img,
.team02 .list .profile img {
    border-radius: initial;
}

.team02 .list {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.team02 .list .profile img {
    width: 100%;
}

.team02 .list .box {
    display: block;
    padding-top: 0px;
    margin: 0 auto;
    background-color: #E8EFF7;
    width: 100%;
    height: 100%;
}

.team02 .list .profile .name {
    padding-top: 45%;
    font-weight: bold;
}

.team02 .list .box .sns {
    margin: 0 auto;
    padding-top: 5%;

}

.team03 content .face img {
    text-align: center;
    vertical-align: bottom;
    width: 100%;
    object-fit: cover;
}

.team03 content .right {
    width: 70%;
    margin: 20px 20px 20px 60px;
}

.team03 .right .photos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: 20px;
    border-bottom: 1px solid;
}

.team03 .right .photos img {
    text-align: center;
    border-radius: 1000px;
    width: 80%;
    object-fit: cover;
}

.team04 content {
    padding: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0 auto;
}

.team04 content .member {
    width: 100%;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
}

.team04 .member .photo img {
    border-radius: 1000px;
    margin: auto;
    width: 100%;
    object-fit: cover;
}

.team04 .member .right {
    margin: 0 30px 0 30px;
    text-align: left;
    width: 90%;
    position: relative;
}

.team04 .member .right .sub {
    text-align: left;
    padding: 10px 0;
}


/*----アートボード「team」------*/



/*-----アートボード「pricing」------*/
.pricing {
    text-align: center;
}

.pricing content .buner,
.pricing content .buner-center {
    grid-template-rows: 1fr 2fr 1fr;
    background-color: #E8EFF7;
    padding: 20px;
    margin: 10px;
}

.pricing01 content .buner,
.pricing01 content .buner-center {
    grid-template-rows: 1fr 2fr 1fr;
    background-color: #E8EFF7;
    padding: 20px;
    margin: 10px;
}

.pricing content .buner-center {
    background-color: #186AA5;
}

.pricing .buner .top .plan,
.pricing .buner-center .top .plan {
    font-size: 33px;
    padding-bottom: 10px;
}

.pricing .buner-center .top .plan {
    color: #fff;
}

.pricing .buner .top .price,
.pricing .buner-center .top .price {
    font-size: 38px;
    font-weight: bold;
    padding-bottom: 30px;
}

.pricing .buner-center .top .price {
    color: #fff;
}

.pricing .buner .main,
.pricing .buner-center .main {
    line-height: 4;
    padding: 40px 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.pricing .buner-center .main {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.pricing .btn {
    margin-top: 30px;
}

.pricing .btn1 {
    background-color: #fff !important;
    color: #1B224C !important;
    border-color: #fff !important;
}

.pricing01 content .buner {
    margin: 30px 0;
}

.pricing01 content .buner-center {
    margin: 0;
    padding-top: 50px;
}

/*-----アートボード「pricing」------*/

/*-----アートボード「features」------*/

.element01 {
    display: flex;
    align-items: center;
    margin: auto;
}

.element01 img {
    border-radius: 1000px;
    width: 100%;
    margin: 0 auto;
    object-fit: cover;
}

.element01 h1 {
    font-weight: bold;
}

.element01 .text {
    margin: 0 10px;
}

.element02 {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 50px;
}

.element02 img {
    border-radius: 1000px;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    object-fit: cover;
}

.element02 h1 {
    font-weight: bold;
    text-align: center;
}

.element02 p {
    text-align: center;
}

.features .pc-ver {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.iphone-hide {
    display: none;
}

.features .hide {
    display: none;
}

.features .center {
    padding: 0 10%;
}

.features .center img {
    width: 100%;
}

.features .left {
    grid-column: 1;
    padding: auto;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

.features01 .left {
    display: block;
    margin: auto;
}

.features01 .left img {
    padding: 0 20px;
    width: 125%;
    margin: auto;
}

.features01 .right img {
    width: 50%;
}

.features01 .right .photo {
    text-align: right;
    margin-right: 10px;
}

.features01 .element01 {
    margin: 10px auto;
}

.features01 p,
.features02 p {
    padding-top: 3%;
}

.features02 content .left .element01 {
    margin: 10px;
    width: 90%;
}

.features02 content .left img {
    width: 50%;
}

.features02 content .right img {
    width: 130%;
    padding-bottom: 10%;
}

.features01 content,
.features02 content {
    display: flex;
    justify-content: center;
}

.features .right {
    padding: auto;
    display: grid;
    /*   grid-template-rows: repeat(3, 1fr);
*/
}

.features02 content .right {
    width: 100%;
    margin: auto;
}

.features03 content {
    display: flex;
    justify-content: center;
}

.features03 .left {
    display: flex;
    align-items: center;
}

.features03 .left .icon {
    margin: auto;
    width: 30%;
}

.features03 .left .icon img {
    display: block;
    border-radius: 1000px;
    width: 90%;
    object-fit: cover;
    margin: 25px 0;
}

.features03 .left .screen {
    width: 450px;
    position: relative;
}

.features03 .left .screen .bottom {
    width: 150px;
    height: 300px;
    object-fit: cover;
    position: absolute;
    transform: translate(20%, -50%);
}

.features03 .left .screen .mid {
    width: 175px;
    height: 350px;
    object-fit: cover;
    object-fit: cover;
    position: absolute;
    transform: translate(50%, -50%);
}

.features03 .left .screen .top {
    width: 200px;
    height: 400px;
    object-fit: cover;
    position: absolute;
    left: 45%;
    transform: translate(0%, -50%);
}

.features03 .right {
    display: block;
    vertical-align: middle;
    text-align: left;
    width: 90%;
    margin-left: 8%;
}

.features03 .right h1 {
    padding: 50px 0;
}

.features03 .right h2 {
    padding-bottom: 20px;
}

.features03 .right .btn {
    width: 70%;
    margin: 0 !important;
}

.features04 .hide {
    display: none;
}

.features04 .mobile-modo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.features04 .center {
    grid-column: 2;
    padding: 0;
    margin: 0 auto;
}

.features04 .center img {
    width: 240px;
    height: 480px;
    object-fit: cover;


}

.features04 .left {
    height: 480px;
    grid-template-rows: repeat(2, 1fr);
    grid-column: 1;
    grid-row: 1;
    padding: auto;
    margin: auto;
}

.features04 .right {
    height: 480px;
    grid-template-rows: repeat(2, 1fr);
    padding-left: 0 -20px;
}

.features04 p {
    padding-top: 2%;
}

.features05 p {
    padding: 0 10px;
}

.features05 content {
    display: flex;
    justify-content: center;
}

.features05 .left {
    display: block;
}

.features05 content .left img {
    width: auto;
    height: 700px;
    object-fit: cover;
    margin: auto;
}

.features05 content .right {
    text-align: left;
    padding: 30px;
    height: 50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.features06 content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}

.features06 .left {
    display: block;
    grid-template-rows: initial;
}

.features06 .left .elements {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    height: 600px;
    position: relative;
    grid-template-columns: initial;
}

.features06 .element01 img {
    width: 70%;
    padding-bottom: 5Px;
}

.features06 .right {
    display: block;
    text-align: right;
    position: relative;
    margin: auto;

}

.features06 .right .iphone {
    width: 250px;
    height: auto;
    object-fit: cover;
    position: absolute;
    left: 10%;
    top: 20%;
}

.features06 .right .back {
    height: 750px;
    width: 450px;
    object-fit: cover;
    margin-left: 200px;
}

.features07 {
    background-color: #E8EFF7;
    padding-top: 50px;
    height: initial;
}

.features07 .elements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin: 30px auto 0;
}

.features07 .element02 {
    width: 90%;
}

.features07 .bottom {
    margin-top: 500px;
    height: 450px;
    background-color: #fff;
    position: relative;
}

.features07 .bottom .iphone {
    width: 20%;
    object-fit: cover;
    position: absolute;
    right: 17%;
    top: -66%;
}

.features07 .bottom .ipad {
    width: 60%;
    object-fit: cover;
    position: absolute;
    left: 17%;
    top: -88%;
}

.features08 .elements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    margin: 50px auto;
}

.features08 p {
    padding-left: 10px;
    padding-right: 10px;
}

.features09 .elements {
    width: 100%;
    margin: 50px auto;
    padding-bottom: 0px;
    border-bottom: solid 1px #E8EFF7;
    padding-top: 80px;
}

.features09 .bottom {
    position: relative;
    margin: 0 auto;
}

.features09 .bottom .photo {
    padding-left: 50px;
    height: 500px;
    width: 700px;
    object-fit: cover;
}

.features09 .bottom .text {
    width: 500px;
    padding: 50px;
    position: absolute;
    left: 50%;
    top: 5%;
    background-color: #E8EFF7;
}

.features09.bottom h1 {
    padding-bottom: 20px;
}

/*-----アートボード「features」------*/

/*-----アートボード「hero」------*/
.hero .iphone {
    margin-left: 5%;
}

.hero .iphone img {
    width: 100%;
}

.hero .contents {
    margin: auto;
    width: 80%;
    padding: 0;
    margin-left: 5%;
}

.hero h1 {
    margin-bottom: 20px;
}

.hero .text {
    margin: auto;
}

.hero00 .btn_01,
.hero00 .btn_02 {
    margin-top: 50px !important;
    margin-right: 20px !important;
    width: 50%;
}

.hero01 content .left {
    padding: 0 10px 0 30px;
    margin: auto;
}

.hero01 .text {
    text-align: left;
}

.hero01 .text h2 {
    margin-bottom: 10px;
}

.hero01 .left .text img {
    display: none;
}

.hero01 content .right {
    text-align: right;
    width: 45%;
}

.hero01 content .right img {
    padding: 40px 40px;
    height: 700px;
}

.hero01 .btn_01,
.hero01 .btn_02,
.hero07 .left .btn_01,
.hero07 .left .btn_02 {
    margin-top: 50px;
    margin-right: 20px;
    width: 50%;
}

.hero02 .text {
    width: 80%;
    text-align: center;
}

.hero02 .body .rink {
    padding-top: 50px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 10fr;
    width: 180px;
}

.hero02 .body .rink img {
    padding-right: 5px;
}

.hero02 .body .rink a {
    font-size: 15px;
    padding-top: 8px;
}

.hero02 .btn_01 {
    margin: 100px auto 0 auto;
}

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

.hero03 content img {
    width: 80%;
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    display: block;
}

.hero04 .text {
    width: 90%;
    text-align: center;
    margin-bottom: 20px;
}

.hero04 content .main {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hero04 content .main .left {
    position: relative;
    margin: 0 auto;
    margin-left: 6%;
}

.hero04 .left img {
    margin-top: 70px;
    width: 180px;
}

.hero04 .left .top {
    position: absolute;
    left: 80%;
    bottom: 30px;
}

.hero04 .right {
    width: 90%;
    margin: auto;
}

.hero04 .right .icon {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 50px;
}

.hero04 .right .icon img {
    border-radius: 1000px;
    width: 90px;
    height: 90px;
    object-fit: cover;
    margin: 50px auto 0 auto;
}

.hero04 .right .store {
    margin: 50px auto 0 auto;
    width: 280px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hero04 .right .store img {
    width: 130px;
    object-fit: cover;
}

.hero05 .body {
    margin-bottom: 30px;
}

.hero05 .text {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    margin-top: 50px;
    margin-bottom: 100px;
}

.hero05 .body .ipad-mob {
    display: none;
}

.hero05 .btn_01,
.hero05 .btn_02 {
    width: 30%;
    margin: 0 10px;
}

.hero05 .body .rink {
    padding-top: 40px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 10fr;
    width: 180px;
}

.hero05 .body .rink img {
    padding-right: 5px;
}

.hero05 .body .rink a {
    font-size: 15px;
}

.hero05 .body .ipad {
    padding-top: 60px;
    width: 650px;
    object-fit: cover;
    padding-bottom: 70px;
    display: block;
    margin: auto;
}

.hero06 content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    width: 100%;
    padding: 0 50px;
}

.hero06 content .left {
    margin: auto;
    width: 90%;
}


.hero06 content .left h1 {
    text-align: left;
    padding-top: 20px;
    width: 80%;
}

.hero06 content .left .rink {
    text-align: left;
    padding-top: 50px;
    display: flex;
    width: 180px;
}

.hero06 content .left .rink img {
    padding-right: 5px;
}

.hero06 content .left .rink a {
    font-size: 15px;
    padding-top: 4px;
}

.hero06 content .right form {
    margin: 0 auto;
    width: 90%;
    text-align: center;
    padding: 70px 0px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    vertical-align: middle;
    background-color: #186AA5;
}

.hero06 content .right form h2 {
    color: #fff;
}

.hero06 content .right form input {
    display: block;
    width: 80%;
    padding: 20px;
    margin: 0 auto 20px auto;
    outline: none;
}

.hero06 content .right form select {
    display: block;
    width: 80%;
    margin: 0 auto 20px auto;
    outline: none;
}

.hero06 content .right form select option {
    padding: 10px 0 10px 0;
    font-size: 18px;
}

.hero06 content .right form p {
    margin: auto;
    width: 90%;
    text-align: left;
    line-height: 1.5;
    padding: 20px;
    color: #fff;
}

.hero06 content .right .btn_01 {
    display: block;
    margin: 20px auto;
    width: 60%;
    font-size: 20px;
    font-weight: bold;
    color: #186AA5;
    background-color: #fff;
    border: 1px solid;
}

.hero06 .sns {
    grid-column: 2;
    zoom: 2;
    transform: rotate(0);
    margin: 0 0 0 auto;
    padding: 5% 0 0 90%;
}

.hero07 content {
    padding-top: 50px;
    padding-bottom: 70px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.hero07 content .left {
    text-align: left;
    padding: 0 50px 50px 50px;
    width: 100%;
}

.hero07 .left .text h1 {
    width: 90%;
}

.hero07 .left .text h2 {
    width: 90%;
    text-align: left;
}

.hero07 .left .text p {
    width: 90%;
}

.hero07 .youtube-hide {
    display: none;
}

.hero08 {
    width: 100%;
    margin: 0px auto;
    padding: 70px 0;
    text-align: center;
}

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

.hero08 content h2 {
    width: 90%;
    text-align: center;
    margin: 0 auto;
    padding-top: 70px;
}

.hero08 content p {
    width: 90%;
    padding-bottom: 30px;
    text-align: center;
    margin: 0 auto;
    padding-top: 10px;
}

.hero08 .iphone img {
    width: 30%;
}

.hero08 content .iphone {
    margin: 50px auto;
    position: relative;
}

.hero08 content .iphone .top {
    position: relative;
}

.hero08 content .iphone .left {
    position: absolute;
    right: 50%;
    top: 10%;
}

.hero08 content .iphone .right {
    position: absolute;
    left: 50%;
    top: 10%;
}

.hero09 {
    width: 90%;
    margin: 0px auto;
    padding: 140px 50px;
}

.hero09 content .list_ap p {
    width: 100%;
    text-align: left;
    margin: 30px 10px;
}

.hero09 content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hero09 h1 {
    text-align: left;
}

.hero09 .right-hide {
    display: none;
}

.hero09 content .left {
    margin: auto;
}

.hero09 content .left h2 {
    width: 90%;
    padding-top: 100px;
}

.hero09 content .left p {
    width: 90%;
}

.hero09 content .left .list p {
    line-height: 1;
    text-align: left;
}

.hero09 content .right {
    position: relative;
    width: 70%;
    margin-left: 20px;
}

.hero09 content .right .watch {
    position: absolute;
    width: 60%;
    top: 40%;
}

.hero09 content .right .iphone {
    position: absolute;
    left: 33%;
    width: 90%;
}

/*-----アートボード「hero」------*/