@charset "utf-8";
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;outline: 0;border: 0;vertical-align: baseline;
}
*{-webkit-box-sizing:border-box;-mos-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
html{overflow-x: hidden; font-size: 13px;/*scroll-behavior: smooth;*/}
body {
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    overflow: hidden;
    background: #fff;
    width: 100%;
    font-weight: 400;
    -ms-font-feature-settings: "palt";-moz-font-feature-settings: "palt";-webkit-font-feature-settings: "palt";font-feature-settings: "palt";
    letter-spacing: 0.12em;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
    display: block;
}
h1, h2, h3, h4, h5, h6, strong, th {font-weight: normal;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after, q::before, q::after {content: "";content: none;}
a {padding: 0;margin: 0;font-size: 100%;vertical-align: baseline;background: transparent;color: #464646;text-decoration: none;}
p {max-height: 999999px;}
ins {background-color: #ff9;color: #f2f2f2;text-decoration: none;}
mark {background-color: #ff9;color: #f2f2f2;font-style: italic;font-weight: bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help;}
table {border-collapse: collapse;border-spacing: 0;}
img {vertical-align: middle; width: 100%;}
input, select {vertical-align: middle;}
button {border: none;background: none;}
button:focus {outline: none;}
address{font-style: normal;}


/*-- ease-in-out 0.3 --*/
a,.hover_act1,.txt_link1,#top_contentlist .contentlist_news .top_news_list li::after,#columu_side .columu_side_list li{
    -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
/*-- ease-in-out 0.5 --*/
header{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all  0.5s ease;}

/*-- a full 1.grid 2.inlineblock--*/
.colution_list a,.plan_bnrbox a,.pagelink li a,#columu_side .side_top_link > div a,.data_table a{width: 100%;height: 100%; display: grid;place-items: center;}
.drawer_menu ul li a,#top_reason .reason_list li a,#top_contentlist .contentlist_news a,.columu_side_list a,#document .list_dl dt a{width: 100%;height: 100%;display: inline-block;}

/*-- boeder-bottom:last none --*/
.list_dl dd:last-of-type,.list_privacy li:last-of-type,.detail_list dl dd:last-of-type,.plan_pricebox ul li:last-of-type,#columu_main .web_table1 tr:last-of-type{border-bottom: none;}
/*-- margin-bottom:last 0 --*/
.drawer_menu ul.drawer_main_list li:last-of-type,#top_contentlist .contentlist_news .top_news_list li:last-of-type,#website .list_box3 li:last-of-type,#website #website_flow ul li:last-of-type{
    margin-bottom: 0;
}


/****************************************
common (共通スタイル)
****************************************/
:root{
    --color-black1: #20252C;/*青みの黒*/
    --color-white1: #fff;
    --color-gray1: #bebfc5;/*青みのグレー*/
    --color-gray2: #f7f8f9;/*青みの薄いグレー*/
    --color-gray3: #f4f7f8;/*青みの薄いグレー2*/
    --color-gray4: #f0f2f4;
    --color-gray5: #d1d6dc;
    --color-gray6: #e6e7f1;
    --color-blue1: #466288;/*濃いめのブルーグレー*/
    --color-blue2: #5b75ab;/*logocolor*/
    --color-pink1: #d03f85;/*logocolor*/
    --color-purple1: #b15dab;/*logocolor*/
    --color-purple2: #9e488c;
    --color-purple3: #6a3f89;
    --color-beige1: #fcf1ec;/*logocolor*/

    --color-lightplan: #d03f85;
    --color-standerdplan: #9e488c;
    --color-platinumplan: #6a3f89;
    --color-miniplan: #6699C5;

    --color-mail-lightplan: #3e94bb;
    --color-mail-standerdplan: #406eba;
    --color-mail-platinumplan: #6850a4;

    --color-komikomi: #004d6d;
    --color-business: #1e3c5b;

    --color-support0: #e0709d;
    --color-support1: #936ec0;
    --color-support2: #589cbd;
    --color-support3: #43afa3;
    --color-support2-2: #dbeff8;
    --color-support3-2: #d5f0ed;

    --gradation1: linear-gradient(90deg, rgba(82,98,238,1) 0%, rgba(157,57,147,1) 50%, rgba(205,109,239,1) 100%);/*rainbow*/
    --gradation2: linear-gradient(90deg, rgba(252,245,248,1) 0%,rgba(251,244,253,1) 100%);/*薄い*/
    --gradation3: linear-gradient(90deg, rgba(130,58,171,1) 0%, rgba(58,68,169,1) 100%);/*濃い*/
    --gradation4: linear-gradient(90deg, rgba(140,184,218,1) 0%, rgba(140,193,213,1) 100%);/*blue*/
    --gradation5: linear-gradient(270deg, rgba(232,85,150,1) 0%, rgba(226,86,147,1) 5%, rgba(160,88,161,1) 100%);
    --gradation6: linear-gradient(180deg, rgba(45,139,189,5%) 0%, rgba(80,104,193,5%) 50%, rgba(121,92,179,5%) 100%);
    --gradation7: linear-gradient(92deg, #5e50b2 20%, #6a3f89 45%, #944684 60%, #a35187 100%);
    --gradation7-2: linear-gradient(180deg, #545fec 0%, #6a3f89 40%, #944684 60%, #d75092 100%);
    --gradation8: linear-gradient(90deg, #5262ee 0%, #9d3993 50%, #cd6def 100%);

    --gradation-light: linear-gradient(90deg, rgba(215,80,146,1) 0%, rgba(243,103,143,1)100%);
    --gradation-standard: linear-gradient(90deg, rgba(148,70,132,1) 0%, rgba(161,83,169,1) 100%);
    --gradation-platinum: linear-gradient(90deg, rgba(106,63,137,1) 0%, rgba(96,88,175,1) 100%);

    --gradation-museigen: linear-gradient(90deg, rgba(27,58,143,1) 0%, rgba(76,91,160,1) 100%);

    --gradation-komikomi: linear-gradient(90deg, rgba(0,107,163,1) 0%, rgba(0,123,146,1) 100%);
    --gradation-business: linear-gradient(90deg, rgba(31,60,91,1) 0%, rgba(38,82,129,1) 100%);
    --gradation-btn8: linear-gradient(90deg, #cd58b2 0%, #ee5185 100%);

    --iconlogo-svg: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23B04D97%3B%7D%20.st1%7Bfill%3A%23D34F8E%3B%7D%20.st2%7Bfill%3A%236F4892%3B%7D%3C%2Fstyle%3E%3Ccircle%20class%3D%22st0%22%20cx%3D%229.9%22%20cy%3D%229.4%22%20r%3D%228.8%22%2F%3E%3Ccircle%20class%3D%22st1%22%20cx%3D%229.8%22%20cy%3D%2230.3%22%20r%3D%228.8%22%2F%3E%3Ccircle%20class%3D%22st2%22%20cx%3D%2230.4%22%20cy%3D%2230.1%22%20r%3D%228.8%22%2F%3E%3C%2Fsvg%3E');
    --min3-10px: min(3%,10px);
    --min4-10px: min(4%,10px);
    --min4-15px: min(4%,15px);
    --min5-20px: min(5%,20px);
}

::selection {background: rgb(93 179 222 / 20%);}
::-moz-selection {background: rgb(93 179 222 / 20%);}
img::selection{background: rgb(93 179 222 / 20%);}
img::-moz-selection {background: rgb(93 179 222 / 20%);}

/*ページ全体ふわっと表示*/
body{
    font-family: 'Noto Sans','Hiragino Kaku Gothic Pro','Arial', 'ヒラギノ角ゴ Pro W3', '游ゴシック', 'Yu Gothic', 'メイリオ','Helvetica Neue','Helvetica', 'Meiryo','ＭＳ Ｐゴシック',  sans-serif;
    text-align: left;
    min-height: 800px;
    min-width: 280px;
    color: #464646;
    margin:0 auto;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/********* common *********/
.bl_480,.bl_600,.bl_700,.bl_800,.bl_inline_900,.bl_900,.bl_1000{display: none;}

/*- font -*/
.fs_sss{font-size: 0.7em;}
.fs_ss{font-size: 0.75em;}
.fs_s {font-size: 0.8em;}
.fs_l {font-size: 1.2em;}
.fs_ll{font-size: 1.5em;}
.fw_b {font-weight: bold;}

.f_color_blue1{color: var(--color-blue1);}
.f_color_pink1{color: var(--color-pink1);}
.f_color_light{color: var(--color-lightplan);}
.f_color_standerd{color: var(--color-standerdplan);}
.f_color_platinum{color: var(--color-platinumplan);}
.f_color_mini{color: var(--color-miniplan);}
.f_color_support0{color: var(--color-support0);}
.f_color_support1{color: var(--color-support1);}
.f_color_support2{color: var(--color-support2);}
.f_color_support3{color: var(--color-support3);}
.ff_en{font-family: 'Josefin Sans';}

.txt_left{text-align: left;}
.txt_right{text-align: right;}
.txt_center{text-align: center;}
.txt_left_center{text-align: left;}

/*- margin-padding -*/
.mb_10 {margin-bottom: 10px;}
.mb_20 {margin-bottom: 20px;}
.m0_auto{margin: 0 auto;}
.mt_10 {margin-top: 10px;}
.mt_20 {margin-top: 20px;}
.mt_30 {margin-top: 30px;}
.mt_title{margin-top: var(--min5-20px);}
.mt_section{margin-top: min(10%, 80px);}
.mt_section2{margin-top: min(5%, 40px);}
.pt_section{padding-top: min(10%, 80px);}
.pt_section2{padding-top: min(5%, 40px);}
.pb_section{padding-bottom: min(10%, 80px);}

/*- inner-width -*/
.inner700{max-width: 700px;width: 100%;margin: 0 auto;}
.inner800{max-width: 800px;width: 100%;margin: 0 auto;}
.inner900{max-width: 900px;width: 100%;margin: 0 auto;}
.inner1000{max-width: 1000px;width: 100%;margin: 0 auto;}
.inner1100{max-width: 1100px;width: 100%;margin: 0 auto;}
.inner1200{max-width: 1200px;width: 100%;margin: 0 auto;}

.width_p10{width: calc(100% - 20px);}
.width_p20{width: calc(100% - 40px);}
.width_p30{width: calc(100% - 60px);}

.section_pad{padding: min(12%, 110px) 0;}
.section_pad2{padding: min(10%, 80px) 0;}
.section_pad3{padding: min(10%, 60px) 0;}
.section_pad4{padding: min(10%, 30px) 0;}

.box_pad10{padding: var(--min4-10px);}
.box_pad15{padding: var(--min4-15px);}
.box_pad20{padding: var(--min5-20px);}


/*- other -*/
.border_t{border-top: 1px solid var(--color-gray1);}
.border_b{border-bottom: 1px solid var(--color-gray1);}

.bg_gradation1{background: var(--gradation6);}
.bg_color1{background: var(--color-gray3);}

.under_line{background: -webkit-linear-gradient(transparent 65%,#ffd6ea 65%);background: -o-linear-gradient(transparent 65%,#ffd6ea 65%);background: linear-gradient(transparent 65%,#ffd6ea 65%);}
.txt_link1{border-bottom: 2px dotted var(--color-pink1);padding: 2px;}
.txt_link1:hover{background: #fae1ec;}

/*- icon -*/
.site_out{
    width:14px;
    margin-left: 4px;
}

/*- title -*/
.title_main{
    line-height: 1.6em;
    text-align: center;
    font-family: 'Josefin Sans';
    font-size:max(26px, min(8vw,42px)); /*safari,IE*/
    font-size: clamp(26px,8vw,42px);
}
.title_main2{
    line-height: 1.6em;
    font-size:max(24px, min(5vw,32px)); /*safari,IE*/
    font-size: clamp(24px,5vw,32px);
    margin-bottom: min(4%, 30px);
}
.title_sub{
    line-height: 1.6em;
    font-size:max(20px, min(5vw,26px)); /*safari,IE*/
    font-size: clamp(20px,5vw,26px);
    margin-bottom: min(6%, 35px);
}
.title_sub2{
    line-height: 1.6em;
    font-size: min(7vw,38px);
    margin-bottom: min(4%, 30px);
}
.title_sub3{
    line-height: 1.6em;
    font-size:max(14px, min(4vw,20px)); /*safari,IE*/
    font-size: clamp(14px,4vw,20px);
    margin-bottom: min(4%, 30px);
}
/*左右に斜め*/
.title_line1{
    position: relative;
    display: inline-block;
    padding: 0 40px;
    letter-spacing: 3px;
}
.title_line1::before,.title_line1::after{
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 1px;
    background-color: var(--color-gray1);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.title_line1::before {left:0;}
.title_line1::after {right: 0;}
/*先頭にライン*/
/*boxに入れるとPCの際にもじとタイトルが横並びになる*/
/*div.title_line2_box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    margin-bottom: var(--min5-20px);
    font-size: 0.9em;
}*/
.title_line2{
    padding-left: 12px;
    line-height: 1.4em;
    border-left: 5px solid var(--color-lightplan);
    font-size:max(20px, min(5vw,26px)); /*safari,IE*/
    font-size: clamp(20px,5vw,26px);
    margin-bottom: 20px;
}
.title_line2.title_bg_gradation{
    background: var(--gradation5);
    padding: 10px;
    color: #fff;
}

.title_line3{
    position: relative;
}
.title_line3::after{
    content: '';
    position: absolute;
    bottom: -0.2em;
    left: calc(50% - 40px);
    display: inline-block;
    width: 80px;
    height: 2px;
    background-color: var(--color-gray1);
}
.title_line4{
    font-size: 24px;
    color: #d3508d;
    border-bottom: 2px solid;
}
.title_mini{
    position: relative;
    padding-left: 20px;
    font-size: min(2.4vw,12px);
    color: #777;
    line-height: 1em;
    margin-bottom: min(4%,20px);
}
.title_mini::before{
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    content: "";
    width: 10px;
    height: 2px;
    background: #bbb;
}
.title_vertical{
    position: relative;
}
.title_vertical::before,.title_vertical::after{
    position: absolute;
    line-height: 1em;
}
.title_vertical::before{
    top: 0;
    left: 10px;
    content: "";
    background: linear-gradient(180deg, rgb(205 151 235) 0%, rgb(195 217 234) 100%);
    width: 1px;
    height: 130px;
    z-index: 2;
}
.title_vertical.t_vertical_bg_dark::before{background: linear-gradient(180deg, rgb(166 113 197) 0%, rgb(98 106 188) 100%);}

.title_vertical::after{
    top: 20px;
    left: 7px;
    color: #babbca;;
    transform: rotate(90deg);
    transform-origin: left bottom;
}
.title_vertical.t_vertical_bg_dark::after{color: #73759e;}

/* btn */
.btn1{
    width: 100%;
    max-width: 260px;
    background: #fff;
    color: var(--color-black1);
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-top: 5px;
}
.btn2{
    height: auto;
    width: 100%;
    max-width: 600px;
    padding: min(4%,20px);
    color: #fff;
    display: flex;
    /*    height: 50px;*/
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin: 20px auto 0;
    position:relative;
    z-index: 10;
}
.btn2::before,.btn2::after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    bottom: 0;
    border-radius: 50px;
}
.btn2::before{
    background: linear-gradient(90deg, rgba(205,88,178,1) 0%, rgb(238,81,133,1) 100%);
    z-index:-1;
    transition:0.5s;
}
.btn2::after{
    background: var(--gradation1);
    z-index:-2;
}
.btn2:hover::before{
    opacity: 0;
}
.btn3{
    text-align: center;
    margin-top: 20px;
    display: inline-block;
    padding: 12px 60px;
    position: relative;
    letter-spacing: 3px;
    max-width: 300px;
    width: 100%;
}
.btn3::after,.btn3::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid var(--color-black1);
    border-radius: 30px;
    transition: transform .2s;
}
.btn3::after,.btn3::before{transform: translate(0);}
.btn3:hover{color: #8f8bd4;}
.btn3.btn3_op:hover{    color: #fff;background: #686875;}
.btn3:hover::before,.btn3:hover::after{border: 1px solid #8f8bd4;}
.btn3:hover::after{transform: translate(3px, 3px);}
.btn3:hover::before{transform: translate(-3px, -3px);}

.btn4{
    max-width: 260px;
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    background: #45494e;
    transition: all .3s;
    transition-delay: .7s;
}
.btn4:hover{
    background: #9198b1;
    border:1px solid #20252b;
    border:none;
}
/*線の設定*/
.btn4 span{
    display: block;
}
.btn4::before,.btn4::after{
    content:"";
    position: absolute;
    width: 0;
    height: 1px;
    background: #774696;
    transition: all 0.2s linear;
}
.btn4 span::before,.btn4 span::after{
    content:"";
    position: absolute;
    width:1px;
    height:0;
    background: #7d89ad;
    transition: all 0.2s linear;
}
.btn4:hover::before,.btn4:hover::after{
    width: 100%;
}
.btn4:hover span::before,.btn4:hover span::after{
    height: 100%;
}
/* 枠線が伸びて塗りに */
.btn4_border::after,.btn4_border span::after{
    right:0;
    bottom: 0;
    transition-duration: 0.4s;
}
.btn4_border::before,.btn4_border span::before{
    left: 0;
    top: 0;
    transition-duration: 0.4s;
}
/*四角に真ん中ライン*/
.btn5 {
    position: relative;
    display: inline-block;
    border: 1px solid #c6c6c6;
    width: min(80%, 400px);
    margin: 20px auto 10px;
    padding: 15px 20px;
    line-height: 1.2em;
}
.btn5::after {
    position: absolute;
    right: -20px;
    top: 50%;
    content: '';
    background: #c6c6c6;
    width: 50px;
    height: 1px;
    transition: 0.3s ease-in-out;
}
.btn5:hover{background: #fafafa;}
.btn5:hover::after {right: -40px;}

/*ホバーで右に*/
.btn6{
    display: inline-block;
    text-align: center;
    font-weight: bold;
    position: relative;
    margin-top: 20px;
    color: #fff;
    padding: 12px 30px 12px 20px;
    border: 2px solid var(--color-black1);
    background: var(--color-black1);
    border-radius: 4px;
    max-width: 500px;
    width: 100%;
    transition: .4s;
    z-index: 1;
}
.btn6::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #fff;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform ease .4s;
}
.btn6:hover {
    color: var(--color-black1);
}
.btn6:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
}
.btn6::after{
    top: calc(50% - 9px);
    right: 10px;
    width: 10px;
    height: 18px;
    background: url(../images/arrow2_1.png);
    background-size: 10px;
    background-repeat: no-repeat;
    z-index: 1;
}
.btn6.btn6_contact{
    border: 2px solid var(--color-black1);
    background: var(--color-black1);
}
.btn6.btn6_contact:hover {
    color: var(--color-black1);
}
.btn7{
    position: relative;
    color: #fff;
    line-height: 1em;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    border-radius: 0;
    background: #3d3d3d;
}
.btn7 span{position: relative;}
.btn7::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-98%);
    transform: translateX(-98%);
    background: var(--gradation5);
}
.btn7:hover::before {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
/*共通矢印*/
.btn6::before,.btn6::after,.btn7::after{position: absolute;content: "";}
.btn6::after,.btn7::after{
    top: calc(50% - 9px);
    right: 10px;
    width: 10px;
    height: 18px;
    background: url(../images/arrow2_1.png);
    background-size: 10px;
    background-repeat: no-repeat;
    z-index: 1;
}

.box_lable1{
    color: #fff;
    position: relative;
    height: 34px;
    padding: 5px 10px;
    background: linear-gradient(90deg, rgba(233,107,125,1) 0%, rgba(224,112,171,1) 100%);
}
.box_lable1::before,.box_lable1::after{
    position: absolute;
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
}
.box_lable1::before {
    left: -25px;
    top: 0;
    border-width: 0 0 34px 25px;
    border-color: transparent transparent #e86a7d transparent;
}
.box_lable1::after {
    right: 0;
    top: -8px;
    border-width: 8px 0 0 8px;
    border-color: transparent transparent transparent #b72626;
}
.box_lable1 .arrow{
    position: relative;
    margin-right: 10px;
}
.box_lable1 .arrow::before{
    position: absolute;
    right: -10px;
    top: calc(50% - 5px);
    content: "";
    width: 5px;
    height: 9px;
    background: no-repeat center center/5px url(../images/arrow2_1.png);
}
.ribbon1{
    background: linear-gradient(90deg, rgba(239,232,217,0) 0%, rgba(239,232,217,1) 20%, rgba(239,232,217,1) 80%, rgba(239,232,217,0) 100%);
    padding: 5px 0;
    width: 80%;
    margin: 0 auto;
}
.ribbon1::before,.ribbon1::after{
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
}
.ribbon1 .ribbon1_inner{padding: var(--min3-10px) 5px;}

/* ページネーション */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pagination li{
    width: 40px;
    height: 40px;
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    border: solid 2px var(--color-gray1);
    font-size: 14px;
    font-weight: bold;
    transition: all 0.15s linear;
}
.pagination li.active {
    background: var(--color-pink1);
    color: #fff;
    border: none;
}
/* list */
.list_box3,.list_talk{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.list_box3 li{
    width: 100%;
    padding: var(--min4-10px);
}
.list2,.list3,.list4,.list_result{
    width: 100%;
    display: grid;
    place-items: center;
    gap: 10px;
}
.list4{grid-template-columns: 1fr 1fr;}
.list2,.list3,.list_result{grid-template-columns: 1fr;}
.list3 li,.list4 li{
    width: 100%;
    font-size: 0.9em;
    background: var(--color-gray2);
    padding: min(4%, 14px) min(4%, 8px);
    display: grid;
    place-items: center;
}
.list_result li {
    width: 100%;
    border: 1px solid #ddd;
    margin: 0 5px 10px;
    background: #fff;
    padding: var(--min3-10px);
}
.list_talk li{
    min-height: 60px;
    width: 100%;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    border: 2px solid #f0c6c8;
    flex-direction: row;
}
.list_talk li:nth-of-type(odd){margin-left: 5%;}
.list_talk li:nth-of-type(even){margin-right: 5%;}
.list_talk li .icon_box{
    flex: none;
    position: relative;
    background: #f0c7c8;
    width: 70px;
}
.list_talk li .icon_box::before{
    position: absolute;
    top: calc(50% - 24px);
    content: "";
    width: 48px;
    height: 48px;
    background: url(../images/icon_human.png);
    background-size: 48px;
    left: calc(((100% - 10px) / 2) - 24px);
}
.list_talk li .icon_box::after{
    position: absolute;
    top: calc(50% - 8px);
    right: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 10px 8px 0;
    border-color: transparent #fff transparent transparent;
}
.list_talk li .txt_box{
    text-align: left;
    display: grid;
    width: 100%;
    background: #fff;
    padding: var(--min4-10px) min(4%,20px);
    place-items: center flex-start;
    font-size: 0.9em;
}

/* use -> contact */
.list_dl{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.list_dl dt,.list_dl dd{width: 100%;}
.list_dl dt{padding: 10px 0 0 0;}
.list_dl dd{
    padding: 0 0 10px 0;
    border-bottom: 1px dotted var(--color-gray1);
}
.detail_list dl{
    border: 1px solid var(--color-gray1);
    justify-content: center;
    align-content: center;
}
.detail_list dl dt,.detail_list dl dd{
    width: 100%;
    padding: var(--min3-10px);
}
.detail_list dl dt{background: var(--color-gray3)}
.detail_list dl dd{border-bottom: 1px dotted var(--color-gray1);}

/*数字付きリスト*/
.num_list{
  counter-reset: num;
  list-style: none;
}
.num_list li{
    position:relative;
}
.num_list li::before {
    position: absolute;
    top: 0;
    left: 0;
    display:inline-block;
    counter-increment: num;
    content: counter(num);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0;
}
/*- layout -*/
/* use -> company */
.layout_box01 li .sec_box{
    position: relative;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
}
.layout_box01 li .sec_box [class*='pic']{
    position: relative;
    height: 400px;
    width: 90%;
    margin: 0 auto;
}
.layout_box01 li .sec_box .side_space{display: none;}
.layout_box01 li .sec_box .txt_outer{
    width: 100%;
    position: relative;
    z-index: 3;
    margin: -90px auto 0;
}
.layout_box01 li .sec_box .txt_inner{
    max-width: 800px;
    width: 85%;
    padding: min(4%, 30px);
    background: rgb(255 255 255 / 95%);
    margin: 0 auto;
    box-shadow: 0px 0px 15px 10px rgb(204 179 204 / 10%);
}
.layout_box01 li .sec_box .txt_inner .namebox{
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px dotted var(--color-gray1);
}
/* 02use -> advantage */
/* 03use ->  flow */
.layout_box04,.layout_box02 li,.layout_box03 li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.layout_box02 li .pic_area,.layout_box03 li .pic_area{
    height: 200px;
    background: #ddd;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.layout_box02 li:not(:last-of-type){margin-bottom: 80px;}
.layout_box03 li:not(:last-of-type){margin-bottom: 60px;}
.layout_box03 li .txt_area{margin: 20px auto 0;}

/* 04use ->  lightplan_work */
.layout_box04 li{
    padding: min(4%,20px);
    background: #ddd;
    margin: 0 0 var(--min4-15px);
    height: 170px;
    max-width: 500px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout_box04 li .l_box4_inner{
    background: rgb(255 255 255 / 90%);
    padding: 10px;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 65%;
    outline: 2px solid rgb(255 255 255 / 90%);
    outline-offset: 3px;
    font-weight: bold;
    color: var(--color-black1);
}
/* 2colum_use ->  /website */
.layout_2column{
    display: flex;
    flex-direction: column;
}
.f_box{
    display: flex;
    flex-wrap: wrap;
}
.border_box{
    padding: min(3%, 15px);
    border-top: 1px solid var(--color-black1);
    border-bottom: 1px solid var(--color-black1);
}
.border_box2{
    padding: min(3%, 15px);
    border: 1px solid #ddd;
}
.arrow_underbox{position: relative;}
.arrow_underbox::after{
    position: absolute;
    bottom: -20px;
    left: calc(50% - 20px);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: var(--color-beige1) transparent transparent transparent;
}
/*- accordion -*/
.ac_title{
    font-size: 1.2em;
    cursor:pointer;
    position: relative;
    color: #fff;
    background: #45578a;
    padding: 15px 50px 15px 30px;
}
.ac_title,.ac_box{
    margin: 0 auto;
}
.ac_title::after{
    position: absolute;
    right: 20px;
    top: calc(50% - 5px);
    content: "";
    background: no-repeat center center/18px url(../images/arrow1_1.png);
    width: 18px;
    height: 10px;
}
.ac_title.open::after{
    background: no-repeat center center/18px url(../images/arrow1_2.png);
}
.ac_box{
    display: none;
    border-top: 4px solid var(--color-black1);
}
/*- tab -*/
.tab {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.tab li {
    width: 96%;
    margin: 0 0 10px 0;
    padding: 10px 15px;
    border: 1px solid #c25799;
    color: #c25799;
    cursor: pointer;
    list-style: none;
    transition: .3s;
}
.tab li.active {
    color: #fff;
    background: var(--gradation5);
    cursor: auto;
}
.area ul {display: none;}
.area ul.show {display: block;}


.point1,.point2{
    position: relative;
    padding-left: 25px;
}
.point1::before{
    content:'';
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
    width: 20px;
    height: 20px;
    background: no-repeat center center/20px var(--iconlogo-svg);
}
.point2::before{
    content: '';
    position: absolute;
    top: calc(50% - 5px);
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 9px 0 9px;
    border-color: #98aecc transparent transparent transparent;
}
.point3{
    position: relative;
    color: #fff;
    background: var(--gradation-light);
    padding: 0 5px 0 10px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    font-size: 12px;
    margin-right: 20px;
}
.point3::after{
    content: '';
    position: absolute;
    top: calc(50% - 12px);
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 10px;
    border-color: transparent transparent transparent #f3668f;
}
/*table layout*/
/*table slide*/
.sec_scroll{
    overflow: auto;
}
.table_comparison{
    width: 600px;
    font-size: 0.9em;
    line-height: 1.4em;
    text-align: center;
    border: 2px solid #333;
    border-left: none;
    background-color:var(--color-gray1);
    border-collapse:separate;
    border-spacing:1px;
}
.table_comparison tr{border-bottom: 1px solid var(--color-gray1);}

.table_comparison tr th,.table_comparison tr td{
    vertical-align: middle;
    padding: 10px 5px;
    background: #fff;
}
.table_comparison tr th{background: #f8f8f8;}
.table_comparison tr .webad{font-weight: bold;}
.table_comparison tr th.webad{background: #e6559b;color: #fff;}
.table_comparison tr td.webad{background: #feffec;}
.table_comparison tr td p:not(.one){margin-top: 10px;}
.table_comparison tr.star td p span{color: #f4a640;}
.table_comparison tr .fixed1{position: sticky;width: 90px;left: 0;z-index: 10;}
.table_comparison tr .fixed2{position: sticky;left: 90px;z-index: 10;}

.table_comparison tr .fixed1:after,.table_comparison tr .fixed1:before,.table_comparison tr .fixed2:before{
    content: '';
    position: absolute;
    top: 0;
    z-index: 2;
    background: #333;
    height: 100%;
}
.table_comparison tr .fixed1:after{
    left: 0;
    width: 2px;
    background: #333;
}
.table_comparison tr .fixed1:before,.table_comparison tr .fixed2:before{
    right: 0;
    width: 1px;
    background: var(--color-gray1);
}
.table_comparison tr .fixed:last-of-type::before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}
.table_support{display: none;}

/* move/animation/other */
.hover_act1{opacity: 1;}
.hover_act1:hover{opacity: 0.5;}
.hover_act2{transition-duration: 0.5s;}
.hover_act2:hover{
    transform: translateY(-10px);
    transition-duration: 0.5s;
}
.hover_line{
    position: relative;
}
.hover_line::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--gradation1);
    opacity: 0.5;
    transform: scale(0, 1);
    transform-origin: left;
    transition: 0.4s;
}
.hover_line:hover::before{
    transform: scale(1);
}

/*下から*/
.fadein1{opacity: 0;}
/*.fadein1.on{animation: fadein1 1.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}*/
.fadein1.on{animation-name:fadein1;animation-duration:1.4s;animation-fill-mode:forwards;}
@keyframes fadein1 {
    0% {transform: translateY(80px);opacity: 0;}
    100% {transform: translateY(0);opacity: 1;}
}

/*じわっと*/
.fadein2{opacity: 0;filter: blur(10px);}
/*.fadein2.on {animation: fadein2 0.8s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0s both;}
*/
.fadein2.on{animation-name:fadein2;animation-duration:0.8s;animation-fill-mode:forwards;}
@keyframes fadein2 {
    0% {filter: blur(10px);opacity: 0;}
    100% {transform: scale(1);filter: blur(0px);opacity: 1;}
}

.lazy_fade {
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.lazy_fade.lazyloaded {opacity: 1;}

/*じわっと広がる main_txt*/
.focus-in{-webkit-animation:focus-in 2s cubic-bezier(.25,.46,.45,.94) 0s both;animation:focus-in 2s cubic-bezier(.25,.46,.45,.94) 0s both}
@keyframes focus-in {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-800px);
        transform: translateZ(-800px);
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

.del_line{text-decoration-line: line-through;text-decoration-style:double;text-decoration-color: #d63065;}
.indent_txt p{padding-left:0.8em;text-indent:-0.8em;}

.check_img{position: relative;padding-left: 40px;}
.check_img::before{
    position: absolute;
    top: calc(50% - 10px);
    left: 5px;
    content: "";
    background: url(../images/icon_check.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
}

/*--------
header
---------*/
#header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 0 min(3%,40px);
    background: transparent;
}
#header.fixed{
    background: rgb(255 255 255 / 90%);
}
#header .header_logo{
    max-width: 200px;
}
#header .header_inner{
    position: relative;
    height: 60px;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header .header_inner .drawer_box{
    position: absolute;
    right: 0px;
    top: calc(50% - 14px);
}
#header .header_inner .header_navbox{padding-right: 50px;}
#header .header_inner .header_navbox ul{display: none;}
#header .header_inner .header_navbox .btn3{display: none;}
/*drawer_set*/
.button_area {
    position: relative;
    top: 5%;
    right: 2%;
    height: 27px;
    width: 35px;
    cursor: pointer;
    z-index: 10001;
    transition: opacity 0.25s ease;
}
.button_area:hover {
    opacity: 0.7;
}
.button_area.active .top {
    transform: translateY(10px) translateX(0) rotate(45deg);
}
.button_area.active .middle {
    opacity: 0;
}
.button_area.active .bottom {
    transform: translateY(-10px) translateX(0) rotate(-45deg);
}
.button_area span {
    background: #846d92;
    border: none;
    height: 2px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    transition: all 0.35s ease;
    cursor: pointer;
}
.button_area span:nth-of-type(2) {top: 10px;}
.button_area span:nth-of-type(3) {top: 20px;}

.overlay {
    position: fixed;
    /*background: rgb(252 253 253 / 98%);*/
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s, height 0.35s;
    overflow: hidden;
}
.overlay.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow-y: scroll;
    z-index: 10000;
}
/*drawer_slide_animation*/
.overlay.open li,.overlay.open .d_contact_box{
    animation: fadeInRight 0.5s ease forwards;
    animation-delay: 0.35s;
}
.drawer_menu ul li,.d_contact_box{
    position: relative;/*消さない*/
    opacity: 0;
}
@keyframes fadeInRight {0% {opacity: 0;left: 20%;}100% {opacity: 1;left: 0;}}

/*drawer menu*/
.drawer_menu{
    font-family: 'Josefin Sans','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo','ＭＳ Ｐゴシック',  sans-serif;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.drawer_menu .bg_black,.drawer_menu .bg_white{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.drawer_menu .bg_black{
    padding: 10vh 10% 40px;
    background: rgb(51 51 51 / 95%);
}
.drawer_menu .bg_white{
    padding: 40px 10% 10vh;
    background: rgb(255 255 255 / 95%);
}

.drawer_menu .bg_black.title_vertical::after{content: "MAIN MENU";}
.drawer_menu .bg_white.title_vertical::before{height: 175px;}
.drawer_menu .bg_white.title_vertical::after{content: "CONTENTS MENU";}
.drawer_menu ul.drawer_main_list li{
    line-height: 1.2em;
    font-size:max(18px, min(5vw,18px)); /*safari,IE*/
    font-size: min(5vw, 18px);
    margin-bottom: 10px;
}
.drawer_menu .bg_white ul:nth-of-type(2){
    margin-top: 20px;
}
.drawer_menu .bg_black ul.drawer_main_list li{ border-bottom: 1px dotted #676767;}
.drawer_menu .bg_white ul.drawer_main_list li:not(.no_border){border-bottom: 1px dotted #ccc;}

.drawer_menu ul li a {padding: 15px 10px 5px;height: auto;}
.drawer_menu .bg_black ul li a{color: #fff;}
.drawer_menu ul.drawer_main_list li .child_linkbox{margin-bottom: 20px;}
.drawer_menu ul.drawer_main_list li .child_linkbox > div{
    position: relative;
    padding-left: 20px;
    font-size: 0.8em;
}
.drawer_menu ul.drawer_main_list li .child_linkbox > div::before{
    z-index: 1;
    position: absolute;
    top: calc(50% - (10px - 8px));
    left: 5px;
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid #a86eb9;
    border-top: 1px solid #a86eb9;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.drawer_menu ul li a.btn7{font-size: 16px;padding: 18px 5px 15px;margin: 30px 0 20px;}

/*--------
footer
---------*/
footer{
    background: #fff;
    border-bottom: 8px solid #5e4bc5;
    border-image: var(--gradation3);
    border-image-slice: 1;
}

#footer_contact{
    background: var(--color-black1);
    color: #fff;
    padding: min(12%, 80px) 0;
}
#footer_contact .inner_f_contact{
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}
#footer_contact .inner_f_contact .footer_title{max-width: 480px;}
#footer_contact .inner_f_contact .footer_title .title_main{line-height: 1.2em;}

/*footer menu*/

#footer_contact .f_box{
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#footer_contact .f_box .f_inbox{
    max-width: 420px;
    width: calc(100% - 40px);
    height: 150px;
    border: 1px solid #707478;
    margin: 5px;
    padding: 20px var(--min4-10px);
    display: grid;
    place-items: center;
}
#footer_contact .f_box .f_inbox h3{
    font-size: min(5vw, 16px);
    font-weight: bold;
    line-height: 1.2em;
}
#footer_contact .f_box .f_inbox p{
    font-size: min(5vw, 11px);
}
#footer_contact .f_box .f_inbox .f_tel{
    font-size: min(9vw, 24px);
    color: #fff;
    font-weight: 300;
    line-height: 1em;
}
#footer_contact .f_box .f_inbox .f_tel:hover{
    color: #bad2ec;
}
#footer_info{padding: 30px 0;}
#footer_info .f_list_box{display: none;}

#footer_info .f_logo_box{
    width: 100%;
}
#footer_info .f_logo_box .f_access{
    font-size: 0.8em;
    color: #989898;
}
#footer_info .f_logo_box .f_access p:not(.copyright){
    border-left: 1px solid #ddd;
    padding: 10px 10px 10px 20px;
    margin-bottom: 15px;
}
#footer_info .f_logo_box .f_logo{
    max-width: 200px;
    height: auto;
}
#footer_info .f_logo_box .img_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
}
#footer_info .f_logo_box .f_img_sa {
    width: 80px;
    height: auto;
}
/*--------
index
---------*/

#mainvisual{
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mainvisual canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
#mainvisual.bg_pc{
    background: url(../images/mainvisual.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 0;
    background-size: cover;
    background-attachment: fixed;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    animation: fadeIn 2s ease 0s 1 normal;
}
#mainvisual.bg_ios{position: relative;}

#mainvisual.bg_ios:before{
    content: "";
    width: 100vw;
    height: 100vh;
    background: url(../images/mainvisual.jpg);
    background-size: cover;
    background-position: center;
    background-position-y: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    animation: fadeIn 2s ease 0s 1 normal;
}
#mainvisual .mv_txtbg{
    text-align: center;
    background: rgb(255 255 255 / 80%);
    padding: min(7%,30px) min(7%,35px);
    width: calc(100% - 60px);
    max-width: fit-content;
    position: relative;
    z-index: 5;
    transition: all .3s;
    transition-delay: .7s;
}
#mainvisual .mv_maintxt svg{width: 100%;max-width: 340px;}
#mainvisual .mv_subtxt.focus-in{
    animation-delay: 4s;
    margin-top: 5px;
}

#mainvisual .mainvisual_eventarea{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../images/pat1_1.png),var(--gradation5);
    background-size: auto,100%;
    background-position: center center;
    padding: 10px 0;
    text-align: center;
    z-index: 10;
}
#mainvisual .mainvisual_eventarea .mainvisual_event_img{
    width: 96%;
    max-width: 1100px;
}
.top_bg{background: #fff;}
/*-- about --*/
#top_about .f_box{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#top_about .f_box .abont_txtbox{
    max-width: 700px;
    text-align: left;
    margin: 0 0 20px;
}
#top_about .top_service_img{max-width: 350px;margin-bottom: 20px;}


/*-- reason --*/
#top_reason .top_reason_title{
    max-width: 740px;
    margin-bottom: min(6%, 35px);
}
#top_reason .reason_list{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px 10px;
}
#top_reason .reason_list li{
    position: relative;
    background: #fff;
    box-shadow: 0px 0px 5px 2px rgb(160 124 183 / 10%);
}
#top_reason .reason_list li:nth-of-type(1){background: no-repeat center top/cover url(../images/top_reason_01.jpg);}
#top_reason .reason_list li:nth-of-type(2){background: no-repeat center top/cover url(../images/top_reason_02.jpg);}
#top_reason .reason_list li:nth-of-type(3){background: no-repeat center top/cover url(../images/top_reason_03.jpg);}
#top_reason .reason_list li:nth-of-type(4){background: no-repeat center top/cover url(../images/top_reason_05.jpg);}
#top_reason .reason_list li:nth-of-type(5){background: no-repeat center top/cover url(../images/top_reason_06.jpg);}
#top_reason .reason_list li:nth-of-type(6){background: no-repeat center top/cover url(../images/top_reason_06.jpg);}
#top_reason .reason_list li .reason_list_label{
    position: absolute;
    bottom: -10px;
    right: -8px;
    background: #ccc;
}
#top_reason .reason_list li .reason_li_title{
    color: #2b4d6f;
    font-weight: bold;
    /*font-size:max(18px, min(2vw,20px));*/ /*safari,IE*/
    /*font-size: clamp(18px,2vw,20px);*/
    font-size: 17px;
    line-height: 1.6em;
    margin-bottom: 5px;
}
#top_reason .reason_list li .reason_txtbox{
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 15%, rgba(255,255,255,1) 25%);
    padding: 40px var(--min3-10px) 25px;
    margin-top: 120px;
}

/*-- evaluation --*/
#top_evaluation{
    background: url(../images/bg_deco1_1.png),url(../images/bg_deco1_2.png);
    background-size: 220px;
    background-position: left top,right bottom;
    background-repeat: no-repeat;
}
#top_evaluation .top_evaluation_title{
    line-height: 2.2em;
    margin: 0 auto;
    font-size:max(14px, min(3vw,18px)); /*safari,IE*/
    font-size: clamp(14px,3vw,18px);
}
#top_evaluation .top_evaluation_title .font_big{
    color: #3c3c3c;
    background: -webkit-linear-gradient(90deg, #3c3c3c, #676460);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8em;
}
#top_evaluation .top_evaluation_pointlist{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 20px 0 40px;
}
#top_evaluation .top_evaluation_pointlist li{
    width: 50%;
    padding: 0 min(2%,10px);
    text-align: center;
}
#top_evaluation .top_evaluation_point{
    max-width: 270px;
}

/*-- top_works --*/
#top_work .top_work_title span{font-size: 0.5em;}

/*-- topslide --*/
.work_slidebox {
    display: flex;
    align-items: center;
    margin: auto;
    overflow: hidden;
    position: relative;
}
.work_slidebox::before, .work_slidebox::after {
    background: linear-gradient(to right, #f4f7f8 0%, rgba(244, 247, 248, 0) 100%);
    content: "";
    height: 125px;
    width: 100px;
    position: absolute;
    z-index: 2;
}
.work_slidebox::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.work_slidebox::before {
    left: 0;
    top: 0;
}
.work_slidebox ul{display: flex;}
.work_slidebox ul:first-child {animation: workscroll 50s -25s linear infinite;}
.work_slidebox ul:last-child {animation: workscroll2 50s linear infinite;}
.work_slidebox:hover ul {animation-play-state: paused;}
.work_slidebox ul li{padding: 0 10px;}
.work_slidebox ul li img{width: 200px;}
@keyframes workscroll {0% {transform: translateX(100%);}to {transform: translateX(-100%);}}
@keyframes workscroll2 {0% {transform: translateX(0);}to {transform: translateX(-200%);}}


/*-- top_colution --*/
.top_colution_title{
    max-width: 580px;
    margin-bottom: min(6%, 35px);
}
.colution_list{
    display: grid;
    gap: 10px;
    margin-top: 20px;
}
.colution_list li {
    position: relative;
    border: 1px solid #284c71;
    border-left: 4px solid #284c71;
    background: #fff;
}
.colution_list li a{
    padding: 10px 15px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.colution_list li::after {
    position: absolute;
    right: 2px;
    bottom: 2px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #d03f85 transparent;
    pointer-events: none;
}
.colution_img{max-width: 345px;}

/*-- top_contentlist --*/
#top_contentlist .btn3{max-width: 500px;}
#top_contentlist .layout_box01 li:not(:last-of-type){margin-bottom: 50px;}

#top_contentlist .layout_box01 li .sec_box{position: relative;}
#top_contentlist .layout_box01 li .sec_box::after{position: absolute;top: -25px;right: -10px;font-size: 40px;letter-spacing: 0.2em;color: rgb(189 194 222 / 30%);line-height: 1em;font-family: 'Josefin Sans';}
/* #top_contentlist .layout_box01 li .sec_box.contentlist_news::after{content: "NEWS";} */
#top_contentlist .layout_box01 li .sec_box.contentlist_recruit::after{content: "RECRUIT";}
#top_contentlist .layout_box01 li .sec_box.contentlist_company::after{content: "COMPANY";}

#top_contentlist .layout_box01 li .sec_box [class*='pic']{height: 250px;}
/* #top_contentlist .layout_box01 li .sec_box .news_pic{background: no-repeat center bottom/cover url(../images/top_contentlist_news.jpg);} */
#top_contentlist .layout_box01 li .sec_box .recruit_pic{background: no-repeat center top/cover url(../images/top_contentlist_recruit.jpg);}
#top_contentlist .layout_box01 li .sec_box .company_pic{background: no-repeat center center/cover url(../images/top_contentlist_company.jpg);}
#top_contentlist .layout_box01 li .sec_box .txt_outer{margin: -60px auto 0;}

/* #top_contentlist .contentlist_news .title_mini:before{background: var(--color-purple1);} */
#top_contentlist .contentlist_recruit .title_mini:before{background: var(--color-blue2);}
#top_contentlist .contentlist_company .title_mini:before{background: var(--color-pink1);}

/*-- news --*/
#top_news .top_news_title span,
#news .top_news_title span {
    font-size: 0.5em;
}
#top_news ul.top_news_list,
#news ul.top_news_list{
    margin-bottom: 40px;
    display: grid;
    gap: 15px min(4%, 30px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#news ul.top_news_list{
    margin-bottom: 40px;
}
#top_news ul.top_news_list li a div.news_thumbnail,
#news ul.top_news_list li div.news_thumbnail{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
}
#top_news ul.top_news_list li a div.news_thumbnail img,
#news ul.top_news_list li div.news_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
#top_news ul.top_news_list li a div.news_txt,
#news ul.top_news_list li div.news_txt{
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    align-items: center;
    margin-bottom: 2px;
}
#top_news .top_news_list li h3.news_title,
#news .top_news_list li h3.news_title{
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
    text-align: left;
    font-size: 13px;
}
#top_news .top_news_list li .tag_1,
#news .top_news_list li .tag_1{
    background: var(--color-pink1);color: #fff;display: inline-block;padding: 0 8px;font-size: 10px;line-height: 21px;}
    #top_news .top_news_list li .tag_2,
    #news .top_news_list li .tag_2{
        background: var(--color-blue2);color: #fff;display: inline-block;padding: 0 8px;font-size: 10px;line-height: 21px;}
        #top_news .top_news_list li .tag_3,
        #news .top_news_list li .tag_3{
            background: var(--color-purple1);color: #fff;display: inline-block;padding: 0 8px;font-size: 10px;line-height: 21px;}
/*-- news一覧 --*/
#news .category_title_news {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(18px,3vw,30px);
    letter-spacing: -0.01em;
    text-align: center;
    margin-bottom: 10px;
}
#news .category_box{
    width: 100%;
    margin: 0 auto;
    padding: 15px 20px 30px;
    margin-bottom: clamp(30px, 6vw, 60px);
}
#news form{
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
#news form label {
    cursor: pointer;
    background: #fff;
    border: 1px solid #636460;
    border-radius: 40px;
    width: calc((100% / 2) - 10px);
    padding: 4px 8px;
}
#news form input{
    display: none;
}
#news form input:checked + label {
    background: #636460;
    color: #fff;
}
/*-- news詳細 --*/
#news ul.top_news_list.news_detail{
    width: 100%;
    display: block;
}
#news ul.top_news_list.news_detail li div.news_txt{
    margin-bottom: 10px;
    font-size: 13px;
}
#news .top_news_list.news_detail li h3.news_title{
    font-size: clamp(16px,3vw,24px);
    font-weight: bold;
}
#news a.btn3.center{
    margin: 0 auto;
    display: block;
}
/* #top_contentlist .contentlist_news .top_news_list li{
    position: relative;
    border-bottom: 1px solid #ddd;
    padding: 8px 25px 8px 0;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
#top_contentlist .contentlist_news .top_news_list li::after{
    z-index: 1;
    position: absolute;
    content: "";
    top: calc(50% - 7px);
    right: 5px;
    width: 40px;
    height: 7px;
    background: url(../images/arrow3.png);
    background-size: 40px;
    background-repeat: no-repeat;

}
#top_contentlist .contentlist_news .top_news_list li:hover::after{right: 0px;}
#top_contentlist .contentlist_news .top_news_list li .tag_1{
    background: var(--color-pink1);color: #fff;display: inline-block;padding: 0 10px;margin: 0 5px;font-size: 12px;}
#top_contentlist .contentlist_news .top_news_list li .tag_2{
    background: var(--color-blue2);color: #fff;display: inline-block;padding: 0 10px;margin: 0 5px;font-size: 12px;}
#top_contentlist .contentlist_news .top_news_list li .tag_3{
    background: var(--color-purple1);color: #fff;display: inline-block;padding: 0 10px;margin: 0 5px;font-size: 12px;}
#top_contentlist .contentlist_news .top_news_list li p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} */

/*--------
other_common
---------*/
.other_head,.other_head2,.other_head_sub{
    display: grid;
    margin-top: 60px;
    height: 100px;
}
.other_head{place-items: center flex-start;color: #fff;background: #4f555d;}
.other_head.color_pagename{color: #bfb1c8;}
#corporate .other_head_sub,.other_head2,.other_head_sub{place-items: center;}
.other_head2{
    background: #fff;
    color: #6b5579;
}
.head_pagename{
    line-height: 0.9em;
    font-family: 'Josefin Sans';
    font-size: max(40px, min(9vw,80px));
    font-size: clamp(40px,9vw,80px);
}
.other_head .title_mini,.other_head2 .title_mini{
    font-size:max(12px, min(3vw,14px)); /*safari,IE*/
    font-size: clamp(12px, 3vw,14px);
    color: #b7babe;
    padding-left: calc(5vw + 10px);
    letter-spacing: 5px;
}

.other_head .title_mini::before,.other_head2 .title_mini::before{
    top: calc(50% - 1px);
    width: 5vw;
    height: 1px;
    background: var(--gradation1);
}

.other_head2 .title_mini{color: #6b5579;}
.other_head_sub{color: #6c517e;}
#privacy .other_head .title_mini,#sitemap .other_head .title_mini{color: #beacc6;}

#document .title_main{line-height: 1.2em;}

/*画像未設定*/

#advantage .other_head{background: no-repeat center center/cover url(../images/other_head_advantage.jpg);}
:is(#plan, #lightplan, #standardplan, #platinumplan, #mini) .other_head{background: no-repeat center center/cover url(../images/other_head_plan.jpg);}
#support .other_head{background: no-repeat center center/cover url(../images/other_head_support.jpg);}
#works .other_head{background: no-repeat center center/cover url(../images/other_head_works.jpg);}
#flow .other_head{background: no-repeat center center/cover url(../images/other_head_flow.jpg);}
#company .other_head{background: no-repeat center center/cover url(../images/other_head_company.jpg);}
#business .other_head{background: no-repeat center center/cover url(../images/other_head_business.jpg);}
#websystem .other_head{background: no-repeat center center/cover url(../images/other_head_websystem.jpg);}
#movie .other_head{background: no-repeat center center/cover url(../images/other_head_movie.jpg);}
#news .other_head{background: no-repeat center center/cover url(../images/other_head_news.jpg);}
#contact .other_head{background: no-repeat center center/cover url(../images/other_head_contact.jpg);}
#website .other_head{background: no-repeat center center/cover url(../images/other_head_website.jpg);}
#sitemap .other_head{background: no-repeat center center/cover url(../images/other_head_sitemap.jpg);}
#privacy .other_head{background: no-repeat center center/cover url(../images/other_head_privacy.jpg);}
#interview .other_head{background: no-repeat center center/cover url(../images/other_head_interview.jpg);}


#err .other_head_sub{background: linear-gradient(90deg, rgba(0,166,255,0.04) 0%, rgba(0,55,255,0.04) 50%, rgba(4,0,255,0.04) 100%),url(../images/other_head_common.jpg);background-position: center;background-size: 100%,cover; height: 180px;}
#document .other_head_sub{background: linear-gradient(90deg, rgba(0,166,255,0.04) 0%, rgba(0,55,255,0.04) 50%, rgba(4,0,255,0.04) 100%),url(../images/other_head_corporate.jpg);background-position: center;background-size: 100%,cover;display: grid;place-items: center;text-align: center;height: 180px;}

#corporate .other_head_sub{padding: var(--min5-20px) 0 var(--min4-15px);height: auto;background: linear-gradient(90deg, rgba(0,166,255,0.04) 0%, rgba(0,55,255,0.04) 50%, rgba(4,0,255,0.04) 100%),url(../images/other_head_corporate.jpg);background-position: center;background-size: 100%,cover;}
#corporate .other_head_sub .title_main{line-height: 1em;}

/*- website/xxx -*/
.website_head{
    margin-top: 60px;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%),url(../images/website_head.jpg);background-position: center;background-size: 100%,cover;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: flex-end;
}
.website_head .website_top_title{
    width: 100%;
    text-align: center;
    background: rgb(0 0 0 / 80%);
    color: #fff;
    padding: 20px 5px;
    font-size: min(7vw,32px);
    font-weight: bold;
    line-height: 1.4em;
}
/*--------
advantage
---------*/
#advantage .layout_box02 {margin-top: 20px;}
#advantage .layout_box02 li{background: #fff;}
#advantage .layout_box02 li .title_sub{margin-bottom: min(6%, 30px);margin-top: 20px;}
#advantage .layout_box02 li .btn3{max-width: 500px;}

#advantage .layout_box02 li:nth-of-type(1) .pic_area{background: no-repeat center center/cover url(../images/advantage_img01.jpg);}
#advantage .layout_box02 li:nth-of-type(2) .pic_area{background: no-repeat center center/cover url(../images/advantage_img02.jpg);}
#advantage .layout_box02 li:nth-of-type(3) .pic_area{background: no-repeat center center/cover url(../images/advantage_img03.jpg);}
#advantage .layout_box02 li:nth-of-type(4) .pic_area{background: no-repeat center 35%/cover url(../images/advantage_img05.jpg);}
#advantage .layout_box02 li:nth-of-type(5) .pic_area{background: no-repeat center center/cover url(../images/advantage_img06.jpg);}
#advantage .layout_box02 li:nth-of-type(6) .pic_area{background: no-repeat center 35%/cover url(../images/advantage_img06.jpg);}

#advantage .layout_box02 li .pic_area::after {
    font-family: 'Josefin Sans';
    position: absolute;
    bottom: -20px;
    left: 0;
    color: rgb(174 187 207 / 50%);
    font-size: 140px;
    line-height: 0.8em;
}
#advantage .layout_box02 li:nth-of-type(1) .pic_area::after{content: "01";}
#advantage .layout_box02 li:nth-of-type(2) .pic_area::after{content: "02";}
#advantage .layout_box02 li:nth-of-type(3) .pic_area::after{content: "03";}
#advantage .layout_box02 li:nth-of-type(4) .pic_area::after{content: "04";}
#advantage .layout_box02 li:nth-of-type(5) .pic_area::after{content: "05";}
#advantage .layout_box02 li:nth-of-type(6) .pic_area::after{content: "06";}
#advantage .layout_box02 .txt_area{padding: min(4%,30px);}

#advantage  .under_box{margin-top:60px;}

/*--------
work
---------*/
.list_works{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.list_works li{
    position: relative;
    width: calc((100% / 2 ) - 20px);
    margin: 0 10px 15px;
    padding: 5px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0px 0px 16px 2px rgb(14 88 117 / 10%);
}
.list_works li[class^="tag"]::before{
    display: none; /* ←←←← アイコンを表示させることになったらココ消してください。   */
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8em;
    line-height: 1em;
}
.list_works li.tag_right::before{content: "ライトプラン";background: var(--gradation-light);}
.list_works li.tag_standard::before{content: "スタンダードプラン";background: var(--gradation-standard);}
.list_works li.tag_platinum::before{content: "プラチナプラン";background: var(--gradation-platinum);}

.list_works li::after{
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent var(--color-gray5) transparent;
}
.list_works li .site_thum{width: 100%; height: auto; aspect-ratio: 70/44; object-fit: cover; object-position: top;}
.list_works .site_result_txt{font-size: 0.9em;padding: 5px var(--min3-10px) 0;}

/* 新規追加 */
/* title */
.title_works{
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(35px,8vw,60px);
    text-align: center;
    letter-spacing: -0.01em;
}
#new_works{
    padding-top: 0;
}
#new_works .title_works{
    color: var(--color-purple2);
    background: var(--gradation7); /* カスタムプロパティ追加 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: min(10%, 80px);
}
.other_works .title_works{
    margin: clamp(-120px,-16vw,-70px) 0 clamp(30px,6vw,60px);
}
#new_works .new_works_list_box li{
    margin-bottom: min(10%, 80px);
    box-shadow: 0px 0px 16px 2px rgb(14 88 117 / 10%);
}
#works li img,#interview li img{
    height: auto;
    /*    margin-bottom: min(5%,20px);*/
    aspect-ratio: 4/2.5;
    object-fit: cover;
}
#new_works .new_works_list_box li:nth-child(n + 4){
    display: none;
}
#new_works .new_works_list_box li .g_box div:not(.pic,.read_more){
    padding: var(--min5-20px);
}

#works .name {
    font-size: clamp(14px,2vw,18px);
    font-weight: bold;
    margin-bottom: min(5%,10px);
}
#works .name span{
    font-size: clamp(18px,3vw,30px);
}
:is(#all_work,#interview) .name{
    font-size: clamp(12px,2vw,14px);
    margin-bottom: min(5%,10px);
    margin-top: var(--min3-10px);
    font-weight: bold;
}
:is(#all_work,#interview) .name span{
    font-size: clamp(13px,3vw,16px);
}
:is(#works,#interview) .word{
    font-size: clamp(12px,2vw,14px);
    color: #9d9ea7;
    /*    font-weight: bold;*/
    margin-bottom: min(5%,10px);
}
#all_work .word{
    font-size: clamp(12px,2vw,12px);
}
:is(#works,#interview) .read_more{
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(10px,2vw,13px);
    letter-spacing: 0;
    border-bottom: 1px solid var(--color-pink1);
    border-image: var(--gradation8);
    border-image-slice: 1;
    background: url(../images/icon_more.png) no-repeat;
    background-position: 1px;
    background-size: clamp(16px,2.8vw,18px) auto;
    padding: 0 3px 3px clamp(25px,4.5vw,28px);
    margin: auto;
}
#new_works .read_more{
    margin: 0 auto 0 0;
    font-size: clamp(12px,2vw,16px);
    background-size: clamp(18px,2.8vw,23px) auto;
    padding: 0 3px 3px clamp(28px,4.5vw,35px);
}
#all_work .category_box{
    width: calc(100% - 20px);
    margin: 0 10px;
    padding: 15px 20px 30px;
    background: #fff;
    margin-bottom: clamp(30px,6vw,60px);
}
#all_work .category_box h5{
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(18px,3vw,30px);
    letter-spacing: -0.01em;
    text-align: center;
}
#all_work .category_box ul li a{
    display: block;
    border-bottom: solid 1px var(--color-gray6);
    padding: 12px 10px;
    position: relative;
}
#all_work .category_box ul li a::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 6px;
    height: 6px;
    margin: auto;
    border-top: 1px solid var(--color-gray1);
    border-right: 1px solid var(--color-gray1);
    transform: rotate(45deg);
    transition: 0.3s ease-in-out;
}
#all_work .category_box ul li a.check{
    color: var(--color-pink1);
}
#all_work .category_box ul li a.check::before{
    border-top: 1px solid var(--color-pink1);
    border-right: 1px solid var(--color-pink1);
}
#all_work .title_works{
    margin: clamp(-120px,-16vw,-65px) 0 clamp(30px,6vw,60px);
}
#all_work img{
    height: auto;
}
.works_list_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 520px;
    margin: 0 auto;
}
.works_list_box li{
    position: relative;
    width: calc(100% - 40px);
    margin: 0 10px 15px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 0px 16px 2px rgb(14 88 117 / 10%);
}
.works_list_box li.is-hidden{
    display: none;
    opacity: 0;
}
.works_list_box li.is-show{
    animation: fadeIn 1s ease;
}
@keyframes fadeIn {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.works_list_box li > *{
    display: block;
    height: 100%;
    padding: 10px 10px 20px;
}
.more_box{
    width: calc(100% - 20px);
    max-width: 500px;
    text-align: center;
    margin: 20px auto 0;
    padding: 2px;
    position: relative;
    background: var(--gradation-btn8);
    border-radius: 60px;
    line-height: 1.4;
}
.more_box button{
    display: block;
    min-height: 40px;
    color: var(--color-pink1);
    padding: min(4%,20px);
    background: #fff;
    border-radius: 58px;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 14px;
    background: #f6f6fa;
    width: 100%;
    cursor:pointer
}
.more_box img{
    width: 14px;
    height: 14px;
    margin: 0 8px 3px 0;
}
#interview .detail_works_main{
    margin-bottom: min(5%, 80px);
}
#interview .detail_works_main > div[class^="inner"]{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#interview .detail_works_main .name {
    font-size: clamp(14px,3vw,24px);
    font-weight: bold;
    padding-left: 2.4ex;
    position: relative;
    margin-bottom: min(3%, 25px);
}
#interview .detail_works_main .txt {
    color: #9d9ea7;
    font-weight: bold;
    font-size: clamp(12px,2vw,18px);
    /*    margin-bottom: min(8%, 80px);*/
}
#interview .detail_works_main .name span {
    font-size: clamp(20px,5vw,40px);
    word-break: break-all;
    line-height: 1em;
}
#interview .detail_works_main .name::before,
.detail_works_contents .sub_title_works::before{
    content: '';
    display: block;
    width: min(1.5%,5px);
    height: auto;
    position: absolute;
    top: 0;
    bottom: 5px;
    left: 5px;
    margin: auto;
    background: var(--gradation7-2);
    transform: skew(-18deg);
}
.detail_works_siteimg{
    margin-bottom: min(12%, 120px);
}
.detail_margin{
    margin-bottom: min(12%, 90px);
}
#interview .detail_works_siteimg .f_box{
    justify-content: space-around;
    gap: 3%;
}
#interview .detail_works_siteimg .f_box picture{
    width: calc((100% - 3%)/2);
}
#interview .detail_works_siteimg .siteimg_txt{
    margin-bottom: 60px;
    background: var(--color-gray4);
    font-size: clamp(12px,2vw,14px);
}
#interview .detail_works_contents {
    padding: min(10%, 80px);
    position: relative;
}
#interview .detail_works_contents::after {
    position: absolute;
    bottom: clamp(-60px,-6vw,-20px);
    left: 16%;
    content: '';
    display: block;
    width: 1px;
    height: min(12vw,120px);
    background: #e7d0da;
}
#interview .in_box_area .detail_works_contents:last-of-type::after{
    display:none;
}
#interview .detail_works_contents [class^="title_works"] {
    font-family: 'Josefin Sans';
    font-weight: 300;
    color: var(--color-gray6);
    font-size: min(8vw,60px);
    line-height: 1;
    position: absolute;
}
#interview .detail_works_contents .title_works{
    top: 0;
    left: 0;
}
#interview .detail_works_contents .title_works2{
    bottom: 0;
    right: -2px;
    line-height: 0.5em;
}

#interview .detail_works_contents .sub_title_works {
    font-size: clamp(16px,3vw,24px);
    font-weight: bold;
    margin-bottom: clamp(20px, 4%, 40px);
    position: relative;
    z-index: 1;
    padding-left: 2.4ex;
    line-height: 1.4em;
}
#interview .detail_works_contents.interview [class^='name'] {
    display: inline-block;
    min-width: 55px;
    text-align: center;
    font-weight: bold;
    padding: 0 10px;
    margin-right: 15px;
    position: relative;
    bottom: 6px;
}
#interview .detail_works_contents.interview [class^='name']::after {
    content: '';
    display: block;
    width: 100%;
    height: 12px;
    background: var(--color-gray6);
    border-radius: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
#interview .detail_works_contents.interview .name1 {color: var(--color-purple2);}
#interview .detail_works_contents.interview .name2 {color: var(--color-purple3);}
#interview .detail_works_contents.interview .pic {
    max-width: 700px;
    text-align: center;
    margin: min(6%, 60px) auto;
}
#interview .detail_works_contents.interview .pic figcaption {
    font-weight: bold;
    margin-top: 10px;
}
#interview .detail_works_contents.interview{
    padding-top: 0;
}
#interview .swiper-container{
    overflow: hidden;
}
#interview .swiper-pagination{
    position: static;
}
#interview .detail_works_contents.gallery{
    margin-bottom: 30px;
}
#interview .detail_works_contents.gallery .swiper-pagination-bullet {
    width: 20px;
    height: 2px;
    border-radius: inherit;
    background: var(--color-gray6);
    opacity: 1;
    margin: 0 10px;
}
#interview .detail_works_contents.gallery .swiper-pagination-bullet-active {
    background: var(--color-pink1);
}
#interview .detail_works_contents.gallery .detail_works_sp {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0 10px;
    max-width: 700px;
    margin: clamp(40px,7vw,140px) auto 0;
}
#interview img{
    height: auto;
}
#interview .detail_other_work .works_list_box{
    justify-content: center;
    align-content: center;
}

/*--------
plan
---------*/
/*- plan common plan top-*/
.plan_commonbox,.plan_bnrbox a{color: #fefefe;text-align: center;}
.plan_commonbox .light_bg{background: var(--gradation-light);}
.plan_commonbox .standard_bg{background: var(--gradation-standard);}
.plan_commonbox .platinum_bg{background: var(--gradation-platinum);}
.plan_commonbox .mini_bg{background: var(--color-miniplan);}

.plan_commonbox .light_bg .center_area{color: var(--color-lightplan);}
.plan_commonbox .standard_bg .center_area{color: var(--color-standerdplan);}
.plan_commonbox .platinum_bg .center_area{color: var(--color-platinumplan);}
.plan_commonbox .mini_bg .center_area{color: var(--color-miniplan);}
.plan_commonbox .plan_name{font-size: min(7vw,24px);}
.plan_commonbox .center_area{max-width: 360px;width: 100%;background: #fefefe;padding: var(--min4-10px) min(3%,20px);border-radius: 30px;margin: min(2%,15px) auto;font-size: 0.9em;font-weight: bold;}

.plan_pricebox{border: 1px solid #DC5888;justify-content: center;align-items: center;}
.plan_pricebox .imgbox{width: 100%;text-align: center;padding: 15px;}
.plan_pricebox .imgbox .plan_nameprice_img{max-width: 300px;}
.plan_pricebox ul{padding: var(--min4-10px);}
.plan_pricebox ul li{position: relative;padding: min(4%, 8px) 0 min(4%, 8px) 40px;border-bottom: 1px dotted var(--color-pink1);}
.plan_pricebox ul li::before{
    position: absolute;
    top: 10px;
    left: 10px;
    content: "";
    background: url(../images/icon_check.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
}
.plan_bnrbox.list_box3 li{max-width: 500px;}
/*- template -*/
.sptable_plan .ac_title{padding: 15px 15px 30px;border-radius: 5px;}
.sptable_plan .ac_title::after{top: calc(100% - 18px);right: calc(50% - 9px);}

.sptable_plan .ac_box{border-top: none;}
.sptable_plan .ac_box dl{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    border: 1px solid var(--color-gray5);
    border-top: none;
    word-break: keep-all;
}
.sptable_plan .ac_box dl:first-of-type{border-top: 1px solid var(--color-gray5);}
.sptable_plan .ac_box dl dt,.sptable_plan .ac_box dl dd{padding: var(--min4-15px);}
.sptable_plan .ac_box dl dt{width: 100%;background: var(--color-gray4);}
.sptable_plan .ac_box dl dd{width: 100%;background: #fff;}

.sptable_plan .list_txtbox{border: 1px solid var(--color-gray1);margin: 0 auto;background: #fff;}
.sptable_plan .list_txtbox .title_txt{font-size:1.2em;border-bottom: 2px dotted var(--color-gray5);margin-bottom: 10px;}
.sptable_plan .list_txtbox .title_line3::after{content: none;}
.sptable_plan .list_txtbox .list_txt li{padding: 2px 0;}

.planname_box .plan_name{font-size: 1.5em;letter-spacing: 4px;line-height: 1.4em;margin-bottom: 5px;}
.planname_box .plan_txt{background: #fff;padding: 5px;border-radius: 20px;max-width: 500px; margin: 0 auto;font-size: 0.9em;letter-spacing: 1px;}

#mail_plan_set_sp .planname_box .plan_name{line-height: 1em;margin-bottom: 0px;}
#mail_plan_set_sp .ac_title::after {
    top: calc(100% - 26px);
}
#mail_plan_set_sp ul{
    margin: var(--min4-15px) auto;
}
#mail_plan_set .detail_list .first_dl{
    /*padding: var(--min3-10px);*/
    padding: 20px 15px;
    color: #fff;
    background: var(--gradation-museigen);
    font-weight: bold;
    font-size: 1.5em;
}
#mail_plan_set .detail_list dl{
    border-top: none;
}
#mail_plan_set .detail_list dl dt{width: 50%;}
#mail_plan_set .detail_list dl dd:last-of-type{width: 50%;background: #fff;}
#mail_plan_set .detail_list{/*margin-bottom: 80px*/}

#plan .title_line1{letter-spacing: 1px;}

/*- plan___sp/pc -*/
#plan .light .planname_box,#plan .table_plan_namebox .light{background: var(--gradation-light);}
#plan .standard .planname_box,#plan .table_plan_namebox .standard{background: var(--gradation-standard);}
#plan .platinum .planname_box,#plan .table_plan_namebox .platinum{background: var(--gradation-platinum);}

#plan .light .planname_box .plan_txt{color: var(--color-lightplan);}
#plan .standard .planname_box .plan_txt{color: var(--color-standerdplan);}
#plan .platinum .planname_box .plan_txt{color: var(--color-platinumplan);}

#plan .btn_mini{
    position:relative;
    color:var(--color-white1);
    background:var(--color-miniplan);
    border: 2px solid var(--color-miniplan);
    display: block;
    text-align: center;
    margin: 20px auto 0;
    padding: 16px 8px;
    width: 92%;
    max-width: 800px;
    transition: 0.3s ease-in-out;
}
#plan .btn_mini::after{
    position:absolute;
    content:"";
    bottom:0;
    right:0;
    width:24px;
    height:24px;
    background:var(--color-white1);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
#plan .btn_mini .btn_title{
    font-weight:bold;
    color: var(--color-miniplan);
    background: var(--color-white1);
    padding: 8px 28px;
    display: inline-block;
    border-radius: 50px;
    margin-bottom: 8px;
    transition: 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
    #plan .btn_mini:hover{
        color: var(--color-miniplan);
        background: var(--color-white1);
    }
    #plan .btn_mini:hover::after{
        background:var(--color-miniplan);
    }
    #plan .btn_mini:hover .btn_title{
        color:var(--color-white1);
        background:var(--color-miniplan);
    }
}

/*- 共通・ページごと設定 -*/
.plan_titlebox .point1.title_main2{padding-left: 35px;margin-bottom: 10px;}
.plan_titlebox .point1::before{top: calc(50% - 13px);width: 26px;height: 26px;background-size: 26px;}
#standardplan .plan_pricebox{border: 1px solid var(--color-standerdplan);}
#platinumplan .plan_pricebox{border: 1px solid var(--color-platinumplan);}
#lightplan_planset .plan_pricebox .imgbox{background: url(../images/pat1_1.png),var(--gradation-light);}
#standardplan_planset .plan_pricebox .imgbox{background: url(../images/pat1_1.png),var(--gradation-standard);}
#platinumplan_planset .plan_pricebox .imgbox{background: url(../images/pat1_1.png),var(--gradation-platinum);}
#mail_plan_set .planname_box{
    font-size: 1.5em;
}


/*- 共通・プランに含まれるもの -*/

.plan_list_box{
    border: 2px solid var(--color-blue2);
    max-width: 700px;
    margin: min(5%, 40px) auto 10px;
}
.plan_list_box .plan_list_title{
    background: #5a75ab;
    color: #fff;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.plan_list_box .plan_list_txt{padding: min(3%, 15px);}
.plan_list_box .plan_list_txt ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.plan_list_box .plan_list_txt ul li{
    padding: 5px 0;
    width: 100%;
    border-bottom: 1px dotted #ddd;
}

/*- 共通・こんなサイトにおすすめ -*/
section[id$="plan_push"] .plan_push_title{max-width: 680px;}
section[id$="plan_push"] .bg_box{background: url(../images/pat1_2.png),#fff4f3;padding: var(--min5-20px) 0;margin-bottom: 40px;}
section[id$="plan_push"] .f_box{justify-content: space-around;margin: 10px 0 0;}
section[id$="plan_push"] .f_box li{width: 50%; padding: 5px;}
section[id$="plan_push"] .plan_push_img{max-width: 220px;}
section[id$="plan_push"] .free_contactarea{margin-bottom: 40px;}
section[id$="plan_push"] .free_contactarea .title_line1{padding: 0 45px;letter-spacing: 1px;}
section[id$="plan_push"] .free_contactarea .title_line1::before,#campaign .title_line1::before{-webkit-transform: rotate(-60deg);transform: rotate(60deg);width: 30px;}

/*- ページ内アンカーリンク -*/
.pagelink{display: flex;flex-direction: column;}
.pagelink li{border: 1px solid #ddd;background: #fff;margin: 0 5px 10px;text-align: center;width: calc(100% - 10px);}
.pagelink li::hover{background: var(--color-black1);}
.pagelink li a{padding: 10px;}
.pagelink li::hover a{color: #fff;}

/*.footer_anchor_link{display: none;position: fixed;bottom: 0;left: 0;right: 0;z-index: 20;padding: 10px 5px;background: var(--gradation5);}
.footer_anchor_link .pagelink{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 5px;}
.footer_anchor_link .pagelink li{margin: 0;width: auto;}*/


/*- ページ下部タブ -*/
section[id$="plan_estimate"] .ac_title,.plan_op_ac .ac_title{border-left: 10px solid var(--color-black1);background: var(--color-gray4);color: initial;}
section[id$="plan_estimate"] .ac_title:after,.plan_op_ac .ac_title:after{background: no-repeat center center/18px url(../images/arrow1b_1.png);}
section[id$="plan_estimate"] .ac_title.open::after,.plan_op_ac .ac_title.open:after{background: no-repeat center center/18px url(../images/arrow1b_2.png);}

section[id$="plan_work"] .list_works li{width: calc((100% / 2 ) - 10px);margin: 0 5px 15px;}

/*- lightplan -*/
#lightplan_planset .layout_box04 li:nth-of-type(1){background: no-repeat center center/cover url(../images/plan_planset_light1.jpg);}
#lightplan_planset .layout_box04 li:nth-of-type(2){background: no-repeat center center/cover url(../images/plan_planset_light2.jpg);}
#lightplan_planset .layout_box04 li:nth-of-type(3){background: no-repeat center center/cover url(../images/plan_planset_light3.jpg);}

/*- standardplan -*/
#standardplan_planset .layout_box04 li:nth-of-type(1){background: no-repeat center center/cover url(../images/plan_planset_standard1.jpg);}
#standardplan_planset .layout_box04 li:nth-of-type(2){background: no-repeat center center/cover url(../images/plan_planset_standard2.jpg);}
#standardplan_planset .layout_box04 li:nth-of-type(3){background: no-repeat center center/cover url(../images/plan_planset_standard3.jpg);}

/*- platinumplan -*/
#platinumplan_planset .layout_box04 li:nth-of-type(1){background: no-repeat center center/cover url(../images/plan_planset_platinum1.jpg);}
#platinumplan_planset .layout_box04 li:nth-of-type(2){background: no-repeat center center/cover url(../images/plan_planset_platinum2.jpg);}
#platinumplan_planset .layout_box04 li:nth-of-type(3){background: no-repeat center center/cover url(../images/plan_planset_platinum3.jpg);}

/*- support common -*/
#plan #plan_basic_support .btn6{margin-top: 5px;}
.push_support{
    background: #fff;
    color: var(--color-pink1);
    font-weight: bold;
    width: fit-content;
    margin: 0 auto 5px;
    padding: 0 10px;
}
.dl_support dl{
    border: 1px solid var(--color-gray1);
    width: 100%;
    margin: var(--min4-15px) auto;
    text-align: center;
}
.dl_support dl dt{color: #fff;padding: var(--min3-10px);}
.dl_support dl.support0 dt{background: var(--color-support0);}
.dl_support dl.support1 dt{background: var(--color-support1);}
.dl_support dl.support2 dt{background: var(--color-support2);}
.dl_support dl.support3 dt{background: var(--color-support3);}

.dl_support dl dd{padding: var(--min3-10px) var(--min5-20px);line-height: 1.6em;}
.dl_support dl dt + dd{border-bottom: 1px solid var(--color-gray5);}

/*-------- plan/support ---------*/
#support .layout_box02 li{background: #fff;}
#support .layout_box02 li .txt_area .title_sub{text-align: left;}

#support #support_advice{
    background: url(../images/pat1_2.png),var(--gradation2);
    background-size: auto,100%;
    background-position: center;
    padding: min(8%, 40px) 0;
}
#support .support_advice_title{max-width: 400px;}
#support #support_detail .list_result{place-items: stretch;}
#support #support_detail .list_result li{margin: 0;}
#support #support_detail .list_result li .txt_area .title_line2{line-height: 1.4em;margin-bottom: var(--min4-15px);font-size: max(18px, min(4vw,20px));font-size: clamp(18px,4vw,20px);}

#support_point .title_line4,#support_example .title_line4{font-size: max(18px, min(4vw,20px));font-size: clamp(18px,4vw,20px);margin-bottom: 20px;padding-left: 35px;font-weight: bold;}
#support_point .f_box{max-width: 480px;margin: 0 auto;justify-content: flex-start;align-items: center;}
#support_point .f_box > div{margin-bottom: 40px;}
#support_point .support_point_img1{max-width: 340px;margin-top: 15px;}
#support_point .support_point_img2{max-width: 480px;margin-top: 15px;}

#support_example .support_name_box .support_price_month{background: #fff;padding: 5px;border-radius: 20px;max-width: 300px;width: 100%; margin: 5px auto 0;font-weight: bold;letter-spacing: 1px;}
#support_example .ac_title{display: flex;flex-direction: column;padding: 10px 40px 10px var(--min4-15px);}
#support_example .ac_title::after{right: 12px;}
#support_example .support0 .support_name_box{background: var(--color-support0);}
#support_example .support1 .support_name_box{background: var(--color-support1);}
#support_example .support2 .support_name_box{background: var(--color-support2);}
#support_example .support3 .support_name_box{background: var(--color-support3);}
#support_example .ac_box{border-top: none; padding: var(--min3-10px) 0;}
#support_example #support2 .support_exa_use tr th.bg_color{background: var(--color-support2-2);font-weight: bold;}
#support_example #support3 .support_exa_use tr th.bg_color{background: var(--color-support3-2);font-weight: bold;}

.table_support_exa{border:1px solid var(--color-gray5);width: 100%;}
.table_support_exa tr:not(:last-of-type){border:1px solid var(--color-gray5);width: 100%;}
.table_support_exa tr th,.table_support_exa tr td:not(:last-of-type){border-right:1px solid var(--color-gray5);}
.table_support_exa tr th,.table_support_exa tr td{padding: var(--min4-10px);vertical-align: middle;font-size: 0.8em;word-break: break-all;}
.table_support_exa tr th{background:var(--color-gray3);}


#support .support_exa_use{margin-top: 30px;}
#support .support_exa_use .title_line3{
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 15px;
    padding-bottom: 5px;
}
#support .support_exa_use .title_line3:after{
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gradation4);
}
#support .support_exa_use .f_box{justify-content: space-between;align-items: flex-start;margin-top: 10px;}
#support .support_exa_use .f_box > div{width: calc(50% - 5px);}

/*--------
mini
---------*/

#mini .mini .planname_box .plan_txt {
    color: var(--color-miniplan);
}
#mini .mini .planname_box, #mini .table_plan_namebox .mini{
    background:var(--color-miniplan);
}
/*sp*/
#mini .mini .planname_box{
    padding: 15px 15px 30px;
    border-radius: 5px;
    color:var(--color-white1);
}
#mini .mini .ac_box{
    display:block;
}
#mini .page_details{
    border-top: 1px dotted var(--color-gray1);
    padding-top: var(--min4-10px);
    margin-top: var(--min4-10px);
}
/*pc*/
#mini #plan_set_pc .planname_box{
    background:var(--color-miniplan);
    padding: 20px 15px;
    color: var(--color-white1);
}
#mini .table_plan tr:not(.table_plan_namebox) th{width:20%;}
#mini .table_plan tr:not(.table_plan_namebox) td{width:80%;}
#mini section[id$="plan_push"] .f_box{justify-content: center;}
#mini #plan_set_pc .page_details{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
#mini #plan_set_pc .page_details > div:nth-of-type(2){
    align-self: center;
}
.btn2.btn_mini::before{
    background: var(--color-miniplan);
}

/*Q&A*/
#miniplan_qa{
    background:#E5EFF8;
}
#miniplan_qa .qa_box > * + *{
    margin-top: var(--min4-15px);
}
#miniplan_qa .qa_box .ac_title{
    position:relative;
    background: var(--color-white1);
    text-align: left;
    font-weight:bold;
    color: inherit;
    padding: var(--min4-15px);
    padding-right: 50px;
}
#miniplan_qa .qa_box .ac_title::before {
  content: "Q.";
  color: #2182D6;
}
#miniplan_qa .qa_box .ac_title::after{
    position: absolute;
    content: "";
    top: calc(50% - 4px);
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--color-gray1);
    border-bottom: 1px solid var(--color-gray1);
    transform: rotate(45deg);
    background: none;
}
#miniplan_qa .qa_box .ac_title.open::after{
    transform: rotate(225deg);
}
#miniplan_qa .qa_box .ac_box{
    position:relative;
    background: var(--color-white1);
    padding:var(--min4-15px);
    border-top: none;
}
#miniplan_qa .qa_box .ac_box::before{
    position: absolute;
    content: "";
    top: 0;
    width: calc(100% - (var(--min4-15px) * 2));
    height:1px;
    background:var(--color-miniplan);
}
/*demo*/
.demo_list{
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    gap: 28px 20px;
    flex-wrap: wrap;
}
.demo_list li{
    width:300px;
}
.demo_list .demo_sum{
    border: 1px solid #ddd;
    height:auto;
}
.demo_list .txt_box{
    padding-top: 4px;
    text-align: center;
}
.demo_list .txt_box .site_out{
    filter: invert(60%) sepia(10%) saturate(11%) hue-rotate(316deg) brightness(101%) contrast(87%);
}

/*申し込み*/
#miniplan_demo .title_line2,
#miniplan_apply .apply_txt_outer .title_line2{
    text-align: center;
    border: none;
}
#miniplan_apply .apply_txt{
    background: var(--color-white1);
    border: 4px solid var(--color-miniplan);
    padding: min(5%, 32px);
}
#miniplan_apply .apply_txt .to_contact{
    position:relative;
    margin-top: var(--min5-20px);
    padding-top: var(--min5-20px);
}
#miniplan_apply .apply_txt .to_contact::before{
    display: block;
    position: absolute;
    content: "";
    top: 0;
    width: calc(100% - (min(5%, 32px) * 2));
    width:100%;
    height:1px;
    background:var(--color-miniplan);
}
.num_list.apply_flowlist li::before{
    height: 100%;
    background: #575E7A;
    color: var(--color-white1);
    width: 44px;
    display: inline-grid;
    place-items: center;
}
.apply_flowlist li{
    background:#E5EFF8;
}
.apply_flowlist li:not(:last-of-type)::after{
    position: absolute;
    content: '';
    bottom: -28px;
    left: calc(50% - 4px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 8px 0 8px;
    border-color: var(--color-miniplan) transparent transparent transparent;
}
.apply_flowlist > * + *{
    margin-top: 40px;
}
.apply_flowlist li p{
    padding: var(--min4-15px);
    padding-left:calc(var(--min4-15px) + 44px);
}

.apply_flow_form .form_box{

}

/*--------
movie
---------*/
/*sp/pc*/
#movie_set_sp{margin:0 auto 10px;}
#movie .komikomi .planname_box,#movie .table_plan_namebox .ko#ikomi{background: var(--gradation-komikomi);}
#movie .business .planname_box,#movie .table_plan_namebox .business{background: var(--gradation-business);}
#movie .komikomi .planname_box .plan_txt{color: var(--color-komikomi);}
#movie .business .planname_box .plan_txt{color: var(--color-business);}
#movie .sptable_plan .ac_box dl dt{width: 40%;}
#movie .sptable_plan .ac_box dl dd{width: 60%;}

#movie_push{
    background: url(../images/pat1_1.png),var(--gradation-business);
    background-size: auto,100%;
    background-position: center center;
    padding: min(8%, 40px) 0;
}
#movie_push .movie_push_title{max-width: 680px;}
/*--------
flow
---------*/
#flow .contents_bg > div{position: relative;padding: min(30%, 120px) 0;}
#flow .contents_bg > div::before{
    position: absolute;
    top: 0;
    left: -25px;
    content: "";
    background: #466188;
    width: 5px;
    height: 100%;
    z-index: -1;
}
#flow .layout_box03 li{background: #fff;margin-bottom: 80px;}
#flow .layout_box03 li:nth-of-type(1) .pic_area{background: no-repeat center center/cover url(../images/flow_step_01.jpg);}
#flow .layout_box03 li:nth-of-type(2) .pic_area{background: no-repeat center center/cover url(../images/flow_step_02.jpg);}
#flow .layout_box03 li:nth-of-type(3) .pic_area{background: no-repeat center center/cover url(../images/flow_step_03.jpg);}
#flow .layout_box03 li:nth-of-type(4) .pic_area{background: no-repeat center center/cover url(../images/flow_step_04.jpg);}
#flow .layout_box03 li:nth-of-type(5) .pic_area{background: no-repeat center center/cover url(../images/flow_step_05.jpg);}
#flow .layout_box03 li:nth-of-type(6) .pic_area{background: no-repeat center center/cover url(../images/flow_step_06.jpg);}

#flow .layout_box03 li .pic_area::before{
    position: absolute;
    top: -18px;
    left: -20px;
    content: "";
    background: var(--gradation1);
    width: 30px;
    height: 1px;
}
#flow .layout_box03 li .pic_area::after{
    position: absolute;
    top: -30px;
    left: 15px;
    color: var(--color-blue1);
    font-size: 32px;
    line-height: 0.8em;
    font-family: 'Josefin Sans';
}
#flow .layout_box03 li:nth-of-type(1) .pic_area::after{content: "STEP01";}
#flow .layout_box03 li:nth-of-type(2) .pic_area::after{content: "STEP02";}
#flow .layout_box03 li:nth-of-type(3) .pic_area::after{content: "STEP03";}
#flow .layout_box03 li:nth-of-type(4) .pic_area::after{content: "STEP04";}
#flow .layout_box03 li:nth-of-type(5) .pic_area::after{content: "STEP05";}
#flow .layout_box03 li:nth-of-type(6) .pic_area::after{content: "STEP06";}

#flow .layout_box03 li .txt_area{margin:0;padding: min(5%,15px);}
#flow .layout_box03 li .txt_area .title_sub{margin-bottom: 10px;}
#flow .layout_box03 li .txt_area .sub_txt{line-height: 1.6em;font-size: max(16px, min(4vw,20px));font-size: clamp(16px,4vw,20px);margin-bottom: 10px;}

#flow .layout_box03 li .txt_area .point_box{display: flex;}

/*--------
websystem
---------*/
/*#websystem .layout_box03{margin-top: var(--min5-20px);}*/
#websystem .layout_box03 .title_sub{margin: 5px 0 10px;font-size: max(18px, min(4vw,24px));font-size: clamp(18px,4vw,24px);}
#websystem .layout_box03 li:nth-of-type(1) .pic_area{background: no-repeat center 60%/cover url(../images/websystem_img01.jpg);}
#websystem .layout_box03 li:nth-of-type(2) .pic_area{background: no-repeat center 20%/cover url(../images/websystem_img02.jpg);}
#websystem .layout_box03 li:nth-of-type(3) .pic_area{background: no-repeat center center/cover url(../images/websystem_img03.jpg);}
#websystem .layout_box03 li:nth-of-type(4) .pic_area{background: no-repeat center center/cover url(../images/websystem_img04.jpg);}
#websystem .list3 li{background: #fff;}

/*--------
movie
---------*/
#movie_result .movie_box{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#movie_result .movie_box iframe{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/*--------
company
---------*/
#company section:not(.company_introduct) .title_sub{text-align: center;margin-bottom: 5px;}
#company .layout_box01 li .sec_box .intrduct_pic{background: no-repeat center center/cover url(../images/company_pic_info.jpg);}
#company .layout_box01 li .sec_box .manager_pic{background: no-repeat center top/cover url(../images/company_pic_manager.jpg);}
#company .layout_box01 li .sec_box .director_pic{background: no-repeat center top/cover url(../images/company_pic_director.jpg);}
/*--------
corporate
---------*/
#corporate .company_place .company_placebox .company_place_inner{padding: min(5%, 40px);}
#corporate .company_place .company_place_inner .list2{
    display: block;

}
#corporate .company_place .office_place_title{
    text-align: center;
    font-size: 26px;
    border-bottom: 2px solid #fff;
    margin-bottom: 30px;
    padding-bottom: 5px;
}
#corporate .company_place .list2 li{width: 100%;}
#corporate .company_place li .office_name{font-size: 1.4em;font-weight: bold;}
#corporate .company_place li .map_img{margin-top: 10px;max-width: 480px;}
#corporate .company_history .company_history_title{
    text-align: center;
    font-size: 26px;
    padding-bottom: 5px;
}
#corporate .company_history .border_box{
    border-width: 2px;
}
/*--------
campaign
---------*/
#campaign .campaign_bnr_area{
    background: url(../images/pat1_1.png),var(--gradation2);
    background-size: auto,100%;
    background-position: center center;
}
#campaign .campaign_bnr{max-width: 600px;}
#campaign .arrow_underbox{background: #fff;}
#campaign .arrow_underbox::after{border-color: #fff transparent transparent transparent;}
#campaign .arrow_underbox .list4 li{border: 2px solid var(--color-gray5);background: none;display: block;padding: min(4%, 14px) min(4%, 8px) min(4%, 14px) 28px;}
#campaign .title_line1{padding: 0 40px; letter-spacing: 1px;}
#campaign .title_line1::before,#campaign .title_line1::after{width: 40px;height: 2px;background-color: var(--color-pink1);}

#campaign .plan_commonbox li{width: 100%; margin-top: 15px;}
#campaign .f_box{justify-content: center;align-items: center;}
#campaign .planname_box .plan_txt{border-radius: 0;margin-bottom: 10px;}
#campaign .planname_box .light .plan_txt{color: var(--color-lightplan);}
#campaign .planname_box .standard .plan_txt{color: var(--color-standerdplan);}
#campaign .planname_box .plan_name{margin-bottom: 0;font-size: min(7vw,30px);}
#campaign .planname_box .border_t{margin-top: 5px;padding-top: 10px;border-top: 1px dotted rgba(255,255,255,0.6);}
#campaign .btn5{border: 1px solid #fff; color: #fff;}
#campaign .light .btn5:hover{color: var(--color-lightplan);}
#campaign .standard .btn5:hover{color: var(--color-standerdplan);}

#campaign .cam_box{
    padding: min(3%, 15px);
    max-width: 600px;
    margin: 20px auto 0;
    background: #fff;
}
#campaign .cam_box .title_mini{color: var(--color-standerdplan);margin-bottom: 10px;font-size: 1em;}
/*--------
privacy
---------*/
.privacy_title{
    font-size: min(5.6vw,28px);
    margin-bottom: var(--min5-20px);
}
.list_privacy{
    margin-top: 30px;
    border-top: 1px solid var(--color-black1);
    border-bottom: 1px solid var(--color-black1);
}
.list_privacy li{
    position: relative;
    width: 100%;
    border-bottom: 1px dotted var(--color-gray1);
    padding: 20px 5px 20px 45px;
}
.list_privacy li::before{
    position: absolute;
    top: 10px;
    left: 16px;
    font-size: 26px;
}
.list_privacy li:nth-of-type(1)::before{content: '1';}
.list_privacy li:nth-of-type(2)::before{content: '2';}
.list_privacy li:nth-of-type(3)::before{content: '3';}
.list_privacy li:nth-of-type(4)::before{content: '4';}
.list_privacy li:nth-of-type(5)::before{content: '5';}
/*--------
news
---------*/
/* #news article{
    padding:var(--min5-20px);
    border: 2px solid var(--color-support2);
    word-wrap: break-word;
}
#news .article_titlebox{
    border-bottom: 1px solid var(--color-gray5);
    margin-bottom: 10px;
}
#news .article_titlebox time{
    display: inline-block;
    margin-right: 5px;
    font-size: 0.8em;
}
#news .article_titlebox .news_title{
    display: inline-block;
    font-size: 1.25em;
    font-weight: bold;
}
#news .tag_1{
    background: var(--color-pink1);color: #fff;display: inline-block;padding: 0 10px;margin: 0 5px;font-size: 12px;}
#news .tag_2{
    background: var(--color-blue2);color: #fff;display: inline-block;padding: 0 10px;margin: 0 5px;font-size: 12px;}
#news .tag_3{
    background: var(--color-purple1);color: #fff;display: inline-block;padding: 0 10px;margin: 0 5px;font-size: 12px;} */
/*--------
sitemap
---------*/

.sitemap_box{
    /*    width: 380px;*/
    max-width: 600px;
    margin: 0 auto;
    padding: min(10%, 40px) min(7%,40px);
    border: 1px solid var(--color-gray1);
    text-align: left;
}
.sitemap_box ul{max-width: 380px;margin: 0 auto;}
.sitemap_box ul li a:hover{color: #b04d97;}
.sitemap_box ul li ul {margin: 0.5em 0 0.75em 65px;}
.sitemap_box ul li ul li {margin-bottom: 1em;position: relative;}

.sitemap_box ul li ul li::before {
    content: "";
    position: absolute;
    top: -0.5em;
    left: -30px;
    width: 10px;
    height: calc(100% + 1.5em);
    border-left: 1px solid var(--color-gray1);
}
.sitemap_box ul li ul li:last-child::before {height: calc(1em + .25em);}

.sitemap_box ul li ul li::after {
    content: "";
    position: absolute;
    top: 0.75em;
    left: -30px;
    width: 25px;
    border-bottom: 1px solid var(--color-gray1);
}
/*--------
form
---------*/
/*form_reset*/
.content_form .list_dl dt{padding: 20px 0 10px;font-weight: bold;font-size: 1.2em;}
.content_form .list_dl dd{padding: 0 0 20px 0;}

.req{color: #e6428f;}
.btn_go{margin-bottom: 20px;}
.content_form .err_txt{text-align: left;margin-bottom: 20px;}

input,textarea{-webkit-appearance: none;border:none;border-radius: 0;}/*ios_reset*/
input::placeholder,textarea::placeholder{color: #c7c9cc;font-size:12px;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color: #c7c9cc;font-size:12px;}
input::-ms-input-placeholder,textarea::-ms-input-placeholder{color: #c7c9cc;font-size:12px;}

form input[type="text"],
form input[type="email"],
form textarea,form select {
    font-size: 16px; /*ios_down*/
    outline: none;
    border: 1px solid #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
    background: #f3f4f5;
    width: 100%;
}

form input:focus,form textarea:focus,form select:focus {border: 1px solid #869bc1;}

form select{padding: 15px 10px;}
form textarea{padding:10px;}
form input{
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*ラジオボタン設定*/

.radio_box input[type="radio"],.web_check_box input[type="checkbox"] { display: none; }
.radio_box input[type="radio"] + label,.web_check_box input[type="checkbox"] + label{
    display: inline-block;
    position: relative;
    padding: 4px 0 4px 30px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 48%;
    vertical-align: top;
}
.radio_box input[type="radio"] + label:last-child,.radio_box input[type="radio"] + label:nth-last-of-type(2),.web_check_box input[type="checkbox"] + label:last-child{ margin-bottom: 0;}
.radio_box input[type="radio"] + label:before,.web_check_box input[type="checkbox"] + label:before  {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #7976a0;
    position: absolute;
    left: 0;
    top: 4px;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}
.radio_box input[type="radio"] + label:before{
    border-radius: 50px;
}
.radio_box input[type="radio"]:checked + label{
    background: linear-gradient(transparent 80%,#e8f0f5 80%);
}
.web_check_box input[type="checkbox"]:checked + label:before  {
    width: 10px;
    top: -5px;
    left: 5px;
    border: 2px solid #e54192;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.radio_box input[type="radio"]:checked + label:before{
    width: 20px;
    height: 20px;
    left: 0;
    top: 4px;
    content: "";
    background: #e54192;
    outline: 2px solid #fff;
    outline-offset: -3px;
    border-radius: 50px;
}
/*--------
contact
---------*/
.content_contact .contact_telbox{
    border: 1px solid var(--color-gray1);
    margin: 20px auto 40px;
    padding: min(3%, 15px);
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.content_contact .contact_telbox .con_tel{
    font-size: min(8vw,38px);
    display: inline-block;
    line-height: 1.4em;
}
.content_contact .border_box{border-width: 2px;}
#contact .privacybox{
    border-top: 1px dotted var(--color-gray1);
    padding: 30px 0 min(7%,50px);
}
:is(#contact,#mini) .privacybox .box_inner{
    border: 1px solid #858687;
    border-radius: 2px;
    padding: min(6%,40px);
    height: 200px;
    overflow-y: scroll;
}
.content_contact .message_success{
    border: 1px solid var(--color-pink1);
    margin: 0 auto 40px;
    font-weight: bold;
    color: var(--color-pink1);
    max-width: 600px;
}
.content_contact .btnbox .btn3{
    margin: 0 auto;
    display: block;
    max-width: 400px;
}
/*-------- document ---------*/
#document .list_dl dd{color: #6d88ab;}

/*--------
/website/xxx
---------*/

#website .list_box3 li{padding: 0;border: 1px solid var(--color-gray5);background: #fff;margin-bottom: 20px;}
#website .list_box3 li > div{padding: var(--min4-10px);}
#website .price_box{color: #464646;}
#website .plan_commonbox{max-width: 500px;margin: 0 auto;width: 90%;}

#website #website_flow .picbox{background: no-repeat left center/cover url(../images/website_flow_01.jpg);width: 100%;height: 200px;margin: 0 0 30px;}
#website #website_flow ul{width: 90%;margin: 0 auto 20px;}
#website #website_flow ul li{position: relative;font-weight: bold;margin-bottom: 40px;background: #5f71ca;padding: var(--min4-10px);display: flex;justify-content: flex-start;align-items: center;}
#website #website_flow ul li .step{background: #fff;color: #5f71ca;border-radius: 100px;padding:15px 15px 10px;width: fit-content;line-height: 1.7em;margin: 0 10px 0 0;display: flex;}
#website #website_flow ul li .step > p{font-size: 2.4em;}
#website #website_flow ul li .flow_txt{font-size: 1.2em;line-height: 1.6em;color: #fff;}

#website #website_flow ul li::after{
    position: absolute;
    bottom: -28px;
    left: calc(50% - 30px);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 30px 0 30px;
    border-color: #5f71ca transparent transparent transparent;
}
#website #website_flow ul li:last-of-type::after{content: none;}

/*- color -*/
#website #website_flow ul li:nth-of-type(2){background: #6c61bd;}
#website #website_flow ul li:nth-of-type(3){background: #9b61bd;}
#website #website_flow ul li:nth-of-type(4){background: #c953ac;}
#website #website_flow ul li:nth-of-type(5){background: #dd4d92;}

#website #website_flow ul li:nth-of-type(2)::after{border-color: #6c61bd transparent transparent transparent;}
#website #website_flow ul li:nth-of-type(3)::after{border-color: #9b61bd transparent transparent transparent;}
#website #website_flow ul li:nth-of-type(4)::after{border-color: #c953ac transparent transparent transparent;}
#website #website_flow ul li:nth-of-type(5)::after{border-color: #dd4d92 transparent transparent transparent;}

#website #website_flow ul li:nth-of-type(2) .step{color: #6c61bd;}
#website #website_flow ul li:nth-of-type(3) .step{color: #9b61bd;}
#website #website_flow ul li:nth-of-type(4) .step{color: #c953ac;}
#website #website_flow ul li:nth-of-type(5) .step{color: #dd4d92;}

#website_info .title_line3{font-size: max(20px, min(5vw,26px));
    font-size: clamp(20px,5vw,26px);
    margin-bottom: 20px;}

/*---- common ----*/
/*- side -*/
#columu_side .side_top_link{
    flex-direction: row;
    margin-bottom: 30px;
}
#columu_side .side_top_link > div{
    width: calc(100% - 10px);
    margin: 10px 5px 0;
}
#columu_side .side_top_link > div a{
    border-radius: 5px;
    position: relative;
    padding: var(--min4-15px);
    text-align: center;
    background: var(--gradation-komikomi);
    color: #fff;
    font-weight: bold;
}
#columu_side .side_top_link > div a::after{
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #003b58 transparent;
}
#columu_side .columu_side_list{
    display: flex;
    flex-wrap: wrap;
}
#columu_side .columu_side_list li{
    position: relative;
    border: 1px solid var(--color-gray1);
    margin: 10px 5px 0;
    font-size: 0.8em;
    padding-left: 25px;
    width: calc(100% - 10px);
}
#columu_side .columu_side_list li::before{
    z-index: 1;
    position: absolute;
    top: calc(50% - (10px - 8px));
    left: 5px;
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid #a86eb9;
    border-top: 1px solid #a86eb9;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#columu_side .columu_side_list li:hover{background: #f8ebf1;}
#columu_side .columu_side_list li a{padding: var(--min4-10px);}
/*- main -*/
.webcontents_list_top{
    margin-bottom: 10px;
    text-align: center;
    color: var(--color-lightplan);
    font-weight: bold;
    font-size: 1.2em;
}
.webcontents_list{
    border: 1px solid var(--color-gray1);
    background: var(--color-gray2);
    margin: 20px auto min(10%, 80px);
}
.webcontents_list ul li{
    font-size: 0.95em;
    padding: 5px 0;
}
.webcontents_list ul li p{padding-bottom: 5px;}
.webcontents_list ul li a{
    padding: 2px 0;
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: var(--color-gray1);
}
.webcontents_list ul li ul.inlist{margin-left: 1.5em;}
.webcontents_list ul li ul li ul li{padding: 2px 0;}

#columu_main .sec_block{margin-bottom: 80px;}
#columu_main .title_web_style1{
    background: var(--gradation5);
    font-size: min(5vw,24px);
    line-height: 1.6em;
    padding: 15px;
    color: #fff;
    margin: 0 0 36px 0;
    font-weight: bold;
}
#columu_main .title_web_style2{
    border-top: 2px solid var(--color-lightplan);
    border-bottom: 2px solid var(--color-lightplan);
    padding: 10px 0;
    margin: 60px auto 20px;
    font-size: min(4vw,20px);
    font-weight: bold;
    color: var(--color-lightplan);
}
#columu_main .title_web_style3{
    position: relative;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 2em;
    color: var(--color-black1);
    padding: 0 0 5px 15px;
    margin: 50px auto 15px;
}
#columu_main .title_web_style3::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 5px;
    height: calc(100% - 5px);
    background: #d3518c;
}
/*table・dl・li装飾*/
#columu_main .web_dl_list{
    margin: 30px auto;
}
#columu_main .web_dl_list dl{
    margin-bottom: var(--min4-15px);
}
#columu_main .web_dl_list dl dt{
    color: var(--color-blue1);
    border-bottom: 2px dotted var(--color-blue2);
    padding-bottom: 5px;
    margin-bottom: 10px;
}
#columu_main .web_dl_list.box1 dl{
    padding: min(3%, 15px);
    background: var(--color-gray4);
}
#columu_main .web_bgbox{
    padding: var(--min4-15px);
    margin: 20px auto;
    background: #ebf2f6;
    color: var(--color-black1);
    border-radius: 5px;
}
#columu_main img{margin: 20px auto;}

#columu_main .title_web_style1 + figure img,
#columu_main .title_web_style2 + figure img{
    margin: 0px auto 30px;
}
#columu_main .web_dl_list2 dl{
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray5);
}
#columu_main .web_dl_list2 dl dt{
    padding: var(--min3-10px);
    background: var(--gradation-business);
    color: #fff;
    display: grid;
    place-items: center;
    width: 100%;
}
#columu_main .web_dl_list2 dl dd{padding: min(3%, 15px);width: 60%;}

#columu_main .web_table1{
    width: 100%;
    border: 1px solid var(--color-gray5);
    margin: var(--min4-15px) auto;
}
#columu_main .web_table1 tr{
    display: flex;
    flex-direction: column;
}
#columu_main .web_table1 tr.top_txt{
    display: none;
}
#columu_main .web_table1 tr th,#columu_main .web_table1 tr td{
    width: 100%;
    padding: var(--min3-10px);
}
#columu_main .web_table1 tr th{
    background:var(--color-gray4);
}
/*ul・li*/
#columu_main .web_ul_list1 li{
    padding: 5px 0;
}
#columu_main .web_ul_list1.check_list li{
    position: relative;
    padding: 5px 0 5px 35px;
}
#columu_main .web_ul_list1.check_list li::before{
    position: absolute;
    top: 1ex;
    left: 5px;
    content: "";
    background: url(../images/icon_check.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
}
/*check*/
#columu_main .web_check_box{
    border: 2px solid #ddd;
    padding: min(7%, 30px) min(6%, 25px);
    border-radius: 4px;
    width: 90%;
    margin: 0 auto 20px;
}
#columu_main .web_check_box input[type="checkbox"] + label {
    width: 100%;
    padding-left: 35px;
    margin-bottom: 12px;
}
#columu_main input[type="checkbox"] + label:before {
    border: 2px solid #bbc9dd;
}
#columu_main input[type="checkbox"]:checked + label:before{
    border: 3px solid #e54192;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#check .web_check_box .title_line2{
    border-left: 5px solid var(--color-blue1);
    font-weight: bold;
    font-size: 1.5em;
    color: #223e77;
}

#columu_main .title_line1box{text-align: center;font-size: min(5.4vw,20px);font-weight: bold;margin: 40px auto;}
#columu_main .title_line1box .title_line1{padding: 0 44px;letter-spacing: 2px;}
#columu_main .title_line1box.box2{margin: 60px auto 40px;}
#columu_main .title_line1::before,#columu_main .title_line1::after{width: 34px;}

#first .web_table1.me_deme .top_tr{display: none;}
#first .web_table1.me_deme p[class$="merit"]{padding: 2px 5px;margin-bottom: 5px;font-weight: bold;}
#first .web_table1.me_deme p.merit{border-bottom: 2px dotted var(--color-pink1);color: var(--color-pink1);}
#first .web_table1.me_deme p.demerit{border-bottom: 2px dotted var(--color-blue1);color:var(--color-blue1);}

#hikaku .data_box{margin: 30px auto 20px;}
#hikaku .data_table .table_comparison tr th:not([class^="fixed"]){width: calc((600px - 90px) / 3);}
#hikaku #columu_main .web_dl_list2{margin: 40px auto;}
#hikaku #columu_main .web_dl_list2 dl{border: 1px solid #f3dee8;}
#hikaku #columu_main .web_dl_list2 dl dt{background: url(../images/pat1_2.png),var(--gradation2);color: #da649c;font-weight: bold;}
#columu_main .web_dl_list2 dl dd{width: 100%;}
#hikaku .btn6.plan_light{border: 2px solid var(--color-lightplan);background: var(--color-lightplan);}
#hikaku .btn6.plan_standard{border: 2px solid var(--color-standerdplan);background: var(--color-standerdplan);}
#hikaku .btn6.plan_platinum{border: 2px solid var(--color-platinumplan);background: var(--color-platinumplan);}

#columu_main .btn_box{display: flex;flex-direction: column;justify-content: center;align-items: center;}
#columu_main .btn_box .btn6{max-width: 300px;}

/*-------- 404 ---------*/
#err .txtbox_404{text-align: center;margin-bottom: 40px;}
#err .title_404{font-size: 120px;line-height: 1em;}
.move404 {animation: errmove1 2s ease-out forwards,errmove2 2s 5s infinite forwards;}
@keyframes errmove1{0%{transform:rotate(540deg) scale(5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
@keyframes errmove2{0%,100%{transform:translateX(0);transform-origin:50% 50%}15%{transform:translateX(-30px) rotate(-6deg)}30%{transform:translateX(15px) rotate(6deg)}45%{transform:translateX(-15px) rotate(-3.6deg)}60%{transform:translateX(9px) rotate(2.4deg)}75%{transform:translateX(-6px) rotate(-1.2deg)}}
#err .title_404 .txt_color{
    color: #774696;
    background: var(--gradation3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*--------media380/440---------*/
@media (min-width: 380px){
    .del_380{display: none;}
    .plan_list_box .plan_list_txt ul li{width: calc(100% / 2);padding: 8px 0;}
    .plan_list_box .plan_list_txt ul li.longtxt{width: 100%;line-height: 1.4em;}
    .table_support_exa tr th, .table_support_exa tr td{font-size: 0.9em;}
}
@media (min-width: 400px){
    #columu_main .web_dl_list2 dl{flex-direction: row;}
    #columu_main .web_dl_list2 dl dt{width: 40%;}
    #columu_main .web_dl_list2 dl dd{width: 60%;}
}
@media (min-width: 440px){
    .del_440{display: none;}
    .sptable_plan .ac_box dl dt,#movie .sptable_plan .ac_box dl dt{width: 30%;}
    .sptable_plan .ac_box dl dd,#movie .sptable_plan .ac_box dl dd{width: 70%;}
}

/*--------media460---------*/
@media (min-width: 460px){
    #header .header_inner .header_navbox .btn3{display: inline-block;margin-top: 0;padding: 5px 25px;letter-spacing: 1px;color: #fff;background: rgb(208 63 133 / 90%);}
    #header .header_inner .header_navbox .btn3::after, #header .header_inner .header_navbox .btn3::before{
        border-radius: 0;
        border-color: var(--color-pink1);
    }
    /*- plan -*/
    .pagelink{flex-direction: row;}
    .pagelink.link2 li{width: calc((100% / 2) - 10px);}
    .pagelink.link3 li{width: calc((100% / 3) - 10px);}
    /*- other -*/
    #interview .detail_works_contents{width: 90%;}
    #interview .in_box_area .detail_works_contents:nth-of-type(even){margin-left: auto;}
}
/*--------media480---------*/
@media (min-width: 480px){
    .del_480,#first .web_table1.me_deme p[class$="merit"]{display: none;}
    .bl_480{display: block;}
    .list3{grid-template-columns: 1fr 1fr;}
    .layout_box01 li .sec_box .txt_inner .namebox{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .table_comparison tr .fixed1{width: 110px;}
    .table_comparison tr .fixed2{left: 110px;}

    /*index*/
    .table_comparison{font-size: 1em;width: 800px;}
    .colution_list{grid-template-columns: 1fr 1fr;}
    #top_contentlist .layout_box01 li .sec_box .recruit_pic{    background-position: center -25px;}
    /* #top_contentlist .contentlist_news .top_news_list li{flex-direction: row;} */

    /*-- other common --*/
    .other_head,.other_head2,.other_head_sub{height: 180px;}
    /*- plan -*/
    section[id$="plan_push"] .f_box li{width: calc(100% / 3);}
    .list_txtbox+p{text-align: center;}
    /*- plan/support -*/
    .list_talk{justify-content: space-evenly;}
    .list_talk li{width: 48%;}
    .list_talk li:nth-of-type(odd){margin-left: 0;}
    .list_talk li:nth-of-type(even){margin-right: 0;}
    /*- company -*/
    #company section:not(.company_introduct) .title_sub{margin-bottom: 0;}
    .content_form .err_txt{text-align: center;}

    /*---- /website/xxx ----*/
    #columu_main .web_table1 tr{flex-direction: row;}
    #columu_main .web_table1 tr.top_txt{display: flex;color: #fff;}
    #columu_main .web_table1 tr.top_txt th,#columu_main .web_table1 tr.top_txt td{background: var(--color-blue1);}
    #columu_main .web_table1 tr{border-bottom: 1px solid var(--color-gray5);}
    #columu_main .web_table1 tr th{width: 30%;}
    #columu_main .web_table1 tr td{width: 70%;border-right: 1px solid var(--color-gray5);}
    #columu_main .web_table1 tr td:last-of-type{border-right:none;}
    #columu_main .web_table1.column3 tr th{width: 25%;}
    #columu_main .web_table1.column3 tr td{width: calc(75% / 2);}

    #first .web_table1.me_deme .top_tr{display: flex;}
    #first .web_table1.me_deme .top_tr th{background: #fff;}
    #first .web_table1.me_deme .top_tr td.merit{background: #ffedf5;}
    #first .web_table1.me_deme .top_tr td.demerit{background: #ddedf7;}
    #hikaku .data_table .table_comparison{width: 100%;}

    /*- news -*/
    #top_news .top_news_list li .tag_1,
    #news .top_news_list li .tag_1{
        display: inline-block;padding: 0 10px;font-size: 12px;line-height: 25px;}
        #top_news .top_news_list li .tag_2,
        #news .top_news_list li .tag_2{
            display: inline-block;padding: 0 10px;font-size: 12px;line-height: 25px;}
            #top_news .top_news_list li .tag_3,
            #news .top_news_list li .tag_3{
                display: inline-block;padding: 0 10px;font-size: 12px;line-height: 25px;}
                #top_news ul.top_news_list li a div.news_txt,
                #news ul.top_news_list li a div.news_txt{
                    font-size: 13px;
                }
            }
/*--------media540---------*/
@media (min-width: 540px){
    /*- support -*/
    .dl_support{display: flex;flex-wrap: wrap;}
    .dl_support dl{width: 48%;}
    
    /*- news一覧 -*/
    #news form label {
        width: calc((100% / 4) - 10px);
    }
}
/*--------media600---------*/
@media (min-width: 600px){
    .del_600{display: none;}
    .bl_600{display: block;}
    .list4 {grid-template-columns: 1fr 1fr 1fr;}
    .list_dl dt:last-of-type,.list_dl dd:last-of-type{
        border-bottom: none;
    }
    .list_dl dt{
        padding: 10px 20px;
        border-bottom: 1px dotted var(--color-gray1);
        width: 30%;
    }
    .list_dl dd{padding: 10px;width: 70%;}

    .detail_list dl.f_box{flex-direction: row;}
    .detail_list dl dt,.detail_list dl dd{display: grid;place-items: center;}
    .detail_list dl dt{width: 30%;}
    .detail_list dl dd{border-bottom: none;border-right: 1px dotted #f3dfdb;}
    .detail_list dl dd:nth-of-type(1){width: 25%;}
    .detail_list dl dd:last-of-type{width: 45%;border-right: none;}
    .detail_list.d_list2 dl dt,.detail_list.d_list2 dl dd{width: 50%;}

    .ac_title{text-align: center;}
    .tab{flex-direction: row;}
    /*- drawer/footer -*/
    .overlay.open{overflow-y: hidden;}
    .drawer_menu{
        flex-direction: row;
        align-items: flex-start;
        overflow: hidden;
    }
    .drawer_menu .bg_black, .drawer_menu .bg_white{
        padding: 10vh 5% 40px;
        height: 100vh;
        justify-content: flex-start;
        overflow-y: scroll;
    }
    .drawer_menu .bg_black{width: 40%;}
    .drawer_menu .bg_white{width: 60%;}
    #footer_info .f_logo_box{display: flex;justify-content: flex-start;align-items: center; width: auto;}
    #footer_info .f_logo_box .f_access{margin: 0 0 0 30px;}
    #footer_info .f_logo_box .copyright{position: absolute;left: 20px;right: 0;text-align: left;}

    /*- top -*/
    #top_reason .reason_list {grid-template-columns: 1fr 1fr;}
    #top_evaluation{background-size: 440px;}
    #top_evaluation .top_evaluation_title{line-height: 1.6em; margin-top: 5px;}
    #top_evaluation .under_txt{text-align: center;}
    /*- plan -*/
    .plan_list_box .plan_list_txt ul li {width: calc(100% / 3);}
    .plan_list_box .plan_list_txt ul li.longtxt {width: calc(100% / 2);}
    section[id$="plan_estimate"] .ac_title, .plan_op_ac .ac_title{text-align: initial;}
    /*- support -*/
    #support_example .ac_title{flex-direction: row;justify-content: center;align-content: center;}
    #support_example .support_name_box .support_price_month{max-width: 240px;margin: auto 10px;}
    #support_example .support_name_box .support_name{padding:5px;}
    /*- campaign -*/
    #campaign .f_box{;flex-wrap: initial;}
    #campaign .planname_box .plan_name{font-size: min(4vw,30px);}
    #campaign .txt_ment{text-align: center;}

    /*- form -*/
    .content_form .list_dl dt,.content_form .list_dl dd{padding: 20px 10px;}
    .content_form .list_dl dt:not(.big){display: flex;align-items: center;}

    /*- document -*/
    #document .list_dl dt{width: 65%;}
    #document .list_dl dd{width: 35%;}

    /*---- /website/xxx ----*/
    .webcontents_list{width: 85%;}
    #columu_side .side_top_link > div,#columu_side .columu_side_list li{width: calc((100% / 2) - 10px);}
    #columu_main .btn_box{flex-direction: row;}
    #columu_main .btn_box .btn6{margin: 20px 10px 0;}
    #check #columu_main .btn_box.link3 .btn6{font-size: 0.8em;padding: 12px 20px 12px 1px;margin: 20px 5px 0;}

}

/*--------media700---------*/
@media (min-width: 700px){
    .del_700{display: none;}
    .bl_700{display: block;}
    .txt_left_center{text-align: center;}
    .list2{grid-template-columns: 1fr 1fr;gap: 25px 20px;}
    .title_sub{text-align: center;}
    .tab li{margin: 0 5px 10px;}
    .layout_box03 li{align-items: stretch;flex-direction: row;}
    .layout_box03 li .txt_area{margin: 0 auto;width: calc((100% - 25px) / 10*7);}
    .layout_box03 li .pic_area{margin: 0 25px 0 0;height: auto;min-height: 200px;min-width: 200px;width: calc((100% - 25px) / 10*3);flex: none;}
    .layout_box03 li .txt_area .title_sub{text-align: initial;}
    .layout_box04{flex-direction: row; align-items: stretch;}
    .layout_box04 li{height: 200px;margin: 0 10px var(--min4-15px);}

    /*-- footer --*/
    #footer_contact .f_box{flex-wrap: nowrap;flex-direction: row;}
    /*- index -*/
    #top_evaluation .top_evaluation_pointlist li{width: calc(100% / 3);}
    .colution_list{grid-template-columns: 1fr 1fr 1fr;}
    /*-- other --*/
    #flow .layout_box03 li .txt_area{padding-left: 5px;}
    #company .company_introduct .title_sub{text-align: left;}
    /*-- plan --*/
    .plan_list_box .plan_list_txt ul li {width: calc(100% / 4);}
    #support_point .f_box{max-width: none;flex-wrap: nowrap;justify-content: space-evenly;align-items: flex-start;}
    #support_point .f_box > div{margin: 0 10px 20px;}
    /*-- works --*/
    #new_works .g_box {
        display: grid;
        grid-template-columns: 54% 46%;
        align-items: center;
    }
    #new_works li:nth-child(even) .g_box{grid-template-columns: 46% 54%;}
    #new_works li:nth-child(even) .g_box .pic{order: 2;}
    #new_works .new_works_list_box li .g_box div:not(.pic,.read_more){padding: var(--min5-20px) min(6%,30px);}
    #all_work .title_works{margin: clamp(-135px,-16vw,-65px) 0 clamp(30px,6vw,60px);}
    .works_list_box{
        max-width: 100%;
        align-items: stretch;
    }
    .works_list_box li{
        width: calc((100% / 3) - 20px);
        margin: 0 10px 20px;
    }
    #all_work .category_box ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 8%;
        width: calc(100% - 10%);
        margin: 0 auto;
    }
    .other_works .title_works{
        margin: clamp(-135px,-16vw,-70px) 0 clamp(30px,6vw,60px);
    }#top_news ul.top_news_list, #news ul.top_news_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px min(2%, 30px);
    }
}
/*--------media800---------*/
@media (min-width: 800px){
    .del_800{display: none;}    
    .bl_800{display: block;}
    .list3{grid-template-columns: 1fr 1fr 1fr;}
    .list4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
    .list_result{grid-template-columns: 1fr 1fr;}
    .list_box3 li{width: calc(100% / 2);}
    .layout_box02 li{align-items: stretch;}
    .layout_box02 li:nth-of-type(odd){flex-direction: row;}
    .layout_box02 li:nth-of-type(even){flex-direction: row-reverse;}
    .layout_box02 li:nth-of-type(odd) .title_sub{padding-left: 35px;}
    .layout_box02 li:nth-of-type(even) .title_sub{padding-right: 35px;}
    .layout_box02 li .pic_area{height: auto;width: 300px;flex-shrink: 0;}
    .layout_box02 li:nth-of-type(odd) .txt_area{margin-left: 20px;}
    .layout_box02 li:nth-of-type(even) .txt_area{margin-right: 20px;}

    .table_comparison{width: 100%;}
    .table_comparison tr td{width: calc((100% - 110px) / 5);}
    #footer_contact .inner_f_contact .footer_title{max-width: 820px;}

    .work_slidebox::before, .work_slidebox::after {height: 220px;width: 200px;}
    .work_slidebox ul li img{width: 350px;}

    /*-- advantage --*/
    #advantage .layout_box02 li .title_sub{text-align: left;margin-top: 0px;}
    #advantage .layout_box02 li .pic_area::after{bottom: auto;top: -20px;}
    #advantage .layout_box02 li:nth-of-type(odd) .pic_area::after{left: auto;right: -80px;}
    #advantage .layout_box02 li:nth-of-type(even) .pic_area::after{left: -80px;}

    /*-- plan --*/
    #plan #plan_set_pc .planname_box,#plan #mail_plan_set_pc .planname_box,#movie #movie_set_pc .planname_box{padding: 20px 15px;color: #fff;}

    #mail_plan_set_pc .table_plan{margin: var(--min4-15px) auto;}

    .plan_pricebox{align-items: stretch;}
    .plan_pricebox .imgbox{width: 40%;display: grid;place-items: center;}
    .plan_pricebox ul{width: 60%;}

    .table_plan{width: 100%;}
    .table_plan tr:not(.table_plan_namebox){border: 1px solid var(--color-gray1);}
    .table_plan tr:not(.table_plan_namebox) th,.table_plan tr:not(.table_plan_namebox) td{padding: 10px;vertical-align: middle;}
    .table_plan tr:not(.table_plan_namebox) th{background: var(--color-gray3);width: 100px;vertical-align: middle;}
    .table_plan tr:not(.table_plan_namebox) td{border-right: 1px solid var(--color-gray1);text-align: center;background: #fff;}
    .table_plan tr:not(.table_plan_namebox) td:last-of-type{border-right: none;}
    .table_plan tr.table_plan_price td{font-size: 1.4rem;line-height: 1.8em;}
    .table_plan tr.line_top_dotted{border-top: 2px dotted var(--color-gray5);text-align: center;}
    .table_plan tr td.posi_center{display: table-cell;}
    .table_plan tr .posi_center p{text-align: left;display: inline-block;}
    .table_plan .table_plan_alltxt .title_txt{border-bottom: 2px dotted var(--color-gray5);padding-bottom: 10px;color: var(--color-blue1);}
    .table_plan .table_plan_alltxt .list_txt{max-width: 900px;margin: 0 auto;}
    .table_plan .table_plan_alltxt .list_txt li{width: calc(100% / 5);padding: 5px;}

    /*-- works --*/
    .list_works li,section[id$="plan_work"] .list_works li{width: calc((100% / 3) - 20px);margin: 0 10px 20px;}

    /*---- /website/xxx ----*/
    #website .list_box3 li{margin-bottom: 0;}
    #website .plan_commonbox{max-width: none; width: 100%;}
    #website #website_flow .f_box{flex-direction: row-reverse;}
    #website #website_flow .picbox{margin: 0 0 0 20px;width: 40%;height: auto;}
    #website #website_flow ul{width: calc(60% - 20px);}
}
/*--------media900---------*/
@media (min-width: 900px){
    html{font-size: 14px;}
    .del_900{display: none;}
    .bl_900{display: block;}
    .bl_inline_900{display: inline-block;}

    .layout_box01 li:nth-of-type(even) .sec_box,
    #company .layout_box01 li:nth-of-type(odd) .sec_box{
        flex-direction: row;
        justify-content: center;
    }
    .layout_box01 li:nth-of-type(odd) .sec_box,
    #company .layout_box01 li:nth-of-type(even) .sec_box{
        flex-direction: row-reverse;
        justify-content: center;
    }
    .layout_box01 li .sec_box .txt_outer,#top_contentlist .layout_box01 li .sec_box .txt_outer{
        width: 55%;
        margin: auto;
    }
    .layout_box01 li .sec_box .txt_inner{
        width: 85%;
        box-shadow: none;
    }
    .layout_box01 li:nth-of-type(even) .sec_box .txt_inner,
    #company .layout_box01 li:nth-of-type(odd) .sec_box .txt_inner{
        margin: 0 40px 0 auto;
    }
    .layout_box01 li:nth-of-type(odd) .sec_box .txt_inner,
    #company .layout_box01 li:nth-of-type(even) .sec_box .txt_inner{
        margin: 0 auto 0 40px;
    }
    .layout_box01 li .sec_box [class*='pic']{
        width: 45%;
        min-height: 380px;
        height: auto;
    }
    /*-- header --*/
    .drawer_menu .bg_black{width: 30%;}
    .drawer_menu .bg_white{width: 70%;flex-direction: row;}
    .drawer_menu .bg_white ul:nth-of-type(1){width: 50%;}
    .drawer_menu .bg_white ul:nth-of-type(2){width: 50%;margin: 0 0 0 20px;}
    .drawer_menu .bg_white ul:nth-of-type(2) li{ border-bottom: none;}
    .drawer_menu a.pc_line{border-bottom: 1px dotted #ccc;}

    /*-- index --*/
    #top_about .title_sub{text-align: left;}
    #top_about .f_box{
        display: grid;
        grid-template-columns: calc(100% - 365px) 350px;
        grid-gap: 0 15px;
        grid-template-areas:
        "areaA areaC"
        "areaB areaC";
    }
    #top_about .f_box .grid_title{grid-area: areaA;}
    #top_about .f_box .grid_img{grid-area: areaC;}
    #top_about .f_box .grid_txt{grid-area: areaB;}
    #top_about .top_service_img{margin-bottom: 0;}

    #top_reason .reason_list {grid-template-columns: 1fr 1fr 1fr;gap: 30px 20px;}

    #top_contentlist .layout_box01 li .sec_box .txt_inner{max-width: 660px;background: none;}
    #top_contentlist .layout_box01 li .sec_box [class*='pic']{min-height: 470px;}

    #top_contentlist .layout_box01 li .sec_box::after{font-size: min(8vw ,160px);letter-spacing: 0.1em;color: rgb(189 194 222 / 20%);top: 0;}
    #top_contentlist .layout_box01 li:nth-of-type(even) .sec_box::after{right: 0;left: -10px;}
    #top_contentlist .layout_box01 li .sec_box .recruit_pic{background-position: center bottom;}
    /*-- flow --*/
    #flow .contents_bg::before{
        background: url(../images/pat1_2.png),#fff4f3;
        width: 25%;
    }
    /*-- plan --*/
    .table_plan tr:not(.table_plan_namebox) th{width: 15%;}
    .table_plan tr:not(.table_plan_namebox) td{width: calc((100% - 15%) / 3);}
    #support_example .ac_box .ac_box_layout2{display:flex;}
    #support_example .ac_box .ac_box_layout2 .support_exa_area{width: 50%;}
    #support_example .ac_box .ac_box_layout2 .support_exa_use{width: calc(50% - 30px);margin: 0 0 0 30px;}

}
/*--------media1000---------*/
@media (min-width: 1000px){
    .del_1000{display: none;}
    .bl_1000{display: block;}

    #footer_info.f_box{justify-content: space-between;align-items: center;}
    /*-- index --*/
    #flow .contents_bg::before{width: 30%;}
    /*-- plan --*/
    .table_plan tr:not(.table_plan_namebox){font-size: 1.1em;}
    .table_plan tr:not(.table_plan_namebox) th, .table_plan tr:not(.table_plan_namebox) td {padding: 10px 15px;}

    /*---- /website/xxx ----*/
    .layout_2column{flex-direction: row;gap: 40px;justify-content: space-between;}
    #columu_main{width: 67%;max-width: 800px;}
    #columu_side{width: 27%;}
    #columu_side .side_top_link > div,#columu_side .columu_side_list li{width: calc(100% - 10px);}

    /*-- support --*/
    .dl_support{display: none;}
    .table_support{display: table;width: 100%;text-align: center;border: 1px solid var(--color-gray1);margin: var(--min4-15px) auto;}
    /*.table_support tr{width: 100%;}*/
    .table_support tr:not(:last-of-type){border-bottom: 1px solid var(--color-gray1);}
    .table_support tr.exp{line-height: 1.8em;}
    .table_support tr th{color: #fff;vertical-align: middle;}
    .table_support tr th.support0{background: var(--color-support0);}
    .table_support tr th.support1{background: var(--color-support1);}
    .table_support tr th.support2{background: var(--color-support2);}
    .table_support tr th.support3{background: var(--color-support3);}
    .table_support tr th,.table_support tr td{width: calc(100% / 4);padding: var(--min3-10px);}
    .table_support tr th:not(:last-of-type),.table_support tr td:not(:last-of-type){border-right: 1px solid var(--color-gray1);}
    .table_support tr.exp_sup td{position: relative;padding-bottom: 80px;}
    .table_support tr.exp_sup td .link_p{position: absolute;bottom: 10px;left: 10px;right: 0;width: calc(100% - 20px);}
}
/*--------media1100---------*/
@media (min-width: 1100px){
    .del_1100,#footer_info .f_logo_box .f_access p:not(.copyright){display: none;}
    #header .header_inner .header_navbox,#header .header_inner .header_navbox ul{
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1.4em;
        word-break: keep-all;
    }
    #header .header_inner .header_navbox ul li,#header .header_inner .header_navbox ul li a{padding: 0 5px;}
    .drawer_menu .bg_white ul:nth-of-type(1){width: 40%;}
    .drawer_menu .bg_white ul:nth-of-type(2){width: 60%;}
    /*-- footer --*/

    #footer_info .f_logo_box{display: block; width: auto;}
    #footer_info .f_logo_box .f_access{margin: 0;}
    #footer_info .f_logo_box .copyright{position: initial;}
    #footer_info .f_list_box{display: flex;}
    #footer_info .f_list_box ul{margin-right: 30px;}
    #footer_info .f_list_box ul:first-of-type{margin-right: 25px;}
    #footer_info .f_list_box ul li{margin-bottom: 8px;}
    #footer_info .f_list_box ul li a:hover{color: #b04d97;}
    #footer_info .f_list_box ul li .point2{padding-left: 18px;font-size: 0.9em;color: #97adcb;}
    #footer_info .f_list_box ul li .point2::before{border-width: 8px 6px 0 6px;}

}
/*--------media1200---------*/
@media (min-width: 1200px){
    .drawer_menu{
        align-content: center;
    }
    .layout_box01 li .sec_box .side_space{
        display: block;
        width: calc(45% - 800px);
    }
    #company .layout_box01 li .sec_box [class*='pic']{
        max-width: 700px;
    }

}


/*print_only_style*/
@media print{
    html{font-size: 13px;}
    .lazy_fade,.fadein1{opacity: 1;}
    .list4 li,.list_result li{width: calc((100% / 3) - 10px);}

    #footer_contact .f_box {flex-wrap: nowrap;flex-direction: row;}
    #header{position: unset;}
    .other_head, .other_head_sub{height: 260px;}
}