@charset "utf-8";

/* 背景装飾 */
.cb { color: #0039a7;}
.clb { color: #579bde;}
.bg_w { background: #fff;}
.bg_lb { background:#f1f8fd;}
.bg_b { background: #579bde;}
.bg_g { background: #f4f4f4;}
.bg_grad_b { background-image: linear-gradient(90deg, #009ce1, #86c4ed);}
.bg_grad_db { background-image: linear-gradient(90deg, #0039a7, #3361b9);}
.box_shadow { background: #fff; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);}


h2.sb_tit {
    padding: 50px 0;
    font-size: 200%;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    color: #0039a7;
}
@media only screen and (max-width:768px){
    h2.sb_tit { padding: 30px 0; font-size:150%;}
}


/* ※つき */
.notes { display: block; position: relative; padding-left:15px; font-size:12px; line-height: 150%;}
.notes::before { position: absolute; left:0; content:"※";}
.notes2 { display: block; position: relative; font-size:12px; line-height: 150%;}
@media only screen and (max-width:768px){
    .notes {line-height: 150%;}
}



/* 詳細ボタン */
.b_more { margin: auto; width: 100%; max-width: 360px;}
.b_more a,
.b_more span {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    color: #fff;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
    border-radius: 100px;
    box-shadow: 0 3px 3px 0 rgba(45, 61, 139, 0.25);
    overflow: hidden;
}
.b_more a::before,
.b_more a::after,
.b_more span::before,
.b_more span::after {
    display: block; clear: both; content:"";
    transition: all 0.3s ease-out;
}
.b_more a::before,
.b_more span::before {
    position: absolute; top: 0; bottom: 0;
    margin: auto;
    background: #fef100 url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/arrow1_b.webp") no-repeat center center;
    border-radius: 100px;
    z-index: 2;
}
.b_more a::after,
.b_more span::after {
    position: absolute; top: 0; left:-100%;
    width: 100%; height: 100%;
    color: #fff;
    font-size: 106%;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
    z-index:1;
}
.b_more a::after,
.b_more span::after{ background: rgba(255,255,255,0.20);}
.b_more.arrow_s a,
.b_more.arrow_s span{ padding: 6px; font-size: 87.5%;}
.b_more.arrow_s a::before,
.b_more.arrow_s span::before { 
    right:17px;
    width: 23px; height: 23px;
    background-size:10px auto;
}
.b_more.arrow_m a,
.b_more.arrow_m span{ padding: 8px; font-size:100%;}
.b_more.arrow_m a::before,
.b_more.arrow_m span::before { 
    right:17px;
    width: 25px; height: 25px;
    background-size:12px auto;
}
.b_more.arrow_m2 a,
.b_more.arrow_m2 span { padding: 18px 20px; font-size: 131.2%;}
.b_more.arrow_m2 a::before,
.b_more.arrow_m2 span::before {
    right:27px;
    width: 37px; height: 37px;
    background-size:15px auto;
}
.b_more.arrow_l a,
.b_more.arrow_l span { padding: 22px 20px; font-size: 150%;}
.b_more.arrow_l a::before,
.b_more.arrow_l span::before {
    right:30px;
    width: 41px; height: 41px;
    background-size:17px auto;
}
.b_more.plus a,
.b_more.plus span{ padding: 22px 20px; font-size: 150%;}
.b_more.plus a::before,
.b_more.plus span::before {
    right:30px;
    width: 41px; height: 41px;
    background-image: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/b_plus.webp");
    background-size:100% auto;
}
.b_more.blank { margin: inherit; max-width:465px;}
.b_more.blank a::before,
.b_more.blank span::before {
    right:30px;
    width: 41px; height: 41px;
    background-image: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/b_blank.webp");
    background-size:30px auto !important;
}
.b_more a.txt_long { text-align: left;}
.b_more.b_more_y { margin: 10px 0 0 !important; max-width: 230px !important;}
.b_more.b_more_y a,
.b_more.b_more_y span {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    padding: 3px 20px;
    font-size:75%;
    font-weight: 700;
    color: #0039a7;
    letter-spacing: 0;
    text-align:left;
    background:#FFF;
    border: 3px solid #fef100;
}
.b_more.b_more_y a::before,
.b_more.b_more_y span::before {
    right:15px;
    width: 20px; height: 20px;
    background-size:10px auto;
}
.b_entry {
    padding: 8px;
    width: 100% !important;
    background-image: linear-gradient(90deg, #009ce1, #009ce1, #003aa8);
    border-radius: 10px;
    box-shadow: 0 3px 3px 0 rgba(45, 61, 139, 0.25);
}
.b_entry a {
    position: relative;
    display: block;
    padding: 20px 130px 20px 15px;
    font-size: 175%;
    font-weight: 700;
    text-align: center;
    color: #0039a7;
    background: #fff;
    border-radius: 3px;
}
.b_entry a::before {
    display: block; clear: both; content:"";
    position: absolute; top: -1px; right: -1px;
    width: calc(150px + 2px); height:calc( 100% + 2px);
    background-image: linear-gradient(90deg, #1061ae, #003aa8);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.b_entry a::after {
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: 0;
    width: 120px; height: 100%;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/b_blank_w.webp") no-repeat center center;
    background-size: 55px auto;
}
.btn_box { display: flex; flex-wrap: wrap; gap:40px; padding-bottom: 120px;}
.btn_box p { width: calc(50% - 20px);}
.btn_box:has(.b_entry) { padding-bottom: 60px;}
@media only screen and (min-width:768px){
    .b_more a:hover,
    .b_more span:hover,
    .b_entry a:hover {text-decoration: none;}
    .b_more a:hover::after,
    .b_more span:hover::after { left:0; text-decoration: none; }
    .b_entry:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
    .b_more.arrow_s a,
    .b_more.arrow_s span { padding: 7px;}
    .b_more.arrow_l a,
    .b_more.arrow_l span { padding: 12px; font-size: 100%; line-height: 150%;}
    .b_more.arrow_l a::before,
    .b_more.arrow_l span::before { right:27px; width: 28px; height: 28px; background-size:12px auto;}
    .b_more.arrow_l a:has(br),
    .b_more.arrow_l span:has(br) { padding: 7px;}
    .b_more.arrow_spl a,
    .b_more.arrow_spl span { padding: 17px 20px; font-size: 130%;}
    .b_more.arrow_spl a::before,
    .b_more.arrow_spl span::before {
        right:30px;
        width: 37px; height: 37px;
        background-size:17px auto;
    }
    .b_more.arrow_sps a,
    .b_more.arrow_sps span { padding: 7px; font-size: 100%;}
    .b_more.arrow_sps a::before,
    .b_more.arrow_sps span::before { 
        right:17px;
        width: 23px; height: 23px;
        background-size:10px auto;
    }
    .b_more.plus { max-width: 300px;}
    .b_more.plus a,
    .b_more.plus span { padding: 15px; font-size: 125%;}
    .b_more.plus a::before,
    .b_more.plus span::before { right:27px; width: 34px; height: 34px;}
    .b_more.blank a::before,
    .b_more.blank span::before { background-size:25px auto !important; }
    .b_more a.txt_long { text-align:center;}
    .b_entry {padding: 5px;}
    .b_entry a {
        padding: 10px 80px 10px 20px;
        font-size: 125%;
        text-align: left;
    }
    .b_entry a::before {
        width: 100px;
        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    .b_entry a::after {
        width: 65px;
        background-size: 38px auto;
    }
    .btn_box {flex-direction: column; align-items: center; gap:20px; padding-bottom:70px;}
    .btn_box p { width:100%;}
    .btn_box:has(.b_entry) { padding-bottom: 40px;}
}
@media only screen and (max-width:320px){
    .b_more.arrow_l a,
    .b_more.arrow_l span { font-size: 87%; letter-spacing: 0;}
    .b_more.arrow_l a::before,
    .b_more.arrow_l span::before { right:10px;}
    .b_more.arrow_spl a,
    .b_more.arrow_spl span { padding: 15px 25px; font-size: 125%; text-align: left;}
    .b_more.arrow_spl a::before,
    .b_more.arrow_spl span::before { right:20px; width: 30px; height: 30px;}
    .b_entry a { padding: 10px 70px 10px 10px; font-size:112.5%;}
    .b_entry a::before { width: 85px;}
    .b_entry a::after { width: 50px;}
}




/* アンカーボタン */
ul.anchor_box { display: flex; flex-wrap: wrap; gap:17px 15px;}
ul.anchor_box li a {
    position: relative;
    display: block;
    padding-left: 25px;
    padding-right: 55px;
    height: 52px; line-height: 48px;
    font-size: 100%;
    font-weight: 700;
    text-align: center;
    border: 2px solid #0039a7;
    border-radius: 50px;
}
ul.anchor_box li a::after {
    display: block; clear: both; content:"";
    position: absolute; top: 0; bottom: 0; right:10px;
    margin: auto;
    width: 29px; height: 29px;
    color: #fff;
    font-size: 106%;
    background: #0039a7 url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/anchor_b.webp") no-repeat center 58%;
    background-size: 13px auto;
    border-radius: 100px;
}
ul.anchor_box.col3 li { width: calc(33.3% - 13.33px);}
@media only screen and (min-width:769px){
    ul.anchor_box li a:hover { color: #fff; text-decoration: none; background:#0039a7;}
}
@media only screen and (max-width:768px){
    ul.anchor_box { gap:10px 6px;}
    ul.anchor_box li a {
        padding-left: 15px;
        padding-right: 25px;
        height: 37px; line-height: 32px;
        font-size: 75%;
    }
    ul.anchor_box li a::after {
        width: 18px; height: 18px;
        background-size: 10px auto;
    }
    ul.anchor_box.col3 li { width: calc(50% - 3px);}
}



/* タブボタン */
ul.tab { display:flex;}
ul.tab li {
    cursor: pointer;
    position: relative;
    padding: 25px 30px;
    font-size: 156.2%;
    color: #fff;
    text-align: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background: #009ce1;
}
ul.tab.col2 li { width: 50%;}
ul.tab.col3 li { width: 33.3%;}
ul.tab li::before { border-top: 15px solid #009ce1;}
ul.tab li.active::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; bottom: -15px;
    width: 0; height: 0;
    margin: auto;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 0;
}
ul.tab li.active { background: #0039a7;}
ul.tab li.active::before { border-top: 15px solid #0039a7;}
.select_tag {
    display: flex; flex-wrap: wrap; gap:10px;
    width: 100%;
    padding: 40px 35px 35px;
    background:#f0f1fa;
}
.select_tag p {
    cursor: pointer;
    padding: 3px 10px 0;
    height: 40px;
    font-weight: 700;
    color: #0039a7;
    text-align: center;
    background: #fff;
    border: 2px solid #0039a7;
    border-radius: 50px;
    box-sizing: border-box;
}
.select_tag p:has(a)  { padding:0; height:auto;}
.select_tag p a { display: block; padding: 3px 10px 0; height: 36px; border-radius: 50px; text-decoration: none;}
.select_tag.col4 p {
    min-width:calc(25% - 7.5px);
}
.select_tag.col6 p {
    min-width:calc(16.66% - 8.33px);
}
.select_tag p.active { color: #fff; background: #0039a7;}
.txt_tag {
    display: flex; flex-wrap: wrap; gap:10px;
    width: 100%;
    padding: 40px 0;
}
.txt_tag p { cursor: pointer;}
@media only screen and (min-width:768px){
    ul.tab li:hover { color:#fef100;}
    .select_tag p.active:hover  { color:#fef100; background:#0039a7;}
    .select_tag p:hover { color:#fef100; background:#0039a7;}
    .select_tag p a:hover { color:#fef100; text-decoration: none;}
}
@media only screen and (max-width:768px){
    ul.tab li {
        padding: 12px 0;
        font-size: 100%;
        letter-spacing: 1px;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }
    ul.tab li::before { border-top: 8px solid #009ce1;}
    ul.tab li.active::before {
        bottom: -8px;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
    }
    ul.tab li.active::before { border-top:8px solid #0039a7;}
    .select_tag { gap:5px; padding: 20px;}
    .select_tag p {
        width:auto; min-width: inherit;
        padding: 0 10px;
        height: 30px; line-height: 28px;
        font-size: 81.2%;
        border: 1px solid #0039a7;
    }
    .select_tag.col4 p {
        min-width:calc(50% - 2.5px);
    }
    .select_tag.col6 p {
        min-width:calc(33.3% - 7px);
        height: 40px;
        line-height: 38px;
        font-size: 87.5%;
        border: 2px solid #0039a7;
    }
    .select_tag.sp_col_free p {
        width: auto;
        min-width:inherit;
    }
}




/* サービスバナー */
.service_bana {
    position: relative;
    margin: auto;
    padding: 3px;
    width: 100%; max-width: 703px;
    border-radius: 20px;
    background: #0039a7;
    overflow: hidden;
}
.service_bana a {
    position: relative;
    display: flex; align-items: center;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius:0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}
.service_bana a::before {
  content: "";
  position: absolute; left:-30px; top: -5px;
  width: 260px; height: 110%;
  background: #0039a7;
  transform: skewX(-30deg);
  transform-origin: left;
  z-index: 0;
}
.service_bana a > * { position: relative; z-index: 1;}
.service_bana div:nth-child(1) {
    padding: 30px 0;
    width: 235px;
    font-size: 156.2%;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
}
.service_bana div:nth-child(2) {
    display: flex; justify-content: space-between; gap:10px;
    padding: 0 20px; width: calc(100% - 235px);
}
.service_bana div:nth-child(2) .logo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0;
    width: 200px;
    background: none;
}
.service_bana div:nth-child(2) .logo img { margin: auto;}
.service_bana div:nth-child(2) .logo_kanna { width: 79%; max-width: 159px; }
.service_bana div:nth-child(2) .logo_photomanager { width: 85%; max-width: 170px;}
.service_bana div:nth-child(2) .logo_manabiba { width: 58%; max-width:117px;}
.service_bana div:nth-child(2) .logo_connect { width: 86%; max-width: 172px;}
.service_bana .b_more {width: 210px !important;}
@media only screen and (min-width:768px){
    .service_bana a { text-decoration: none;}
}
@media only screen and (max-width:768px){
    .service_bana {
        position: relative;
        padding: 2px;
    }
    .service_bana a {
        display: block;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }
    .service_bana a::before { display: none;}
    .service_bana div:nth-child(1) {
        padding: 5px 0;
        width: 100%;
        font-size: 112.5%;
        background: #0039a7;
    }
    .service_bana div:nth-child(2) {
        display: block;
        padding: 0 0 8px;
        width: 100%;
    }
    .service_bana div:nth-child(2) .logo { display: block; margin: auto; padding: 20px 0;}
    .service_bana div:nth-child(2) .logo img { max-width:none;}
    .service_bana div:nth-child(2) .logo_kanna { width: 158px; }
    .service_bana div:nth-child(2) .logo_photomanager { width:200px;}
    .service_bana div:nth-child(2) .logo_manabiba { width:122px;}
    .service_bana div:nth-child(2) .logo_connect { width: 175px;}
    .service_bana div:nth-child(2) .b_more { max-width: 210px;}
}



/* パネルボックス */
.box_list {
    display:flex; flex-wrap: wrap; gap:50px 40px;
}
.box_list .box {
    position: relative;
    width: calc(33.3% - 26.66px);
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
}
.box_list .box a { color: #222;}
.box_list.col2 .box { width: calc(50% - 20px);}
.box_list.col4 { gap:25px;}
.box_list.col4 .box { width: calc(25% - 18.75px);}
.box_list .box .new {
    position: absolute; top: 0; left: 0;
    width: 100%; height: auto; aspect-ratio:175 / 58;
    max-width:65px;
    text-indent: -9999px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/icon_new.webp") no-repeat;
    background-size: 100% auto;
}
.box_list .box .obi {
    padding: 10px;
    font-size: 131.2%;
    font-weight: 800;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(90deg, #0039a7, #009be1);
}
.box_list .box .pic { position: relative;}
.box_list .box .pic img {
    width: 100%; height: auto;
    aspect-ratio: 307 / 170;
    object-fit: cover;
}
.box_list .box .txt { padding: 20px 25px 25px;}
.box_list .box .cate { display:flex; flex-wrap: wrap; gap:10px; margin-bottom: 10px;}
.box_list .box .cate span {
    min-width: 90px; height: 22px;
    padding: 0 10px;
    line-height: 20px;
    font-size: 70%;
    font-weight: 700;
    text-align: center;
    color: #0039a7;
    border:1px solid #0039a7;
    border-radius: 30px;
}
.box_list .box .mid {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 82px;
    font-weight: 700;
    line-height: 170%;
}
.box_list .box .mid.mid_l { margin-bottom:10px; font-size: 125%; line-height: 162%;}
.box_list .box .company { margin-bottom: 15px;}
.box_list .box .company b { display: block; margin-bottom: 5px; font-size: 100%; font-weight: 700;}
.box_list .box .company p { display:flex; flex-wrap: wrap; font-size:68.8%; line-height:154%;}
.box_list .box .company p span:nth-child(1) { width:60px;}
.box_list .box .company p span:nth-child(2) { width: calc(100% - 60px);}
.box_list .box .company p:last-child span:nth-child(2) { height: 34px;}
.box_list .b_more { margin-top: 20px; max-width: 210px;}
@media only screen and (min-width:768px){
    .box_list .box a { text-decoration: none;}
}
@media only screen and (max-width:968px){
    .box_list .box { width: calc(50% - 20px);}
}
@media only screen and (max-width:768px){
    .box_list { gap:30px;}
    .box_list .box { width:100%; box-shadow: 0 7px 15px 0 rgba(45, 61, 139, 0.15);}
    .box_list.col2 .box { width:100%;}
    .box_list .box .pic img { aspect-ratio: 330 / 190;}
    .box_list .box .txt { padding: 20px 25px;}
    .box_list .box .company p span:nth-child(1) { width:60px;}
    .box_list .box .company p span:nth-child(2) { width: calc(100% - 60px);}
    .box_list .box .mid { min-height: 102px; font-size: 125%;}
}



/* Related */
.other_cont .inner { padding: 100px 0;}
.other_cont h3 { font-size: 175%; color:#003aa8;}
.other_cont .box_list { padding:30px 0 80px;}
.other_cont .b_more.arrow_l { max-width:430px;}
@media only screen and (max-width:768px){
    .other_cont .inner { padding: 35px 0 70px; width: 100%;}
    .other_cont h3 { margin-bottom: 0; font-size: 125%; text-align: center;}
    .other_cont .box_list { display: block; margin: auto; padding:25px 0 35px; width: 305px;}
    .other_cont .box_list .slick-list { overflow:visible;}
    .other_cont .box_list .box { margin: 0 15px;}
    .other_cont .box_list .box .pic img { aspect-ratio: 275 / 160;}
    .other_cont .box_list .box .mid { -webkit-line-clamp: 4; margin-bottom: 10px; min-height: 120px; font-size: 118.8%}
    .other_cont .b_more.arrow_l { width:75%; max-width: 298px; min-width:298px;}
}


.other_cont2 .inner { padding: 100px 0;}
.other_cont2 h3 { font-size: 175%; color:#003aa8;}
.other_cont2 .box_list { padding:30px 0 0;  gap:50px 25px;}
.other_cont2 .comingsoon {
    display: flex; justify-content:center; align-items: center;
    background-image: linear-gradient(90deg, #0039a7, #009be1);
    min-height: 200px;
}
.other_cont2 .comingsoon span {
    font-size: 218.8%;
    font-weight: 700;
    line-height: 150%;
    color: #fff;
    text-align: center;
}
.other_cont2 .logo {
    display:flex; flex-direction: column; justify-content: center;
    width: 100%; height: auto; aspect-ratio: 190 / 100;
}
.other_cont2 .logo img { margin: auto;}
.other_cont2 .logo_pickbuddy { max-width: 170px;}
.other_cont2 .logo_connect { max-width: 170px;}
.other_cont2 .logo_kanna { max-width: 170px;}
.other_cont2 .logo_photomanager { max-width: 170px;}
.other_cont2 .logo_manabiba { max-width: 140px;}
.other_cont2 .come { text-align: center;}
@media only screen and (max-width:768px){
    .other_cont2 .inner { padding: 35px 0 70px;}
    .other_cont2 h3 { margin-bottom: 0; font-size: 125%; text-align: center;}
    .other_cont2 .box_list .box { width: calc(50% - 12.5px);}
}
@media only screen and (max-width:468px){
    .other_cont2 .inner { padding: 35px 0 70px;}
    .other_cont2 h3 { margin-bottom: 0; font-size: 125%; text-align: center;}
    .other_cont2 .box_list { gap:20px;}
    .other_cont2 .box_list .box { margin: auto; width:100%; max-width: 275px;}
    .other_cont2 .logo { aspect-ratio: 190 / 40;}
}





/* New Icon */
.new {
    position: absolute; top:0; left:0; z-index: 9;
    width: 100%; height: auto; aspect-ratio: 175 / 58;
    max-width: 65px;
    text-indent: -9999px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/icon_new.webp") no-repeat;
    background-size: 100% auto;
}

/* 
濃いブルー　#003aa8

*/


.pager { display: flex; flex-wrap: wrap; justify-content: center; gap:35px;}
.pager li { 
    width: 49px; height: auto; aspect-ratio: 1 / 1;
    font-size: 125%;
    text-align: center;
    background: #fff;
    border: 2px solid #003aa8;
    border-radius: 100px;
    box-sizing: border-box;
}
.pager li a,
.pager li span { width: 45px; height: auto; line-height: 45px; aspect-ratio: 1 / 1; color:  #003aa8;}
.pager li.first,
.pager li.prev,
.pager li.next,
.pager li.last {
    text-indent: -9999px;
    background-position: center center !important;
    background-size: 50% auto !important;
}
.pager li.active { background: #003aa8;}
.pager li.active span { color: #fff;}
.pager li.first { background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/pager_firstlast.webp") no-repeat;}
.pager li.prev { background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/pager_prevnext.webp") no-repeat;}
.pager li.next { background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/pager_prevnext.webp") no-repeat; transform: scale(-1, 1);}
.pager li.last { background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/pager_firstlast.webp") no-repeat; transform: scale(-1, 1);}
@media only screen and (max-width:768px){
    .pager { gap:15px;}
    .pager li { font-size: 93.8%;}
    .pager li { width: 39px; height: 39px; line-height: 33px;}
    .pager li a,
    .pager li span { width: 35px; height: 35px; line-height: 33px;}
}


.ichiji {
	background-image: linear-gradient(90deg, #0039a7, #3361b9);
}
.ichiji .bg {
	margin: auto;
	padding: 80px 0 130px;
	width: 100%; max-width: 750px;
	background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/about/pickbuddy/ichiji_bg.webp") no-repeat center center;
	background-size: 100% auto;
}
.ichiji h2 {
	margin: 0 auto 40px !important;
	padding: 0 !important;
    font-size: 312.5%;
    font-weight: 800;
    line-height: 150%;
    text-align: center;
	color: #FFF !important;
    letter-spacing: 2px;
}
.ichiji h2::before { display: none !important;}
.ichiji .come {
	font-size: 137.5%;
	font-weight: 600;
	color: #fff;
	text-align: center;
}
.ichiji_re { position: relative; top:-40px;}
@media only screen and (max-width:768px){
	.ichiji .bg { padding: 65px 0 75px !important; background-size: 110%;}
	.ichiji h2 { margin-bottom: 25px !important; font-size: 181.2% !important;}
	.ichiji .come { font-size: 100%;}
}




/*=================================================================
  ABOUT
===================================================================*/
.modal_box .movie { width: 100%; aspect-ratio: 16 / 9;}
.modal_box .movie iframe { width: 100%; height: 100%;}


/* About Top */
#about .gaiyou .inner { padding: 65px 0 100px; max-width: 980px;}
#about .gaiyou .box { display: flex; flex-wrap: wrap; align-items: center; gap:20px;}
#about .gaiyou .box .txt {
    width:calc(50% - 20px);
    color: #003aa8;
}
#about .gaiyou .box .txt h2 {
    font-size: 243.8%;
    color: #003aa8;
}
#about .gaiyou .box .txt p{
    margin: 40px 0 45px;
    font-size: 137.5%;
    line-height: 190%;
    font-weight: 800;
}
#about .gaiyou .box .txt .b_more { margin-left: 0;}
#about .gaiyou .box .pic { width: 50%; text-align: center;}
#about .gaiyou .box .pic p { margin:0 auto 20px; max-width: 377px;}
#about .gaiyou .box .youtube {
    position: relative;
    border: 4px solid #003aa8;
}
#about .gaiyou .box .youtube a {position: relative; display: block;}
#about .gaiyou .box .youtube a::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
    margin: auto;
    width: 80px; height: 80px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/about/video_btn.webp") no-repeat;
    background-size: 100% auto;
}
@media only screen and (max-width:768px){
    #about .gaiyou { padding: 0;}
    #about .gaiyou .inner { padding: 30px 0 40px;}
    #about .gaiyou .box { flex-direction: column;}
    #about .gaiyou .box .txt,
    #about .gaiyou .box .pic { width: 100%; text-align: center;}
    #about .gaiyou .box .txt h2 { font-size: 243.8%;}
    #about .gaiyou .box .txt p { 
        margin:30px 0 10px;
        font-size: 106.2%;
        line-height: 170%;
        text-align: center;
    }
    #about .gaiyou .box .pic p { width: 80%;}
    #about .gaiyou .box .youtube { border: 2px solid #003aa8;}
    #about .gaiyou .box .youtube a::before { width: 50px; height: 50px;}
    #about .gaiyou .box .b_more { max-width: 225px;  margin: 10px auto 0 !important;}
}


#about .point { overflow: hidden;}
#about .point .inner { position: relative; padding:90px 0 95px; max-width:1000px;}
#about .point .inner::before {
    display: block; clear: both; content:"";
    position: absolute; bottom:-20px; right:-130px; z-index: 9;
    width: 100%; height: auto; max-width:239px; aspect-ratio: 580 / 550;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan6.webp") no-repeat;
    background-size: 100% auto;
}
#about .point h2 { 
    margin-bottom:110px;
    font-size: 256.2%;
    line-height: 150%;
    text-align: center;
    color: #fff;
}
#about .point h2 b { font-size: 130%;}
#about .point_list { display:flex; gap:30px;}
#about .point_list  .box {
    position: relative;
    padding: 60px 15px 30px;
    width: 33.3%;
    background: #fff;
}
#about .point_list .box::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 15px;
    background-image: linear-gradient(90deg, #1692d0, #87c4ed);
}
#about .point_list .box .mid { 
    position: absolute; top:-70px; left: 0; right: 0;
    margin: auto; width: 50%; max-width: 150px;
}
#about .point_list .box .come {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 90px;
    font-size: 175%; line-height:164%;
    font-weight: 700;
    color: #003aa8;
    text-align: center;
}
#about .point_list .box .pic { margin:10px auto 0; width: 50%; max-width: 150px;}
@media only screen and (max-width:768px){
    #about .point .inner { padding:30px 0 70px; max-width:1000px;}
    #about .point .inner::before {
        position: absolute; bottom:-10px; right:-20px; aspect-ratio: 580 / 530;
        width: 100%; height: auto; max-width:100px;
    }
    #about .point h2 { margin-bottom: 30px; font-size: 150%;}
    #about .point_list { flex-direction: column; gap:20px;}
    #about .point_list .box { display: flex; justify-content: flex-start; gap:10px; width: 100%; padding: 15px 10px 20px;}
    #about .point_list .box::before { height: 10px;}
    #about .point_list .box .mid { position: static; width: 60px; }
    #about .point_list .box .come { 
        font-size: 125%; line-height:164%; width: calc(100% - 60px); line-height: 150%; min-height:inherit; text-align: left;
    }
    #about .point_list .box .pic { position: absolute; top:0; right: 0; width: 80px;}
    #about .point_list .box:nth-child(1) .pic { right: 0;}
    #about .point_list .box:nth-child(2) .pic { right: 10px;}
    #about .point_list .box:nth-child(3) .pic { right: 10px;}
}


#about .service .inner { padding: 150px 0 200px; max-width: 1170px;}
#about .service h2 {
    margin-bottom: 50px;
    position: relative;
    color: #003aa8;
    text-align: center;
}
#about .service h2 b {
    position: absolute; left: 0; right: 0; bottom:0;
    font-size: 300%;
}
#about .service h2 span { font-size: 150px; font-weight: 800; opacity: 0.2; }
#about .service .catch {
    margin-bottom: 50px;
    font-size: 158.2%;
    text-align: center;
    color: #003aa8;
}
#about .service .box_list .obi {
    padding: 15px 10px;
    font-size: 158.2%;
    font-weight: 800;
    letter-spacing: 2px;
}
#about .service .box_list .pickbuddy { max-width: 170px;}
#about .service .box_list .logo_kanna { max-width: 190px;}
#about .service .box_list .logo_photomanager { max-width: 220px;}
#about .service .box_list .logo_manabiba { max-width:130px;}
#about .service .box_list .txt { padding: 0 10px 40px;}
#about .service .box_list .come { 
    font-size: 118.8%;
    line-height: 178%;
    font-weight: 800;
}
#about .service .box_list .b_more { margin-top:35px;}
@media only screen and (min-width:769px){
    #about .service .box_list .box.col1 {
        margin: 0 auto 75px;
        width: 100% !important;
        max-width: 1000px !important;
    }
    #about .service .box_list .box.col1 .txt {
        padding:70px 60px;
    }
    #about .service .box_list .box.col1 a { display: flex; flex-wrap: wrap;　align-items: flex-start !important;}
    #about .service .box_list .box.col1 .obi { width: 100%;}
    #about .service .box_list .box.col1 .logo_connect { width: 100%; max-width: 295px;}
    #about .service .box_list .box.col1 .txt { width: 45%; padding:70px 60px;}
    #about .service .box_list .box.col1 .come {
        font-size: 162.5%;
        line-height: 169%;
        text-align: left;
    }
    #about .service .box_list .box.col1 .zu { position: relative; width: 55%; aspect-ratio: 636 / 386;}
    #about .service .box_list .box.col1 .zu img { position: absolute; top:80px; right: -10%; width:115%; max-width:636px; height: auto;}
    #about .service .box_list .box.col1 .b_more { max-width: 100%;}
    #about .service .box_list .logo { padding: 20px 0;}
}
@media only screen and (max-width:768px){
    #about .service .inner { padding:60px 0 50px; max-width: 1170px;}
    #about .service h2 { margin-bottom: 20px;}
    #about .service h2 b {font-size: 150%; }
    #about .service h2 span {  font-size: 343.2%;}
    #about .service .catch { margin-bottom:0; font-size: 100%; color: #222;}
    #about .service .box_list .box.col1 .zu { width:100%; padding:0 20px 20px; position: relative;}
    #about .service .box_list .box { max-width: none;}
    #about .service .box_list .obi { padding: 10px 10px; font-size: 156.2%;}
    #about .service .box_list .txt { padding: 0 10px 30px;}
    #about .service .box_list .box .come { font-size: 106.2%;}
    #about .service .box_list .logo {  aspect-ratio: 330 / 145;}
    #about .service .box_list .logo_sample { max-width: 170px;}
    #about .service .box_list .logo_connect { max-width: 212px;}
    #about .service .box_list .logo_kanna { max-width: 206px;}
    #about .service .box_list .logo_photomanager { max-width: 215px;}
    #about .service .box_list .logo_manabiba { max-width:154px;}
}



#about .feature { margin-bottom: 100px;}
#about .feature .inner { padding: 120px 0;}
#about .feature h2 {
    margin: auto;
    width: 100%; height: auto; max-width:401px; aspect-ratio: 401 / 95;
    font-size: 256.2%;
    line-height: 173%;
    color: #fff;
    text-align: center;
    line-height: 75px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/about/index/feature_tit.webp") no-repeat;
    background-size: 100% auto;
}
#about .feature .gaid { padding: 35px 60px 75px;}
#about .feature .gaid h3 { 
    margin-bottom: 55px;
    font-size: 256.2%;
    line-height: 150%;
    color: #003aa8;
    text-align: center;
}
#about .feature .gaid h3 b { position: relative; top: 15px; font-weight: 800;}
#about .feature .gaid h3 span { border-bottom: 10px solid #faf138;}
#about .feature .gaid .come {
    font-size: 156.2%;
    line-height: 188%;
    text-align: center;
}
#about .feature .matome {
    display: flex; gap:70px;
    padding: 60px 60px 40px;
    background:#f1f8fd url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/about/index/matome_arrow.webp") no-repeat center center;
    background-size: 80px auto;
}
#about .feature .matome .box { width: 50%;}
#about .feature .matome h4 {
    margin-bottom: 20px;
    font-size: 175%;
    color: #003aa8;
    text-align: center;
}
#about .feature .matome .box:nth-child(2) .pic { background:#003aa8;}
#about .feature .matome .logo { margin:20px auto 0; width: 100%; max-width: 160px;}
#about .feature .otoku {
    margin-bottom: 70px;
    background: #fff;
    box-shadow: 0px 0px 75px 0px rgba(0, 0, 0, 0.10);
}
#about .feature .otoku .cost {
    position: relative;
    padding: 70px 40% 70px 100px;
}
#about .feature .otoku .cost h4 {
    margin-bottom: 20px;
    font-size: 200%;
    font-weight: 800;
    color: #003aa8;
    line-height: 156%;
}
#about .feature .otoku .cost .come {
    font-size: 125%;
    line-height: 175%;
}
#about .feature .otoku .cost .pic {
    position: absolute; bottom: 0; right:40px;
    width:32%;
}
#about .banner { display: flex; flex-direction: column; gap:30px;}
@media only screen and (max-width:768px){
    #about .feature { margin-bottom: 40px;}
    #about .feature .inner { padding: 50px 0;}
    #about .feature h2 { max-width:230px; font-size: 150%;line-height: 40px;}
    #about .feature .gaid { padding: 10px 5px 30px;}
    #about .feature .gaid h3 { margin-bottom: 30px; font-size: 131.2%;}
    #about .feature .gaid .come { font-size: 93.8%; line-height: 168%;}
    #about .feature .matome {
        position: relative; flex-direction: column; gap:40px;
        padding:35px 17px; background:#f1f8fd;
    }
    #about .feature .matome .box { position: relative; width:100%;}
    #about .feature .matome .box:nth-child(1)::before {
        display: block; clear: both; content:"";
        position: absolute; left: 0; right: 0; bottom:-50px;
        margin: auto;
        width: 65px; height: 65px;
        background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/about/index/matome_arrow2.webp") no-repeat center center;
        background-size: 100% auto;
    }
    #about .feature .matome h4 { margin-bottom: 10px; font-size: 125%;}
    #about .feature .matome .logo { margin:15px auto 0;max-width: 117px;}
    #about .feature .otoku { margin-bottom: 50px;}
    #about .feature .otoku .cost { padding: 30px 5px 0;}
    #about .feature .otoku .cost h4 { margin-bottom: 10px; font-size: 125%; text-align: center;}
    #about .feature .otoku .cost .come { font-size: 93.8%; padding: 0 10px 20px; text-align: center;}
    #about .feature .otoku .cost .pic { position: static;  width:100%;}
    #about .feature .otoku .cost .pic img { width: 100%; max-width:230px; margin: 0 0 0 60px !important;}
    #about .banner { display: flex; flex-direction: column; gap:25px;}    
}



/*=================================================================
  ABOUT Service
===================================================================*/
/* Gaiyou */
#about_service .gaiyou .inner { padding: 90px 0 80px; max-width: 980px;}
#about_service .gaiyou .box { display: flex; flex-wrap: wrap; align-items: center; gap:20px;}
#about_service .gaiyou .box .txt {
    width:calc(50% - 20px);
    color: #003aa8;
}
#about_service .gaiyou .box .txt h1 span {
    position: relative;
    display: inline-block;
    padding: 0 20px 0 30px;
    height: 45px; line-height: 45px;
    color: #fff;
    font-size: 150%;
    font-weight: 700;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#about_service .gaiyou .box .txt h1  span::before{
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: -39px;
    width: 40px; height:auto; aspect-ratio: 40 / 45;
    background: #009ce1;
    clip-path: polygon(0 0, 5% 0, 100% 100%, 0 100%);
}
#about_service .gaiyou .box .txt h1 img { margin: 45px 0;}
#about_service .gaiyou .box .txt h1 img.logo_pickbuddy { width: 70%; max-width:317px; min-width:265px;}
#about_service .gaiyou .box .txt h1 img.logo_kanna { width: 70%; max-width:317px; min-width:265px;}
#about_service .gaiyou .box .txt h1 img.logo_connect { width: 70%; max-width:320px; min-width:275px;}
#about_service .gaiyou .box .txt h1 img.logo_photomanager { width: 70%; max-width:335px; min-width: 285px; }
#about_service .gaiyou .box .txt h1 img.logo_manabiba { width: 48%; max-width:231px; min-width: 210px; }
#about_service .gaiyou .box .txt .come1 {
    font-size: 137.5%;
    line-height: 180%;
    font-weight: 800;
}
#about_service .gaiyou .box .txt .come2 {
    margin: 10px 0 5px;
    font-size: 106.2%;
    font-weight: 800;
    line-height: 170%;
}
#about_service .gaiyou .box .youtube {
    position: relative;
    width: 50%;
    border: 4px solid #003aa8;
}
#about_service .gaiyou .box .youtube a { position: relative; display: block;}
#about_service .gaiyou .box .youtube a::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
    margin: auto;
    width: 80px; height: 80px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/about/video_btn.webp") no-repeat;
    background-size: 100% auto;
}
#about_service .gaiyou .bana {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    margin-top: 55px;
    padding: 30px 50px 30px 70px;
    background: #fff;
}
#about_service .gaiyou .bana .txt {
    width: 42%;
    font-size: 137.5%;
    line-height: 180%;
    font-weight: 800;   
    color: #003aa8;
}
#about_service .gaiyou .bana .pic { width: 55%;}
.modal_box .movie { width: 100%; aspect-ratio: 16 / 9;}
.modal_box .movie iframe { width: 100%; height: 100%;}
@media only screen and (max-width:1200px){
    #about .gaiyou { padding: 65px 0 0;}
    #about_service .gaiyou { padding: 65px 0 0;}
    #container:has(#about .gaiyou) { padding-top: 0;}
    #container:has(#about_service .gaiyou) { padding-top: 0;}
}
@media only screen and (max-width:768px){
    #about .gaiyou { padding:0;}
    #about_service .gaiyou .inner { padding: 30px 0 50px;}
    #about_service .gaiyou .box { flex-direction: column;}
    #about_service .gaiyou .box .txt,
    #about_service .gaiyou .box .youtube { width: 100%;}
    #about_service .gaiyou .box .txt h1 span { font-size: 112.5%; height: 38px; line-height: 35px;}
    #about_service .gaiyou .box .txt h1 span::before { right: -34px; width: 35px;  aspect-ratio: 35 / 38;}
    #about_service .gaiyou .box .txt h1 img { margin: 45px auto 30px;}
    #about_service .gaiyou .box .txt h1 img.logo_kanna { width: 80%; max-width:317px; }
    #about_service .gaiyou .box .txt h1 img.logo_pickbuddy { width: 80%; max-width:317px; }
    #about_service .gaiyou .box .txt .come1 { font-size: 112.5%; text-align: center;}
    #about_service .gaiyou .box .txt .come2{ font-size: 93.8%; text-align: center;}
    #about_service .gaiyou .box .youtube { border: 2px solid #003aa8;}
    #about_service .gaiyou .box .youtube a::before { width: 55px; height: 55px;}
    #about_service .gaiyou .bana {
        flex-direction: column; gap:35px;
        margin-top: 45px;
        padding: 30px 15px;
    }
    #about_service .gaiyou .bana .txt,
    #about_service .gaiyou .bana .pic { width: 100%;}
    #about_service .gaiyou .bana .txt {
        font-size: 112.5%;
        text-align: center;
    }
    #about_service .gaiyou .bana .pic { width: 100%;}
}



/* Function mokuji */
#about_service .function h2 {
    position: relative;
    margin: auto;
    padding: 100px 0 90px;
    max-width: 1000px;
    font-size:256.2%;
    font-weight: 800;
    color:#003aa8;
    text-align: center;
    background-size: 150px auto;
    overflow: hidden;
}
#about_service .function h2::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; bottom:50px;
    margin: auto;
    width: 50px; height: 3px;
    background: #003aa8;
}
#about_service .function h2::after{
    display: block; clear: both; content:"";
    position: absolute; z-index: 9;
    width: 100%; height: auto; 
    background-size: 100% auto !important;
}
#about_service .function h2.denccyan_kanna::after{
    bottom:-20px; right:55px;
    max-width:175px; aspect-ratio: 501 / 580;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan5.webp") no-repeat;
    transform: rotate(5deg);
}
#about_service .function h2.denccyan_photomanager::after{
    bottom:-20px; right:55px;
    max-width:185px; aspect-ratio: 538 / 590;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan9.webp") no-repeat;
    transform: rotate(5deg);
}
#about_service .function h2.denccyan_manabi::after{
    bottom:-5px; right:55px;
    max-width:235px; aspect-ratio: 1145 / 1000;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan10.webp") no-repeat;
}
#about_service .function h2.denccyan_connect::after{
    bottom:-20px; right:55px;
    max-width:160px; aspect-ratio: 454 / 580;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan1.webp") no-repeat;
    transform: rotate(5deg);
}
#about_service .function h2.denccyan_pickbuddy::after{
    bottom:-20px; right:55px;
    max-width:185px; aspect-ratio: 454 / 495;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan11.webp") no-repeat;
}
#about_service .function .anchor { padding:38px 0;}
#about_service .function .anchor ul {
    margin: auto;
    width: 90%; max-width: 1000px;
}
#about_service .function .anchor ul li a { background-color: #fff;}
@media only screen and (min-width:769px){
    #about_service .function .anchor ul li a:hover { color:#003aa8 !important; background-color: #faf138 !important;}
}
@media only screen and (max-width:768px){
    #about_service .function h2 { padding: 45px 0 45px; font-size:125%; background-size: 110px auto;}
    #about_service .function h2::before { bottom: 30px;}
    #about_service .function h2.denccyan_kanna::after{ bottom:-10px; right:20px; max-width:90px;}
    #about_service .function h2.denccyan_pickbuddy::after{ bottom:-10px; right:20px; max-width:90px;}
    #about_service .function h2.denccyan_photomanager::after{ bottom:-10px; right:20px; max-width:90px;}
    #about_service .function h2.denccyan_manabi::after{ bottom:0; right:20px; max-width:115px;}
    #about_service .function h2.denccyan_connect::after{ bottom:-10px; right:20px; max-width:75px;}
    #about_service .function .anchor { padding:25px 0;}
    #about_service .function .anchor ul.anchor_box { flex-direction: column;}
    #about_service .function .anchor ul.anchor_box li { width: 100%;}
    #about_service .function .anchor ul.anchor_box li a { text-align: left;}
}



/* Function list */
#about_service .function .function_list {
    display:flex; flex-direction: column; gap:70px;
    padding: 105px 0 120px;
}
#about_service .function .function_list dl {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
}
#about_service .function .function_list dl dt {
    display: flex; justify-content:center; align-items: center; gap:20px;
    padding: 16px 10px;
    font-size: 158.2%;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#about_service .function .function_list dl dt span { display: flex; align-items: center; gap:30px;}
#about_service .function .function_list dl dt img { width: auto; height: 20px;}
#about_service .function .function_list dl dd {
    position: relative;
    display: flex; justify-content: space-between; align-items:center; gap:20px;
    padding: 30px 50px;
    width: 100%;
    overflow: hidden;
}
#about_service .function .function_list dl dd.layout_column_l,
#about_service .function .function_list dl dd.layout_column_r {
    flex-direction:column; align-items: flex-start; gap:20px;
    padding: 30px 40px 50px;
}
#about_service .function .function_list dl dd.layout_row { flex-direction: row;}
#about_service .function .function_list dl dd.layout_rowre { flex-direction: row-reverse;}
#about_service .function .function_list dl dd::before {
    display: block; clear: both; content:"";
    position: absolute; bottom:0; z-index:8;
    margin: auto;
    width: 600px; height:1000px;
    background: #f1f8fd;
}
#about_service .function .function_list dl dd.layout_column_l::before,
#about_service .function .function_list dl dd.layout_row::before {
    right: 0;
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 0% 100%);
}
#about_service .function .function_list dl dd.layout_column_r::before,
#about_service .function .function_list dl dd.layout_rowre::before {
    left: 0;
    clip-path: polygon(0 0, 20% 0, 100% 100%, 0% 100%);
}
#about_service .function .function_list .txt,
#about_service .function .function_list .pic { position: relative; z-index: 9;}
#about_service .function .function_list .txt {
    display: flex; flex-direction: column;
    padding: 20px 0;
}
#about_service .function .function_list .come1 {
    position: relative;
    margin-bottom: 5px;
    padding-left: 30px;
    font-size: 112.5%;
    font-weight: 800;
    line-height: 188%;
}
#about_service .function .function_list .come1::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 10px; height: 100%;
    background-image: linear-gradient( #009ce1, #003aa8);
}
#about_service .function .function_list .come1 span { display: block; padding-left:10px; text-indent:-17px;}
#about_service .function .function_list .come1 span::before { content:"・"; }
#about_service .function .function_list .come2 {
    position: relative;
    margin-top:10px;
    font-size: 156.2%;
    font-weight: 800;
    line-height: 192%;
    color: #003aa8;
}
#about_service .function .function_list .notes.flexend {
    align-self: flex-end;
}
#about_service .function .function_list .pic { max-width: 100%; height: auto;}
#function_kanna .pic1 { width:55%; max-width: 487px !important;}
#function_kanna .pic2 { width:56%; max-width: 513px !important;}
#function_kanna .pic3 { width:57%; max-width: 507px !important;}
#function_kanna .pic4 { width:60%; max-width: 527px !important;}
#function_kanna .pic5 { width:60%; max-width: 527px !important;}
#function_kanna .pic6 { width:60%; max-width: 560px !important;}
#function_kanna .pic7 { width:57%; max-width: 507px !important;}
#function_photomanager .pic1 { width:59%; max-width: 570px !important;}
#function_photomanager .pic2 { width:58%; max-width: 530px !important;}
#function_photomanager .pic2_2 { width:50%; max-width: 160px !important; margin:10px auto 0;}
#function_photomanager .pic3 { width:60%; max-width: 570px !important;}
#function_photomanager .pic3_2 { width:50%; max-width: 115px !important; margin: auto; position: absolute; right:0; bottom:0;}
#function_photomanager .pic4 { width:58%; max-width: 530px !important;}
#function_photomanager .pic5 { width:51%; max-width: 513px !important;}
#function_photomanager .pic5_2 { width:50%; max-width: 200px !important; margin: auto;}
#function_manabiba .pic1 { width:66%; max-width: 600px !important;}
#function_manabiba .pic2 { width:61%; max-width: 510px !important;}
#function_manabiba .pic3 { width:57%; max-width:530px !important;}
#function_manabiba .pic3_2 { width:100%; max-width: 333px !important; margin: 10px 0;}
#function_manabiba #function01 .txt { position:absolute; top:20px; right: 40px; width:38%;}
#function_pickbuddy .pic1 { width:54%; max-width: 480px !important;}
#function_pickbuddy .pic2 { width:52%; max-width: 470px !important;}
#function_pickbuddy .pic3 { width:55%; max-width: 490px !important;}
#function_pickbuddy .pic4 { width:100%; max-width: 550px !important;}
#function_pickbuddy #function02 .txt { width:40.5%;}
#function_pickbuddy #function04 .txt { width:34%; padding-top: 0;}
#function_connect .pic { margin: auto;}
@media only screen and (min-width:1080px){
    #function_pickbuddy #function01 .pic1 { position: absolute; top:21%; right: 40px;}
}
@media only screen and (max-width:768px){
    #about_service .function .function_list { gap:30px; padding: 45px 0 70px;}
    #about_service .function .function_list dl dt {
        align-items:center; gap:10px;
        padding: 6px 5px;
        font-size: 100%;
    }
    #about_service .function .function_list dl dt span {
        flex-direction: column; align-items: flex-start; gap:5px;
        text-align: left;
    }
    #about_service .function .function_list#function_photomanager dl#function01 dt span.no { padding-top: 15px; }
    #about_service .function .function_list dl dt img { margin-bottom: 10px;}
    #about_service .function .function_list dl dd {
        flex-direction: column !important; gap:20px;
        padding:20px 20px 30px !important;
    }
    #about_service .function .function_list dl dd::before { width: 100%; height: auto; aspect-ratio: 1 / 1;}
    #about_service .function .function_list dl:nth-child(odd)  dd::before {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 100%);
    }
    #about_service .function .function_list dl:nth-child(even) dd::before {
        clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
    }
    #about_service .function .function_list .txt,
    #about_service .function .function_list .pic { position:relative !important; top: 0; left: 0; right: 0; bottom:  0; padding: 0 !important; width: 100% !important;}
    #about_service .function .function_list .txt { gap:5px;}
    #about_service .function .function_list .come1 { font-size:93.8%; padding-left: 20px;}
    #about_service .function .function_list .come1 span { text-indent:-15px;}
    #about_service .function .function_list .come1 span + span { margin-top: 15px;}
    #about_service .function .function_list .come2 { font-size:112.5%; line-height:172%;}
    #about_service .function .function_list .notes.flexend { align-self:flex-start;}
    #function_photomanager .pic2_2 { max-width: 135px !important; position: absolute !important; left:none; right:0; bottom:0; margin: inherit;}
    #function_photomanager .pic3_2 { max-width: 90px !important; bottom: -20px;}
    #function_photomanager .pic5_2 { margin-top: 10px;}
    #function_photomanager #function02 .txt { padding-bottom:30px !important;}
    #function_manabiba #function01 .txt { position: static !important;}
}



/*=================================================================
  CASE
===================================================================*/

/* pickup and list */
#case .pickup .inner { display: block; padding: 35px 0 100px;}
#case .pickup .catch {
    margin-bottom: 50px;
    font-size: 200%;
    font-weight: 800;
    color: #0039a7;
    text-align: center;
    line-height: 187%;
    letter-spacing: 1px;
}
#case .pickup .box a {
    position: relative;
    display: flex; align-items: center; gap:30px;
    padding: 20px;
    background-image: linear-gradient(90deg, #0039a7, #3361b9);
}
#case .pickup .box .new {
    position: absolute; top: 20px; left: 20px; z-index: 9;
    width: 100%; height: auto; aspect-ratio: 175 / 58;
    max-width: 112px;
    text-indent: -9999px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/icon_new.webp") no-repeat;
    background-size: 100% auto;
}
#case .pickup .box .pic {
    width: 60%;
    clip-path: polygon(0 0, 81% 0, 100% 100%, 0 100%);
}
#case .pickup .box .pic img {
    width: 100%; height:auto; aspect-ratio: 595 / 360;
    object-fit: cover;
}
#case .pickup .box .txt {
    display: flex; flex-direction: column; justify-content: flex-start;
    width: 30%;
    padding: 30px 0;
    color: #fff;
}
#case .pickup .box .txt h2 {
  margin: 0 0 15px;
  font-size: 156.2%;
  font-weight: 700;
  line-height: 192%;
}
#case .pickup .box .txt p {
  margin: 0 0 22px;
  font-size: 112.5%;
  font-weight: 600;
  line-height: 200%;
}
#case .pickup .box .b_more { max-width: 225px;}
#case .pickup .box .b_more a { font-size: 100%;}
#case .case_list { padding: 120px 0 195px;}
#case .case_list .select_tag {
    display: flex; flex-wrap: wrap; gap:10px;
    width: 100%;
    padding: 40px 20px 90px;
    background:none;
}
#case .case_list .b_more.plus { padding-top: 120px;}
@media only screen and (min-width:769px){
    #case .pickup .box a:hover { text-decoration: none !important;}
}
@media only screen and (max-width:768px){
    #case .pickup .inner { padding: 35px 0 50px;}
    #case .pickup .catch { margin-bottom: 30px; font-size: 125%; line-height: 170%;}
    #case .pickup .box a { display:block; padding:0;}
    #case .pickup .box .new { top: 0; left: 0; max-width: 65px;}
    #case .pickup .box .pic { width: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);}
    #case .pickup .box .txt { width:100%; padding: 0 30px 30px;}
    #case .pickup .box .txt h2 {font-size: 125%;}
    #case .pickup .box .txt p { font-size: 87.5%; line-height: 192%;}
    #case .pickup .box .b_more { max-width: 225px;}
    #case .pickup .box .b_more a { font-size: 100%;}
    #case .case_list { padding: 35px 0 55px;}
    #case .case_list .select_tag { padding: 20px 0 40px;}
    #case .case_list .b_more.plus { padding-top:70px;}
}


/* detail */
#case .post_head { background-image: linear-gradient(90deg, #0039a7, #3361b9);}
#case .post_head .breadcrumb { width:96%; max-width:inherit;}
#case .post_head .main_cont {
    padding: 5px 0 45px;
}
#case .post_head .main_cont .inner {
    position: relative;
    margin: auto;
    width: 100%; max-width: 1366px; height: 100%;
    overflow: hidden;
}
#case .post_head .main_cont .pic {
    position:absolute; top: 0; right:0;
    width: 58%; height:auto;
    overflow: hidden;
}
#case .post_head .main_cont .pic img {
    width: 100%; height: 100%;
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%);
    object-fit: cover;
}
#case .post_head .main_cont .txt { 
    position:relative; top: 0; left: 8%;
    width: 100%; max-width:550px;
}
#case .post_head .main_cont h1 {
    margin: 20px 0 50px;
    font-size: 262.5%;
    line-height: 171%;
    color: #fff;
}
#case .post_head .main_cont .box { display: flex; gap:50px; color: #fff;}
#case .post_head .main_cont .service { max-width: 155px; }
#case .post_head .main_cont .service p { margin-bottom: 10px; font-size: 93.8%; font-weight: 600;}
#case .post_head .main_cont .service ul { display: flex; flex-direction: column; gap:10px;}
#case .post_head .main_cont .service ul li { display: flex; justify-content: center; align-items: center; min-height: 45px; background: #fff;}
#case .post_head .main_cont .service ul li img { margin: auto; }
#case .post_head .main_cont .service .logo_kanna img { width: 70%;}
#case .post_head .main_cont .service .logo_photomanager img  { width:80%;}
#case .post_head .main_cont .service .logo_connect img  { width: 65%;}
#case .post_head .main_cont .service .logo_pickbuddy img  { width: 65%;}
#case .post_head .main_cont .service .logo_manabiba img  { width: 50%;}
#case .post_head .main_cont .company h2 { margin-bottom: 15px;}
#case .post_head .main_cont .company h2 span:nth-child(1) { font-size: 131.2%;}
#case .post_head .main_cont .company h2 span:nth-child(2) { font-size: 101.2%;}
#case .post_head .main_cont .company p { font-size: 87.5%; line-height: 178%;}
#case .post_head .main_cont .company p span { display: block;}
@media only screen and (max-width:1200px){
    #case .post_head { padding-top: 65px; }
}
@media only screen and (max-width:1300px){
    #case .post_head .main_cont .txt { width: 42%;}
    #case .post_head .main_cont h1 br { display: none;}
}
@media only screen and (max-width:768px){
    #case .post_head .main_cont { padding: 0 0 30px;}
    #case .post_head .main_cont .pic {  position: relative; right:0; width: 100%;}
    #case .post_head .main_cont .pic img {
        width: 100%; height: auto;
        clip-path:none;
    }
    #case .post_head .main_cont .txt { position: static; width: 100%; max-width: inherit;}
    #case .post_head .main_cont h1 {
        margin: 10px 0 15px;
        font-size: 125%;
        text-align: center;
    }
    #case .post_head .main_cont h1 br { display:block;}
    #case .post_head .main_cont .box { flex-direction: column; gap:20px; margin: auto; width: 83%;}
    #case .post_head .main_cont .service { max-width: inherit; padding-top:20px; }
    #case .post_head .main_cont .service p { font-size: 100%;}
    #case .post_head .main_cont .service ul { flex-direction: row; flex-wrap: wrap; gap:8px;}
    #case .post_head .main_cont .service ul li { width:calc(50% - 4px);}
    #case .post_head .main_cont .company h2 { margin-bottom: 10px; line-height: 150%;}
    #case .post_head .main_cont .company h2 span:nth-child(1) { font-size: 112.5%;}
    #case .post_head .main_cont .company h2 span:nth-child(2) { font-size: 75%;}
    #case .post_head .main_cont .company p { font-size: 75%;}
    #case .post_head .main_cont .company p span { display: inline-block; margin-right: 15px;}
}



#case .mokuji  { padding: 50px 0 120px;}
#case .mokuji .mokuji_tit { margin-bottom: 20px; font-size: 162.5%; color: #0039a7; font-weight: 800;}
@media only screen and (max-width:768px){
    #case .mokuji  { padding: 40px 0 85px;}
    #case .mokuji .mokuji_tit { text-align: center; font-size:125%;}
    #case .mokuji ul li a { font-size:11px;}
}
@media only screen and (max-width:468px){
    #case .mokuji ul li a { font-size:10px;}
}



#case .before_afuter { background-image: linear-gradient(90deg, #30a5e3, #84c3ed);}
#case .before_afuter h3 {
    position: absolute; top: -48px;
    display: inline-block;
    padding: 10px 70px 10px 30px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    background-image: linear-gradient(90deg, #3fa9e5, #56b1e7);
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}
#case .before_afuter .box {
    display: flex; flex-wrap: wrap; gap:150px;
    padding: 65px 0 95px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/cases/before_after.webp") no-repeat center center;
}
#case .before_afuter .box div { width: calc(50% - 75px);}
#case .before_afuter .box p {
    margin-bottom: 40px;
    width: 200px;
    line-height: 40px;
    font-size: 125%;
    font-weight:800;
    text-align: center;
    letter-spacing: 1px;
}
#case .before_afuter .box .s_before p { color: #fff;  background: #0039a7;}
#case .before_afuter .box .s_after p { color: #0039a7; background: #fef100;}
#case .before_afuter .box ul li {
    padding-left: 30px;
    font-size: 93.8%;
    font-weight: 600;
    color: #fff;
    background-size: 24px auto !important;
}
#case .before_afuter .box .s_before ul li { background:url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/cases/check_off.webp") no-repeat left 5px;}
#case .before_afuter .box .s_after ul li { background:url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/cases/check_on.webp") no-repeat left 5px;}
#case .before_afuter .box ul li + li { margin-top: 15px;}
@media only screen and (max-width:768px){
    #case .before_afuter h3 {
        top: -35px; left: -8%;
        padding-right: 40px;
        padding-bottom: 0;
        font-size: 100%;
    }
    #case .before_afuter .box {
        display: block;
        padding: 35px 0 50px;
        background: none;
    }
    #case .before_afuter .box div { width:100%;}
    #case .before_afuter .box .s_before::after {
        display: block; clear: both; content:"";
        margin:  auto;
        width: 37px; height: 100px;
        background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/cases/before_after.webp") no-repeat;
        background-size: 37px auto;
        transform: rotate(90deg);
    }
    #case .before_afuter .box p {
        margin-bottom: 15px;
        width: 170px;
        line-height: 35px;
        font-size: 100%;
    }
    #case .before_afuter .box ul li {
        padding-left: 20px;
        background-position: left 8px !important;
        background-size: 15px auto !important;
    }
    #case .before_afuter .box ul li + li { margin-top: 15px;}
}



#case .case_post h3 {
    position: relative;
    display: inline-block;
    padding: 10px 20px 10px 30px;
    height: 50px;
    color: #fff;
    font-size: 150%;
    font-weight: 700;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#case .case_post h3::before{
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: -39px;
    width: 40px; height:auto; aspect-ratio: 40 / 50;
    background: #009ce1;
    clip-path: polygon(0 0, 5% 0, 100% 100%, 0 100%);
}
#case .case_post .set_box { position: relative; padding: 120px 0 50px;}
#case .case_post .set_box:nth-of-type(odd) { padding-top: 200px;}
#case .case_post .set_box::before {
    position: absolute; top:-1px;  left: 0;
    display: block; clear: both; content:"";
    width: 100%; height: 100px;
}
#case .case_post .set_box:nth-of-type(even)::before {
    background:  #fff;
    clip-path: polygon(0 0, 100% 100%, 100% 100%,100% 0);
}
#case .case_post .set_box:nth-of-type(odd)::before {
    background: #f1f8fd;
    clip-path: polygon(100% 0, 100% 0, 0 100%, 0 0);
}
#case .case_post .about  { padding: 80px 0 40px !important;}
#case .case_post .about::before { display: none;}
#case .case_post .about .inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap:80px;}
#case .case_post .about h3 { width: 150px;}
#case .case_post .about .comment {
    position: relative; top: -5px;
    display: flex; flex-direction: row-reverse; justify-content: space-between; gap:40px;
    width: calc(100% - 150px - 80px);
    line-height: 170%;
}
#case .case_post .about .comment .pic { width:40%; }
#case .case_post .about .comment .txt { width:calc(60% - 40px);}
#case .case_post .about .comment:not(:has(.pic)) .txt { width: 100%;}
#case .case_post .catch {
    padding: 15px 0 45px;
    font-size: 218.8%;
    font-weight: 800;
    line-height: 165%;
    color: #0039a7;
}
#case .case_post .box { display: flex; gap:50px;}
#case .case_post .box + .box { margin-top: 70px;}
#case .case_post .box .cont_l,
#case .case_post .box .cont_r { position: relative; width:calc(50% - 25px);}
#case .case_post .box .cont_l .pic { position: relative; left:-50%; width:150%; }
#case .case_post .box .cont_r .pic { position: relative; left:0; width:150%; }
#case .case_post .box .cap { padding: 20px 0; font-size: 87.5%; line-height: 150%;}
#case .case_post .box.re_column { flex-direction: row-reverse;}
#case .case_post .box.re_column .pic { left:0;}
#case .case_post .box .pic + .comment { margin-top: 50px;}
#case .case_post dl.question dt {
    margin-bottom: 20px;
    padding-left: 80px;
    font-size: 150%;
    font-weight: 700;
    line-height: 162%;
    letter-spacing: -1px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/cases/icon_q.webp") no-repeat left 5px;
    background-size: 65px auto;
}
#case .case_post dl.question dd {
    font-size: 106.2%;
    line-height: 176%;
}
#case .case_post dl.question dd p + p { margin-top: 25px;}
#case .case_post dl.question dd b { font-weight: 800;}
#case .case_post .notes { margin-top: 10px !important;}
#case .case_post .comment { display: flex; flex-direction: column; gap:15px;}
#case .case_post .comment h4 { margin-bottom: 20px; font-size: 150%; color:#0039a7;}
#case .case_post .comment p { margin-bottom:0;}
#case .case_post .comment .step dl { display: flex;}
#case .case_post .service_bana { margin-top: 85px;}
#case .case_post .set_box.movie {
    padding: 180px 0;
}
#case .case_post .set_box.movie h3 { margin-bottom: 70px;}
#case .case_post .set_box.movie .youtube {
    margin: 0 auto;
    max-width: 740px;
    border: 4px solid #0039a7;
}
#case .case_post .set_box.movie .youtube {
    position: relative;
    width: 100%;
    aspect-ratio: 560 / 315;
}

#case .case_post .set_box.movie .youtube iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
@media only screen and (max-width:768px){
    #case .case_post h3 {
        padding: 0 20px;
        height: 35px; line-height: 35px;
        font-size: 100%;
    }
    #case .case_post h3::before{ right: -27px; width: 28px;}
    #case .case_post .set_box { padding: 70px 0 40px;}
    #case .case_post .set_box:nth-of-type(odd) { padding-top: 100px;}
    #case .case_post .set_box::before {  height:40px;}
    #case .case_post .set_box:nth-of-type(even)::before { clip-path: polygon(100% 0, 100% 0, 0 100%, 0 0);}
    #case .case_post .set_box:nth-of-type(odd)::before { clip-path: polygon(0 0, 100% 100%, 100% 100%,100% 0);}
    #case .case_post .about  { padding: 40px 0 !important;}
    #case .case_post .about::before { display: none;}
    #case .case_post .about .inner {flex-direction: column; gap:25px;}
    #case .case_post .about h3 { width:auto;}
    #case .case_post .about .comment { position:static; flex-direction: column; width: 100%;}
    #case .case_post .about .comment .pic,
    #case .case_post .about .comment .txt { width:100%; }
    #case .case_post .catch { padding: 15px 0 25px; font-size: 118.8%;}
    #case .case_post .box { flex-direction: column-reverse; gap:30px;}
    #case .case_post .box + .box { margin-top: 30px;}
    #case .case_post .box .cont_l,
    #case .case_post .box .cont_r { width:100%;}
    #case .case_post .box .cont_l .pic,
    #case .case_post .box .cont_r .pic { left:0; width:100%; }
    #case .case_post .box.re_column { flex-direction:column-reverse;}
    #case .case_post .box.sp_re_column { flex-direction:column;}
    #case .case_post .box.re_column .pic { left:0;}
    #case .case_post .box .pic + .comment { margin-top: 30px;}
    #case .case_post dl.question dt {
        margin-bottom: 10px;
        padding-left: 60px;
        font-size: 106.2%;
        background-size: 45px auto;
    }
    #case .case_post dl.question dd { font-size: 87.5%; }
    #case .case_post .comment h4 { margin-bottom:0; font-size: 106.2%;}
    #case .case_post .service_bana { margin-top: 35px;}
    #case .case_post .set_box.movie { padding: 50px 0;}
    #case .case_post .set_box.movie .youtube { margin: 0 auto; border: 2px solid #0039a7;}
    #case .case_post .set_box.movie h3 { margin-bottom: 25px;}
}



/*=================================================================
  HELPFUL INFO
===================================================================*/
#helpful { background: #f1f8fd;}

/* search */
#helpful .search {
    display: flex; gap:12px 30px;
    margin: auto;
    padding: 37px 0 110px;
    max-width: 730px;
}
#helpful .search div {
    position: relative;
    width:calc(50% - 15px);
    border: 3px solid #0039a7;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
}
#helpful .search select,
#helpful .search input[type="search"] {
    display: block;
    padding: 0 15px;
    width: 100%; height: 46px;
    line-height: 46px;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 125%;
	font-weight:500;
    color: #646464;
    background: #fff;
    border: none;
    border-radius: 8px;
}
#helpful .search input::placeholder {
    color: #646464;
}
#helpful .search .search_cate select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#helpful .search .search_cate::after,
#helpful .search .search_keyword button {
    display: block; clear: both; content:"";
    position: absolute; top:0; right: 0;
    width: 50px; height: auto; aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
    text-indent: -9999px;
    border: none;
}
#helpful .search .search_cate::after {
    pointer-events: none;
    background:#0039a7 url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/helpful/b_select.webp") no-repeat;
}
#helpful .search .search_keyword button {
    cursor: pointer;
    background:#0039a7 url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/helpful/b_search.webp") no-repeat;
}
@media only screen and (max-width:768px){
    #helpful .search {
        flex-direction: column;
        padding: 15px 0 25px;
        width: 88%;
    }
    #helpful .search div { width: 100%; border: 2px solid #0039a7;}
    #helpful .search select,
    #helpful .search input[type="search"] {
        height: 41px; line-height: 41px;
        font-size: 106.2%;
    }
    #helpful .search .search_cate::after,
    #helpful .search .search_keyword button { width: 41px;}
}


/* helpful list */
#helpful .helpful_list { padding: 10px 0 120px;}
#helpful .b_more.plus { padding:  0 0 120px; max-width:360px;}
@media only screen and (max-width:768px){
    #helpful .helpful_list { padding-bottom: 55px;}
    #helpful .b_more.plus { padding:  0 0 55px; max-width:298px;}
}


/* helpful post */
#helpful { position: relative;}
#helpful:has(.helpful_post)::before {
    display: block; clear: both; content: "";
    position: absolute; top: 0; left: 0; z-index: 8;
    width: 100%; height: 550px;
    background-image: linear-gradient(90deg, #0039a7, #3361b9);
}
#helpful .post_head,
#helpful .cont1,
#helpful .cont2 { position: relative; z-index: 9;}
#helpful .post_head { padding-bottom: 25px;}
#helpful .post_head .breadcrumb { width:96%; max-width:inherit;}
#helpful .post_head h1 {
    padding: 45px 0 13px;
    font-size: 250%;
    line-height: 170%;
    color: #fff;
}
#helpful .post_head .cate { display:flex; justify-content: flex-end; gap:10px;}
#helpful .post_head .cate span {
    min-width: 90px; height: 22px;
    line-height: 20px;
    padding: 0 10px;
    font-size: 70%;
    font-weight: 600;
    text-align: center;
    color: #0039a7;
    background: #fff;
    border-radius: 30px;
}
#helpful .helpful_post .inner { padding: 40px 45px;}
#helpful .helpful_post .mokuji {
    margin: 70px auto 100px;
    padding: 40px 45px;
    width:88%;
    font-weight: 700;
    color: #0039a7;
    border: 3px solid #0039a7;
    border-radius: 20px; 
}
#helpful .helpful_post .mokuji .mokuji_tit {
    font-size:156.2%;
}
#helpful .helpful_post .mokuji ol {
    display: flex; flex-direction: column; gap:20px;
    padding:0 0 0 25px;
}
#helpful .helpful_post .mokuji ol li { font-size:112.5%;}
#helpful .helpful_post .mokuji ol li b {font-weight: 600;}
#helpful .helpful_post .mokuji ol li span { position: relative; margin-left: 10px; display: block;}
#helpful .helpful_post .mokuji ol li span::before { position: absolute; left:-7px; content:"-";}
#helpful .post_contents { 
    display: flex; flex-direction: column; gap:120px;
    margin: auto;
    padding:  0 0 80px;
    width: 88%;
}
#helpful .post_contents .set_box { display: flex; flex-direction: column; gap:25px;}
#helpful .post_contents h2 {
    position: relative;
    margin: 0 0 10px;
    padding: 10px 30px;
    font-size: 168.8%;
    color: #0039a7;
    background: #f1f8fd;
}
#helpful .post_contents h2::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 10px; height: 100%;
    background-image: linear-gradient(0deg, #0039a7, #3361b9);
}
#helpful .post_contents .comment { 
    line-height: 175%;
}
#helpful .post_contents .comment:last-child p:last-child { margin-bottom: 0;}
    /* ▼エディタ用CSS▼ */
        #helpful .post_contents .comment h3 {
            position: relative;
            margin: 50px 0 25px;
            padding-left: 20px;
            font-size: 131.2%;
            color: #009ce1;
            font-weight: 800;
        }
        #helpful .post_contents .comment h3::before {
            display: block; clear: both; content:"";
            position: absolute; top: 15px; left: 0;
            width:12px; height: 2px;
            background: #009ce1;
        }
        #helpful .post_contents .comment table { margin: 50px auto;}
        #helpful .post_contents .comment table:last-child {margin-bottom: 25px;}
        #helpful .post_contents .comment img { margin: 0 auto 50px; max-width: 500px;}
        #helpful .post_contents .comment a { color:#579bde;}
    /* ▲エディタ用CSS▲ */

#helpful .post_contents .point {
    padding: 25px 45px;
    border: 3px solid #009ce1;
    border-radius: 20px; 
}
#helpful .post_contents .point .mid {
    margin-bottom:15px;
    padding-left: 40px;
    font-size: 131.2%;
    font-weight: 700;
    color: #009ce1;
    line-height: 32px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/icon_point.webp") no-repeat left top;
    background-size: 32px auto;
}
#helpful .post_contents .point .comment  { font-weight: 700;}
#helpful .post_contents + .b_more { padding: 0 0 50px !important;}
#helpful .helpful_post .b_more.arrow_l { padding:100px 0 120px;  max-width: 580px;}
@media only screen and (max-width:1200px){
    #helpful:has(.helpful_post) { padding-top: 65px;}
}
@media only screen and (max-width:768px){
    #helpful .post_head { padding-bottom: 30px;}
    #helpful .post_head .breadcrumb { justify-content: center;}
    #helpful .post_head h1 { padding: 20px 0 25px; font-size: 120%; text-align: center;}
    #helpful .post_head .cate { justify-content: center;}
    #helpful .helpful_post .inner { padding: 20px;}
    #helpful .helpful_post .main_pic img { aspect-ratio: 295 / 160;}
    #helpful .helpful_post .mokuji {
        margin: 30px 0 45px;
        padding: 20px 25px;
        width: 100%;
        border: 2px solid #0039a7;
    }
    #helpful .helpful_post .mokuji .mokuji_tit { text-align: center;}
    #helpful .helpful_post .mokuji ol { gap:10px;  padding-left: 15px;}
    #helpful .helpful_post .mokuji ol li { font-size:87.5%; line-height: 160%;}
    #helpful .post_contents { gap:50px; padding-bottom: 20px; width: 100%;}
    #helpful .post_contents h2 { margin-bottom: 15px; font-size: 125%;}
    #helpful .post_contents .set_box { gap:10px;}
        #helpful .post_contents .comment h3 { margin:40px 0 15px; font-size: 106.2%;}
        #helpful .post_contents .comment table { margin:40px auto;}
        #helpful .post_contents .comment table:last-child {margin-bottom: 15px;}
        #helpful .post_contents .comment img { margin: 0 auto;}
    #helpful .post_contents .comment p:has(img) { margin-bottom: 15px;}
    #helpful .post_contents .point { padding: 25px; border: 2px solid #009ce1;}
    #helpful .post_contents .point .mid {
        margin: 0 auto 15px;
        padding-left: 40px;
        width: 120px;
        font-size:125%;
    }
    #helpful .post_contents + .b_more { padding: 50px 0 !important;}
    #helpful .helpful_post .b_more.arrow_l { padding:40px 0 55px;  max-width: 298px;}
}



/*=================================================================
  MEDIA
===================================================================*/
#media { background: #f1f8fd;}
#media .select_tag { padding: 0; background: none !important;}
#media .txt_tag { margin-bottom:50px;}
#media .result_tag { margin: 40px 0;}
#media h3 { width: 100%; font-size: 150%;}

/* media list */
#media .media_list { padding: 30px 0 120px;}
#media .media_list .tag span { padding-right: 7px;}
#media .tag_result .b_more.arrow_l { padding:  0 0 120px; max-width:360px;}
@media only screen and (max-width:768px){
    #media h3 { font-size: 125%;}
    #media .media_list { padding-bottom: 55px;}
    #media .tag_result .b_more.arrow_l { padding:  0 0 55px; max-width:298px;}
}

/* media post */
#media { position: relative;}
#media:has(.media_post)::before {
    display: block; clear: both; content: "";
    position: absolute; top: 0; left: 0; z-index: 8;
    width: 100%; height: 550px;
    background-image: linear-gradient(90deg, #0039a7, #3361b9);
}
#media .post_head,
#media .cont1,
#media .cont2 { position: relative; z-index: 9;}
#media .post_head { padding-bottom: 25px;}
#media .post_head .breadcrumb { width:96%; max-width:inherit;}
#media .post_head h1 {
    padding: 45px 0 13px;
    font-size: 250%;
    line-height: 170%;
    color: #fff;
}
#media .post_head .cate { display:flex; justify-content: flex-end; gap:10px;}
#media .post_head .cate span {
    min-width: 90px; height: 22px;
    line-height: 20px;
    font-size: 70%;
    font-weight: 600;
    text-align: center;
    color: #0039a7;
    background: #fff;
    border-radius: 30px;
}
#media .media_post .inner { padding: 40px 45px;}
#media .media_post .main_pic img { aspect-ratio: 920 / 393; object-fit: cover;}
#media .media_post .mokuji {
    margin: 70px auto 100px;
    padding: 40px 45px;
    width:88%;
    font-weight: 700;
    color: #0039a7;
    border: 3px solid #0039a7;
    border-radius: 20px; 
}
#media .media_post .mokuji .mokuji_tit {
    font-size:156.2%;
}
#media .media_post .mokuji ol {
    display: flex; flex-direction: column; gap:20px;
    padding:0 0 0 25px;
}
#media .media_post .mokuji ol li { font-size:112.5%;}
#media .media_post .mokuji ol li b {font-weight: 600;}
#media .media_post .mokuji ol li span { position: relative; margin-left: 10px; display: block;}
#media .media_post .mokuji ol li span::before { position: absolute; left:-7px; content:"-";}
#media .post_contents { 
    display: flex; flex-direction: column; gap:120px;
    margin: auto;
    padding:  0 0 80px;
    width: 88%;
}
#media .post_contents .set_box { display: flex; flex-direction: column; gap:25px;}
#media .post_contents h2 {
    position: relative;
    margin: 0 0 10px;
    padding: 10px 30px;
    font-size: 168.8%;
    color: #0039a7;
    background: #f1f8fd;
}
#media .post_contents h2::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 10px; height: 100%;
    background-image: linear-gradient(0deg, #0039a7, #3361b9);
}
#media .post_contents .comment { 
    line-height: 175%;
}
#media .post_contents .comment:last-child p:last-child { margin-bottom: 0;}
    /* ▼エディタ用CSS▼ */
        #media .post_contents .comment h3 {
            position: relative;
            margin: 50px 0 25px;
            padding-left: 20px;
            font-size: 131.2%;
            color: #009ce1;
            font-weight: 800;
        }
        #media .post_contents .comment h3::before {
            display: block; clear: both; content:"";
            position: absolute; top: 15px; left: 0;
            width:12px; height: 2px;
            background: #009ce1;
        }
        #media .post_contents .comment table { margin: 50px auto;}
        #media .post_contents .comment table:last-child {margin-bottom: 25px;}
        #media .post_contents .comment img { margin: 0 auto 50px; max-width: 500px;}
        #media .post_contents .comment a { color:#579bde;}
    /* ▲エディタ用CSS▲ */

#media .post_contents .point {
    padding: 25px 45px;
    border: 3px solid #009ce1;
    border-radius: 20px; 
}
#media .post_contents .point .mid {
    margin-bottom:15px;
    padding-left: 40px;
    font-size: 131.2%;
    font-weight: 700;
    color: #009ce1;
    line-height: 32px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/icon_point.webp") no-repeat left top;
    background-size: 32px auto;
}
#media .post_contents .point .comment  { font-weight: 700;}
#media .post_contents + .b_more { padding: 0 0 50px !important;}
#media .media_post .b_more.arrow_l { padding:100px 0 120px;  max-width: 580px;}
@media only screen and (max-width:1200px){
    #media:has(.media_post) { padding-top: 65px;}
}
@media only screen and (max-width:768px){
    #media .post_head { padding-bottom: 30px;}
    #media .post_head .breadcrumb { justify-content: center;}
    #media .post_head h1 { padding: 20px 0 25px; font-size: 120%; text-align: center;}
    #media .post_head .cate { justify-content: center;}
    #media .media_post .inner { padding: 20px;}
    #media .media_post .main_pic img { aspect-ratio: 295 / 160;}
    #media .media_post .mokuji {
        margin: 30px 0 45px;
        padding: 20px 25px;
        width: 100%;
        border: 2px solid #0039a7;
    }
    #media .media_post .mokuji .mokuji_tit { text-align: center;}
    #media .media_post .mokuji ol { gap:10px;  padding-left: 15px;}
    #media .media_post .mokuji ol li { font-size:87.5%; line-height: 160%;}
    #media .post_contents { gap:50px; padding-bottom: 20px; width: 100%;}
    #media .post_contents h2 { margin-bottom: 15px; font-size: 125%;}
    #media .post_contents .set_box { gap:10px;}
        #media .post_contents .comment h3 { margin:40px 0 15px; font-size: 106.2%;}
        #media .post_contents .comment table { margin:40px auto;}
        #media .post_contents .comment table:last-child {margin-bottom: 15px;}
        #media .post_contents .comment img { margin: 0 auto;}
    #media .post_contents .comment p:has(img) { margin-bottom: 15px;}
    #media .post_contents .point { padding: 25px; border: 2px solid #009ce1;}
    #media .post_contents .point .mid {
        margin: 0 auto 15px;
        padding-left: 40px;
        width: 120px;
        font-size:125%;
    }
    #media .post_contents + .b_more { padding: 50px 0 !important;}
    #media .media_post .b_more.arrow_l { padding:40px 0 55px;  max-width: 298px;}
}




/*=================================================================
  SEMINAR
===================================================================*/
#seminar .pickup { padding: 65px 0 120px;}
#seminar .pickup .inner { max-width:1130px;}
#seminar .pickup .box a {
    position: relative;
    display: flex; justify-content: space-between; gap:30px;
    padding: 40px;
    color: #222;
    box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
}
#seminar .pickup .box .pic {
    position: relative;
    width: 53%;
}
#seminar .pickup .box .pic img {
    width: 100%; height:auto; aspect-ratio: 554 / 336;
    object-fit: cover;
}
#seminar .pickup .box .txt {
    display: flex; flex-direction: column;
    width: calc(47% - 30px);
}
#seminar .pickup .box .cate {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
}
#seminar .pickup .box .cate p {
    position: relative;
    display: inline-block;
    padding: 0 5px 0 15px;
    height: 40px; line-height: 40px;
    color: #fff;
    font-size:125%;
    font-weight: 700;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#seminar .pickup .box .cate p::before{
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: -31px;
    width: 32px; height:auto; aspect-ratio: 32 / 40;
    background: #009ce1;
    clip-path: polygon(0 0, 5% 0, 100% 100%, 0 100%);
    border-left: 1px solid #009ce1;
}
#seminar .pickup .box .cate span { font-size: 100%; font-weight: 700;}
#seminar .pickup .box .txt h2 {
    margin:15px 0;
    font-size:150%;
    font-weight: 700;
    line-height: 165%;
    color: #0039a7;
}
#seminar .pickup .box .txt .comment {
    font-size: 94.5%;
    font-weight: 600;
    line-height: 175%;
    letter-spacing: -1px;
}
#seminar .seminar_list { padding: 120px 0 195px;}
#seminar .seminar_list .tab { margin-bottom: 65px;}
#seminar .seminar_list .category {
    display: flex; align-items: flex-end; gap:20px;
    padding: 10px 10px 10px 30px;
}
#seminar .seminar_list .category p {
    font-size:131.2%;
    font-weight: 700;
    line-height: 165%;
    color: #0039a7;
}
#seminar .seminar_list .category span {
    font-size:100%;
}
#seminar .seminar_list .pic img {
    aspect-ratio: 554 / 336;
}
#seminar .seminar_list .txt {
    padding-bottom: 30px;
}
#seminar .seminar_list .mid.mid_l {
    margin-bottom: 20px;
    font-size: 143.8%;
}
#seminar .seminar_list .comment {
    font-size: 106.2%;
    line-height: 176%;
}
#seminar .seminar_list .b_more.plus { padding-top: 120px;}
@media only screen and (min-width:768px){
    #seminar .pickup .box a:hover { text-decoration: none;}
}
@media only screen and (max-width:768px){
    #seminar .pickup { padding: 20px 0 40px;}
    #seminar .pickup .box a {
        flex-direction: column; gap:20px 30px;
        padding: 30px 25px;
    }
    #seminar .pickup .box .pic { width:100%;}
    #seminar .pickup .box .txt {
        flex-direction: column;
        width:100%;
    }
    #seminar .pickup .box .cate {
        flex-direction: column; align-items: flex-start; gap:10px;
        text-align: left;
    }
    #seminar .pickup .box .cate p {
        height: 32px; line-height: 32px;
        font-size:93.8%;
    }
    #seminar .pickup .box .cate p::before{
        right: -24px; width: 25px; aspect-ratio: 25 / 32;
    }
    #seminar .pickup .box .cate span { display: block; font-size: 68.8%;}
    #seminar .pickup .box .txt h2 {
        margin:15px 0;
        font-size:125%;
        line-height: 150%;
    }
    #seminar .pickup .box .txt .comment {
        font-size: 75%;
        line-height:166%;
        letter-spacing:0;
    }
    #seminar .seminar_list { padding: 40px 0 70px;}
    #seminar .seminar_list .tab { margin-bottom: 20px;}
    #seminar .seminar_list .category {
        flex-direction: column; align-items: flex-start; gap:0;
        padding: 15px 25px 15px;
    }
    #seminar .seminar_list .category p {
        line-height: 130%;
    }
    #seminar .seminar_list .category span {
        font-size:81.2%; font-weight: 800;
    }
    #seminar .seminar_list .mid.mid_l {
        margin-bottom: 10px;
        font-size: 125%;
    }
    #seminar .seminar_list .comment {
        font-size: 75%;
        line-height: 166%;
    }
    #seminar .seminar_list .b_more.plus { padding-top: 40px;}
}



/*=================================================================
  FAQ
===================================================================*/
/* Sub head */
#faq .sub_head {
    position: relative;
    display: flex; flex-direction: column; gap:33px;
    margin: auto;
    width:100%; max-width: 1000px;
    color: #fff;
    text-align: center;
}
#faq .sub_head::before {
    display: flex; clear: both; content:"";
    position: absolute; right:0; bottom:-45px;
    width: 100%; height: auto; max-width:140px; aspect-ratio: 446 / 460;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan8.webp") no-repeat;
    background-size: 100% auto;
}
#faq .sub_head h2 { font-size: 200%; font-weight: 800; letter-spacing: 1px;}
#faq .sub_head p { font-size: 106.2%;}

/* Faq list */
#faq .faq_list dl {
    display: flex; flex-direction: column; gap:19px;
    padding: 32px 50px;
}
#faq .faq_list dt,
#faq .faq_list dd { position: relative; padding-left: 60px !important;}
#faq .faq_list dt::before,
#faq .faq_list dd::before {
    display: block; clear: both;
    position: absolute; top: 0; left: 0;
    width: 45px; height: 45px; line-height: 42px;
    text-align: center;
    font-family: "Lexend Deca", sans-serif;
    font-size:25px;
    font-weight: 600;
    border-radius: 50px;
    box-sizing: border-box;
}
#faq .faq_list dt::before { content:"Q";}
#faq .faq_list dd::before { content:"A";}
#faq .faq_list dt {
    cursor: pointer;
    padding: 5px 50px 5px 0;
    font-size:150%;
    font-weight: 800;
    letter-spacing: 1px;
}
#faq .faq_list dt::after {
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: 0;
    width: 45px; height: 45px;
    background-size: 100% auto !important;
    box-sizing: border-box;
}
#faq .faq_list dt::after { background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/faq/pull_off.webp") no-repeat;}
#faq .faq_list dt.active::after { background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/faq/pull_on.webp") no-repeat;}
#faq .faq_list dd { display: none;}
#faq .faq_list dd a { color:#579bde !important;}


/* Faq1 */
#faq .faq1 { padding: 50px 0 120px;}
#faq .faq1 .inner { display: flex; flex-direction: column; gap:45px;}
#faq .faq1 .faq_list dl { border-bottom: 1px solid #e5e5e5;}
#faq .faq1 .faq_list dt::before {
    color: #fff;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#faq .faq1 .faq_list dd::before {
    color: #006bc4;
    background:#fff;
    border: 1px solid #006bc4;
}

/* Faq2 */
#faq .faq2 { padding: 120px 0;}
#faq .faq2 .faq_tag {
    display: flex; flex-wrap: wrap; gap:10px;
    padding: 35px 40px;
    background:#f0f1fa;
}
#faq .faq2 .faq_tag p {
    cursor: pointer;
    width:calc(25% - 7.5px);
    min-width: 220px;
    padding-top: 3px;
    height: 40px;
    font-weight: 700;
    color: #0039a7;
    text-align: center;
    background: #fff;
    border: 2px solid #0039a7;
    border-radius: 50px;
}
#faq .faq2 .faq_tag p.active { color: #fff; background: #0039a7;}
#faq .faq2 .tag_content { padding-bottom: 55px;}
#faq .faq2 .tag_content + .tag_content {border-top: 2px solid #e5e5e5; }
#faq .faq2 .faq_list { padding-bottom:0;}
#faq .faq2 .faq_list dl { gap:20px; padding: 20px 50px 25px;}
#faq .faq2 .faq_list dt::before {
    color: #ffffff;
    background:#003aa8;
}
#faq .faq2 .faq_list dd::before {
    color: #003aa8;
    background:#fff;
    border: 1px solid #003aa8;
}
#faq .faq2 .faq_list h2 {
    padding: 75px 0 55px;
    font-size: 262.5%;
    font-weight: 600;
    text-align: center;
    color: #0039a7;
}
#faq .faq2 .faq_list h3 {
    margin:  0 50px 30px;
    padding-bottom: 12px;
    font-size: 175%;
    font-weight: 800;
}
#faq .faq2 .faq_list h3 span { position: relative;}
#faq .faq2 .faq_list h3 span::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; bottom: -12px;
    width: 100%; height: 3px;
    background: #0039a7;
}
#faq .faq2 .faq_list dl + h3 { margin-top: 50px;}
@media only screen and (min-width:768px){
    #faq .faq_list dt:hover { color:#0039a7;}
}
@media only screen and (max-width:768px){
    #faq .sub_head { gap:10px; width: 100%;}
    #faq .sub_head h2 { font-size: 125%;}
    #faq .sub_head::before {
        display: flex; clear: both; content:"";
        position: absolute; right:0; bottom:-30px;
        max-width:60px;
    }
    #faq .faq_list dl { padding: 17px 20px;}
    #faq .faq_list dt,
    #faq .faq_list dd { padding-left: 50px !important;}
    #faq .faq_list dt::before,
    #faq .faq_list dd::before { width: 38px; height: 38px; line-height: 37px; text-indent: 1px;}
    #faq .faq_list dt {
        padding:0 50px 0 0;
        font-size:106.2%;
        line-height: 150%;
        min-height: 38px;
    }
    #faq .faq_list dt::after { width:30px; height: 30px;}
    #faq .faq_list dd { display: none;}
    #faq .faq_list dd a { color: #000;}    
    #faq .faq1 { padding:10px 0 55px;}
    #faq .faq1 .inner {gap:30px;}
    #faq .faq2 { padding: 90px 0 50px;}
    #faq .faq2  ul.tab li {
        padding: 12px 0;
        font-size: 100%;
        letter-spacing: 1px;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }
    #faq .faq2  ul.tab li::before { border-top: 8px solid #009ce1;}
    #faq .faq2  ul.tab li.active::before {
        bottom: -8px;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
    }
    #faq .faq2  ul.tab li.active::before { border-top:8px solid #0039a7;}
    #faq .faq2 .faq_tag { gap:5px; padding: 20px;}
    #faq .faq2 .faq_tag p {
        width:auto; min-width: inherit;
        padding: 0 10px;
        height: 30px; line-height: 28px;
        font-size: 81.2%;
        border: 1px solid #0039a7;
    }
    #faq .faq2 .tag_content { padding-bottom:20px;}
    #faq .faq2 .tag_content + .tag_content {border-top: 1px solid #e5e5e5;}
    #faq .faq2 .faq_list { padding-bottom:0;}
    #faq .faq2 .faq_list dl { gap:15px; padding: 10px 20px 15px;}
    #faq .faq2 .faq_list h2 {
        padding: 35px 0 25px;
        font-size: 150%;
    }
    #faq .faq2 .faq_list h3 {
        margin:  0 20px 15px;
        padding-bottom: 10px;
        font-size: 106.2%;
        text-align: center;
    }
    #faq .faq2 .faq_list h3 span::before { bottom: -7px; height: 2px;}
    #faq .faq2 .faq_list dl + h3 { margin-top: 25px;}
}



/*=================================================================
  NEWS
===================================================================*/
/* News List */
#news .inner { padding: 120px 0  130px;}
#news .inner::before {
    display: flex; clear: both; content:"";
    position: absolute; right: 60px; bottom:-50px;
    width: 100%; height: auto; max-width:145px; aspect-ratio: 485 / 1000;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan3.webp") no-repeat;
    background-size: 100% auto;
}
#news .tag { 
    display: flex; flex-wrap: wrap; gap:10px 20px;
    margin-bottom: 80px;
}
#news .tag li {
    cursor: pointer;
    width: 150px;
    font-size: 108.2%;
    line-height: 50px;
    color: #0039a7;
    text-align: center;
    background: #fff;
    border: 2px solid #0039a7;
    border-radius: 100px;
}
#news .tag li.active {
    color: #fff;
    background: #0039a7;
}
#news .tab_content {
    padding: 40px 55px 90px;
    background: #fff;
    box-shadow: 0px 0px 75px 0px rgba(0, 0, 0, 0.10);
}
#news .news_list .box {
    display: flex; flex-wrap: wrap; gap:20px;
    padding: 35px 0 30px;
}
#news .news_list .box + .box { border-top: 1px solid #0039a7;}
#news .news_list .box .data { font-size:137.5%; }
#news .news_list .box .cate { display: flex; gap:10px;}
#news .news_list .box .cate span {
    display: block;
    width: 110px;
    font-size:75%;
    line-height: 30px;
    color: #0039a7;
    text-align: center;
    background: #fff;
    border: 1px solid #0039a7;
    border-radius: 100px;
}
#news .news_list .box .mid { width:100%; font-size:125%; font-weight: 700;}
#news .news_list .box .mid a {color: #0039a7;}
#news .pager { margin-top: 50px;}
@media only screen and (min-width:767px){
    #news .tag li.active:hover { color: #0039a7;  background: #fef100;}
    #news .tag li:hover { background: #fef100;}
}
@media only screen and (max-width:768px){
    #news .inner { padding: 45px 0 70px;}
    #news .inner::before { right: -13px; bottom: 0; max-width: 80px;}
    #news .tag { gap:10px; margin-bottom: 30px;}
    #news .tag li { width:calc( 33.3% - 6.6px); font-size: 75%; line-height: 31px; border: 1px solid #0039a7;}
    #news .tab_content { padding: 15px 30px 60px;}
    #news .news_list .box { gap:5px 20px;padding: 25px 0;}
    #news .news_list .box .data { font-size:112.5%;  line-height: 23px; }
    #news .news_list .box .cate span { width: 90px; font-size:10px; line-height: 23px;}
    #news .news_list .box .mid { width:100%; font-size:17px; color: #0039a7; line-height: 160%;}
    #news .pager { margin-top: 20px;}
}


/* News Detail */
#news_detail .inner { padding:60px 0 120px;}
#news_detail .kiji_box {
    padding:100px;
    background: #fff;
    box-shadow: 0px 0px 75px 0px rgba(0, 0, 0, 0.10);
}
#news_detail .sb_tit {
    display: flex; flex-wrap: wrap; gap:25px;
    margin-bottom: 55px;
    padding-bottom: 35px;
    border-bottom: 1px solid #0039a7;
}
#news_detail .sb_tit .data { font-size:137.5%; font-weight: 700; }
#news_detail .sb_tit .cate { display: flex; gap:10px;}
#news_detail .sb_tit .cate span {
    display: block;
    width: 110px;
    font-size:75%;
    line-height: 30px;
    color: #0039a7;
    text-align: center;
    background: #fff;
    border: 1px solid #0039a7;
    border-radius: 100px;
}
#news_detail .sb_tit h2 { width:100%; font-size:25px; color: #0039a7;}
#news_detail .pic_c { margin-bottom: 60px;}
#news_detail .comment  { margin-bottom: 70px;}
@media only screen and (max-width:768px){
    #news_detail .inner { padding:20px 0 120px;}
    #news_detail .kiji_box { padding:40px 30px; }
    #news_detail .sb_tit  { gap:5px 20px; margin-bottom: 30px; padding-bottom: 30px;}
    #news_detail .sb_tit .data { font-size:112.5%;  line-height: 23px; }
    #news_detail .sb_tit  .cate span { width: 90px; font-size:10px; line-height: 23px;}
    #news_detail .sb_tit  h2 { width:100%; font-size:17px; color: #0039a7; line-height: 160%;}
    #news_detail .pic_c { margin-bottom:30px;}
    #news_detail .comment  { margin-bottom: 45px;}
}



/*=================================================================
  PRIVACY
===================================================================*/
#privacy .inner { padding: 110px 0 130px;}
#privacy dl dt {
    margin: 70px 0 25px;
    font-size: 156.2%;
    font-weight: 800;
    color: #0039a7;
}
#privacy dl:first-child dt { margin-top: 0 !important;}
#privacy dl dd .mid {
    margin: 40px 0 20px;
    font-size: 131.2%;
    font-weight: 800;
    color: #0039a7;
}
#privacy dl dd .ml25 { margin-left: 25px;}
#privacy dl dd ol li + li { margin-top:25px;}
#privacy dl dd .ul_maru,
#privacy dl dd .ul_maru li { position:relative; list-style: none;}
#privacy dl dd .ul_maru { margin: 15px 0;}
#privacy dl dd .ul_maru li { margin-top: 0; margin-left:10px;}
#privacy dl dd .ul_maru li::before {
    position: absolute; top: 0; left: -20px;
    content:"〇";
} 
#privacy dl dd a { color:#579bde;}
@media only screen and (max-width:468px){
    #privacy .inner { padding: 65px 0;}
    #privacy dl dt {
        margin: 40px 0 25px;
        font-size: 125%;
    }
    #privacy dl dd .mid {
        margin: 35px 0 20px;
        font-size:112.5%;
    }
    #privacy dl dd .ml25 { margin-left: 20px;}
    #privacy dl dd { line-height: 187.5%;}
}



/*=================================================================
  INTRODUCE
===================================================================*/
#introduce {}
#introduce .gaiyou {}
#introduce .gaiyou  .inner {
    display:flex; flex-direction: column; gap:50px;
    padding: 60px 0 70px;
}
#introduce .gaiyou .mid {
    font-size: 200%;
    font-weight: 800;
    line-height: 130%;
    color: #223ca3;
    text-align: center;
}
#introduce .gaiyou .come {
    font-size: 131.2%;
    line-height: 151%;
    text-align: center;
}
@media only screen and (max-width:468px){
    #introduce .gaiyou  .inner {
        gap:20px;
        padding: 20px 0 45px;
    }
    #introduce .gaiyou .mid {
        font-size: 125%;
        line-height:160%;
    }
    #introduce .gaiyou .come {
        font-size:93.8%;
        line-height:160%;
        letter-spacing: -0.5px;
    }
}

#introduce .anchor { padding:38px 0;}
#introduce .anchor ul {
    margin: auto;
    width: 90%; max-width: 1000px;
}
#introduce .anchor ul li a { background-color: #fff;}
@media only screen and (min-width:769px){
    #introduce .anchor ul li a:hover { color:#003aa8 !important; background-color: #faf138 !important;}
}
@media only screen and (max-width:768px){
    #introduce .anchor { padding:25px 0;}
    #introduce .anchor ul.anchor_box { flex-direction: column;}
    #introduce .anchor ul.anchor_box li { width: 100%;}
    #introduce .anchor ul.anchor_box li a { text-align: left;}
}

#introduce .introduce_list .inner {
    display:flex; flex-direction: column; gap:70px;
    padding: 105px 0 120px;
}
#introduce .introduce_list dl {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
}
#introduce .introduce_list dl dt {
    display: flex; justify-content:center; align-items: center; gap:20px;
    padding: 16px 10px;
    font-size: 158.2%;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#introduce .introduce_list dl dt span { display: flex; align-items: center; gap:30px;}
#introduce .introduce_list dl dt img { width: auto; height: 20px;}
#introduce .introduce_list dl dd {
    display: flex; flex-direction: column; gap:25px;
    position: relative;
    padding: 30px 50px;
    width: 100%;
}
#introduce .introduce_list .mid {
    position: relative;
    margin: 30px 0 0;
    padding: 0 25px;
    font-size: 137.5%;
    font-weight: 800;
    color: #0039a7;
}
#introduce .introduce_list .mid:first-child { margin-top:10px;}
#introduce .introduce_list .mid::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 8px; height: 100%;
    background-image: linear-gradient(0deg, #003aa8, #009ce1);
}
#introduce .introduce_list .faq .faq_q {
    position: relative;
    padding: 30px 30px 30px 185px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
    border-radius: 20px;
    box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
}
#introduce .introduce_list .faq .faq_q::after {
    display: block; clear: both; content:"";
    position: absolute; left:0; right:0; bottom: -29px; z-index: 99;
    margin: auto;
    width: 0; height: 0;
    border-style: solid;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-top: 30px solid #006cc5;
    border-bottom: 0;
}
#introduce .introduce_list .faq .faq_q::before {
    display: block; clear: both; content:"";
    position: absolute; left: 10px; bottom: 0;
    width: 100%; height: auto; max-width: 190px; aspect-ratio: 190 / 155;
    background-size: 100% auto !important;
}
#introduce .introduce_list #introduce01 .faq .faq_q::before {
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/q_illust01.webp") no-repeat;
}
#introduce .introduce_list #introduce02 .faq .faq_q::before {
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/q_illust02.webp") no-repeat;
}
#introduce .introduce_list #introduce03 .faq .faq_q::before {
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/q_illust03.webp") no-repeat;
}
#introduce .introduce_list .faq .faq_q b,
#introduce .introduce_list .faq .faq_a b {
    position: relative;
    display: block;
    min-height: 75px;
    padding-left:90px;
    font-weight: 800;
    background-size:75px auto !important; 
}
#introduce .introduce_list .faq .faq_q b {
    color: #fff;
    background:url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/faq_q.webp") no-repeat top left;
}
#introduce .introduce_list .faq .faq_a b {
    background:url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/faq_a.webp") no-repeat top left;
}
#introduce .introduce_list .faq .faq_q b {
    font-size: 137.5%;
    line-height: 160%;
}
#introduce .introduce_list .faq .faq_a b {
    margin-bottom: 20px;
    font-size: 156.2%;
    line-height: 150%;
}
#introduce .introduce_list .faq .faq_a span {
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/line_y.webp") repeat-x left bottom;
}
#introduce .introduce_list .faq .faq_a {
    padding: 4px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
    border-radius: 20px;
    box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
}
#introduce .introduce_list .faq .faq_a .come {
    position: relative;
    padding: 50px 280px 50px 40px;
    background:#fff;
    border-radius: 18px;
    overflow: hidden;
}
#introduce .introduce_list .faq .faq_a .come p {
    font-size: 106.2%;
}
#introduce .introduce_list .faq .faq_a .come::before {
    display: block; clear: both; content:"";
    position: absolute; right: 40px; bottom:-5px;
    width: 100%; height: auto;
    background-size: 100% auto !important;
}
#introduce .introduce_list #introduce01 .faq .faq_a .come::before {
    max-width: 200px; aspect-ratio: 190 / 230; transform: rotate(5deg);
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan12.webp") no-repeat top left;
}
#introduce .introduce_list #introduce02 .faq .faq_a .come::before {
    max-width: 170px; aspect-ratio: 190 / 265; transform: rotate(5deg);
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan8.webp") no-repeat top left;
}
#introduce .introduce_list #introduce03 .faq .faq_a .come::before {
    max-width: 200px; aspect-ratio: 190 / 220; transform: rotate(5deg);
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan9.webp") no-repeat top left;
}
#introduce .support_list {
    display: flex; gap:20px;
}
#introduce .support_list ul {
    padding: 30px 5px;
    width: 33.3%;
}
#introduce .support_list ul:nth-child(1) {background-image: linear-gradient(-18deg, #003eaa, #005ab9);}
#introduce .support_list ul:nth-child(2) {background-image: linear-gradient(-18deg, #005ab9, #0078cc);}
#introduce .support_list ul:nth-child(3) {background-image: linear-gradient(-18deg, #0078cc, #0096dd);}
#introduce .support_list ul li:nth-child(1) {
    font-size: 150%;
    font-weight: 700;
    line-height: 160%;
    color: #fff;
    text-align: center;
}
#introduce .support_list ul li:nth-child(2) {
    margin:20px auto 0;
    width: 120px;
}
#introduce .introduce_list .b_more { width: 100%; max-width: 580px;}
#introduce .introduce_list .b_more a { padding-right: 50px;}
@media only screen and (max-width:768px){
    #introduce .introduce_list .inner { gap:30px; padding: 45px 0 70px;}
    #introduce .introduce_list dl {
        background: #fff;
        box-shadow: 0 0 10px 0 rgba(45, 61, 139, 0.25);
    }
    #introduce .introduce_list dl dt {
        align-items:center; gap:10px;
        padding: 6px 5px;
        font-size: 100%;
    }
    #introduce .introduce_list dl dt span {
        flex-direction: column; align-items: flex-start; gap:5px;
        text-align: left;
    }
    #introduce .introduce_list dl dt img { margin-bottom: 10px;}
    #introduce .introduce_list dl dd {
        gap:15px;
        padding: 30px 20px;
    }
    #introduce .introduce_list .mid {
        margin: 30px 0 0;
        padding: 0 20px;
        font-size: 100%;
    }
    #introduce .introduce_list .mid:first-child { margin-top:0;}
    #introduce .introduce_list .faq .faq_q {
        padding: 20px 15px;
        border-radius: 15px;
    }
    #introduce .introduce_list .faq .faq_q::after {
        bottom: -15px;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-top: 17px solid #006cc5;
        border-bottom: 0;
    }
    #introduce .introduce_list .faq .faq_q::before {
        top:-15px; left:inherit; right:5px; bottom:inherit;
        max-width: 110px;
    }
    #introduce .introduce_list .faq .faq_q b,
    #introduce .introduce_list .faq .faq_a b {
        background-size:55px auto !important; 
    }
    #introduce .introduce_list .faq .faq_q b {
        padding:60px 0 0;
        font-size: 100%;
    }
    #introduce .introduce_list .faq .faq_a b {
        margin-bottom: 20px;
        padding: 0 0 0 70px;
        font-size: 106.2%;
    }
    #introduce .introduce_list .faq .faq_a span {
        background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/introduce/line_y.webp") repeat-x left bottom;
    }
    #introduce .introduce_list .faq .faq_a .come {
        padding: 20px 10px 120px;
    }
    #introduce .introduce_list .faq .faq_a .come p {
        font-size:87.5%;
        line-height: 160%;
    }
    #introduce .introduce_list .faq .faq_a .come::before {
        right:0; left: 0; bottom:-5px; margin: auto;
    }
    #introduce .introduce_list #introduce01 .faq .faq_a .come::before {
        max-width: 100px; aspect-ratio: 190 / 215;
    }
    #introduce .introduce_list #introduce02 .faq .faq_a .come::before {
        max-width: 90px; aspect-ratio: 190 / 245;
    }
    #introduce .introduce_list #introduce03 .faq .faq_a .come::before {
        max-width: 110px; aspect-ratio: 190 / 205;
    }
    #introduce .support_list {
        flex-direction: column; gap:10px;
    }
    #introduce .support_list ul {
        display: flex; justify-content: space-between;
        padding: 15px 10px 15px 20px;
        width:100%;
        background-image: linear-gradient(90deg, #003eaa, #0096dd) !important;
    }
    #introduce .support_list ul li:nth-child(1) {
        font-size:112.5%;
        text-align: left;
        letter-spacing: -0.5px;
    }
    #introduce .support_list ul li:nth-child(2) {
        margin:0;
        width: 70px;
    }
    #introduce .introduce_list .b_more { width: 100%; max-width: 580px;}
    #introduce .introduce_list .b_more a { padding-right: 50px;}
}

#introduce .timing { margin-bottom: 55px;}
#introduce .timing .inner {
    display: flex; flex-direction: column; gap:35px;
    padding: 35px 0;
}
#introduce .timing .mid,
#introduce .timing .come { text-align: center; color: #fff;}
#introduce .timing .mid { font-size: 168.8%;}
#introduce .timing .come { font-size: 112.5%;}
#introduce .timing .b_more { max-width: 440px;}
#introduce .timing .b_more a {
    width: 100%;
    padding-right: 50px;
    font-size: 125%;
    color:#2d3d8b;
    background: #fef100;
}
#introduce .timing .b_more a::before {
    right: 20px;
    width: 35px;
    height: 35px;
    background: #fff url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/arrow1_b.webp") no-repeat center center;
    background-size: 15px auto;
}
@media only screen and (max-width:468px){
    #introduce .timing .inner { gap:15px; padding: 30px 0;}
    #introduce .timing .mid { font-size: 118.8%;}
    #introduce .timing .come { font-size:87.5%;}
    #introduce .timing .b_more a { padding-right: 40px; font-size: 100%;}
    #introduce .timing .b_more a::before { right: 10px; width: 30px; height: 30px;}
}



/*=================================================================
  FLOW
===================================================================*/
#flow .breadcrumb,
#flow .breadcrumb a { color: #fff;}
#flow h2 { font-size:200%; font-weight: 800; line-height: 187%; text-align: center; letter-spacing: 2px;}
#flow .flow h2 {
    margin-bottom:35px;
    color: #fff;
    line-height: 100%;
}
#flow .flow .inner {
    display:flex; flex-direction: column;
    width: 100%; max-width: 1100px;
    padding: 50px 0 90px;
}
#flow .notes { font-weight: 600;}
#flow .flow .flow_list {
    position: relative;
    margin: 0 auto 60px;
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 0;
}
#flow .flow .flow_list li {
    position: relative; 
    padding: 20px 0;
    width:300px; height: 180px;
    background: #fff;
    box-sizing: border-box;
    clip-path: polygon(0 0, calc(100% - 15%) 0, 100% 50%, calc(100% - 15%) 100%, 0 100%, 15% 50%);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
#flow .flow .flow_list li:first-child {
    width: 285px;
    padding-right: 40px;
    clip-path: polygon(0 0, calc(100% - 15%) 0, 100% 50%, calc(100% - 15%) 100%, 0 100%);
}
#flow .flow .flow_list li:nth-child(2) { left:-22px;}
#flow .flow .flow_list li:nth-child(3) { left:-44px;}
#flow .flow .flow_list li:last-child {
    position: absolute; top: 0; right: 0;
    padding-left: 40px;
    width: 285px;
    background: #fff000;
    clip-path: polygon(0 0, calc(100% - 15%) 0, 100% 0, 100% 100%, 0 100%, 15% 50%);
}
#flow .flow .flow_list li span {
    display: block;
    font-size: 175%;
    font-weight: 900;
    line-height: 145%;
    color: #004098;
}
#flow .flow .flow_list li span + .b_more { margin-top: 20px;}
#flow .flow .flow_list li div { margin:auto; max-width: 215px; text-align: center;}
#flow .flow .flow_list li:nth-child(3) .b_more a::before { 
    background-image: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/anchor2_b.webp");
}
#flow .flow .flow_list li:last-child div { max-width:190px; margin-top: 25px;}
#flow .flow .flow_list li:last-child div span { margin-top: 20px;}
#flow .flow .come {
    display: flex; flex-direction: column; gap:20px;
    margin: auto;
    width: 90%;
    font-size: 137.5%;
    line-height: 195%;
    text-align: center;
    color: #fff;
}
#flow .flow .come span {
    color: #fbf038;
}
@media only screen and (max-width:1100px){
    #flow .flow .flow_list { width: 100%; max-width: 768px;}
    #flow .flow .flow_list li { padding: 30px 0; width: 212px !important; height: 180px;}
    #flow .flow .flow_list li:first-child { padding-left:10px;}
    #flow .flow .flow_list li:nth-child(2) { left:-27px;}
    #flow .flow .flow_list li:nth-child(3) { left:-54px;}
    #flow .flow .flow_list li span { font-size: 125%;}
    #flow .flow .flow_list li div { max-width:160px;}
    #flow .flow .flow_list li:last-child div { max-width:120px; margin-top: 30px; padding-right:10px; }
    #flow .flow .flow_list .b_more a { text-align: left; text-indent:15px; font-size: 75% !important; letter-spacing: 0;}
}
@media only screen and (max-width:768px){
    #flow h2 { font-size:137.5%;}
    #flow .flow h2 { margin-bottom: 25px; line-height:165%;}
    #flow .flow .inner { padding: 20px 0 35px;}
    #flow .flow .flow_list {
        position: relative;
        margin:0 auto 40px;
        width: 84%; height:430px;
        flex-direction: column;
    }
    #flow .flow .flow_list li {
        position: relative; left: 0 !important; 
        padding: 10px 0 25px !important;
        width:100% !important; height: auto;
        clip-path: polygon(0 0, 50% 15%, 100% 0, 100% 85%, 50% 100%, 0 85%);
    }
    #flow .flow .flow_list li:first-child {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18%), 50% 100%, 0 calc(100% - 18%));
    }
    #flow .flow .flow_list li:nth-child(2) { top:-15px; padding-top: 30px !important;}
    #flow .flow .flow_list li:nth-child(3) { top:-30px; padding-top: 30px !important;}
    #flow .flow .flow_list li:last-child {
        position:absolute; top: inherit; bottom: 0; padding-left: 0;
        clip-path: polygon(0 0, 50% 23%, 100% 0, 100% 100%, 100% 100%, 0 100%);
    }
    #flow .flow .flow_list li span {font-size: 125%;}
    #flow .flow .flow_list li span + .b_more { margin-top: 10px; width: 215px;}
    #flow .flow .flow_list li div { max-width:100%;}
    #flow .flow .flow_list .b_more a { text-align:center; text-indent:0; font-size:100% !important; letter-spacing: 0;}
    #flow .flow .flow_list li:last-child { padding:0 0 15px !important;}
    #flow .flow .flow_list li:last-child div { display: flex; align-items:center; gap:20px; max-width:280px; padding-top: 0;}
    #flow .flow .flow_list li:last-child div img { position: relative; top: 5px; width:150px;}
    #flow .flow .flow_list li:last-child div span { margin-top: 10px;}
}
@media only screen and (max-width:468px){
    #flow .flow .come { width: 96%; font-size: 87.5%;}
    #flow .flow .flow_list li:last-child div { max-width:240px;}
    #flow .flow .flow_list li:last-child div img {width:100px;}
}



#flow .plan { background: #fff;}
#flow .plan .inner {
    display:flex; flex-direction: column;
    width: 100%; max-width: 1000px;
    padding: 85px 0 155px;
}
#flow .plan h2 {
    margin-bottom: 85px;
    color: #223ca3;
}
#flow .plan .plan_cont {
    margin-bottom: 70px;
}
#flow .fee_cont { margin: auto; width: 100%; max-width: 600px;}
#flow .fee_cont .inner { padding: 30px 0 0;}
#flow .fee_cont .mid {
    position: relative;
    margin: 0 auto 65px;
    padding:  80px 0 15px;
    width: 100%;
    font-size: 53px;
    font-weight: 900;
    line-height: 53px;
    letter-spacing: 2px;
    color: #223ca3;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
#flow .fee_cont .mid::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 100%; height: 40px; max-width: 500px;
    background:#faf138;
}
#flow .fee_cont .mid span { position: relative; z-index: 9;}
#flow .fee_cont .mid span::after {
    display: block; clear: both; content:"";
    position: absolute; right: -138px; bottom: -15px;
    width: 100%; height: auto; aspect-ratio: 150 / 173;
    max-width: 130px;
    background:url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/denchan/dencyan1.webp") no-repeat top center;
    background-size: 100% auto;
    transform: rotate(5deg);
}
#flow .fee_cont .fee {
    display: flex; justify-content: space-between; align-items: flex-start;
}
#flow .fee_cont .fee .nen {
    padding:6px 0;
    width: 95px;
    font-size: 124.9%;
    color: #fff;
    text-align: center;
    background: #223ca3;
}
#flow .fee_cont .fee .come .fee1 {
    text-align: right;
    font-weight: 900;
    color: #223ca3;
}
#flow .fee_cont .fee .come .fee1 span:nth-child(1) {
    font-size: 89.6px;
    color: #0096dd;
}
#flow .fee_cont .fee .come .fee1 span:nth-child(1) small {
    position: relative; top: -15px;
    font-size: 60px;
    color: #0096dd;
}
#flow .fee_cont .fee .come .fee1 span:nth-child(2) {
    font-size: 56px;
}
#flow .fee_cont .fee .come .fee1 span:nth-child(3) {
    font-size: 175%;
}
#flow .fee_cont .fee .come .fee2,
#flow .fee_cont .fee .come .fee2 p { display: flex; align-items:center;}
#flow .fee_cont .fee .come .fee2 {
    padding-top: 20px;
    font-size: 100%;
    font-weight: 500;
    color: #223ca3;
}
#flow .fee_cont .fee .come .fee2 img {margin: 0 5px;}
#flow .fee_cont .fee .come .fee2 img.logo_kanna { width: 95px;}
#flow .fee_cont .fee .come .fee2 img.logo_photomanager { width: 95px;}
#flow .fee_cont .account {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    margin-top: 30px;
    padding-top: 35px;
    min-height: 120px;
    border-top:4px solid #223ca3;
}
#flow .fee_cont .account  p:nth-child(1){
    padding-top: 10px;
    font-size: 150%;
    font-weight: 900;
    color: #223ca3;
    letter-spacing: 1px;
}
#flow .fee_cont .account  p:nth-child(2) span:nth-child(1) {
    display: block;
    font-size:100%;
    font-weight: 900;
    color: #223ca3;
}
#flow .fee_cont .account  p:nth-child(2) span:nth-child(1) b {
    font-size: 65px;
    color: #0096dd;
}
#flow #tab2 .fee_cont .account p:nth-child(2) span:nth-child(1) b {
    margin-right: 60px;
    font-size: 56px;
}
#flow .fee_cont .account  p:nth-child(2) span:nth-child(1) small {
    font-size: 40px;
}
#flow .fee_cont .account  p:nth-child(2) span:nth-child(2) {
    display: block;
    font-size:11px;
    font-weight:600;
    color: #223ca3;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #flow .plan .inner { width: 86%; padding: 50px 0;}
    #flow .plan h2 { margin-bottom: 35px;}
    #flow .plan .plan_cont { margin-bottom: 70px;}
    #flow .plan .tab li { font-size: 87.5%;}
    #flow .plan .tab li:nth-child(2) { padding:6px 0; line-height: 150%;}
    #flow .fee_cont { margin: auto; width:100%;}
    #flow .fee_cont .inner { padding:50px 0;}
    #flow .fee_cont .mid {
        margin: 0 auto 40px;
        padding: 0 0 7px;
        width: 100%;
        font-size: 36px;
        line-height: 36px;
    }
    #flow .fee_cont .mid::before { height: 15px;}
    #flow .fee_cont .mid span::after { display: none;}
    #flow .fee_cont .fee { position: relative;} 
    #flow .fee_cont .fee .nen {
        position: absolute; top: 0; left: 0;
        padding:8px 0;
        width:24px; line-height: 24px;
        font-size:75%;
        writing-mode: vertical-rl;
    }
    #flow .fee_cont .fee .come .fee1 {
        position: relative; padding-left:30px; text-align: right;
    }
    #flow .fee_cont .fee .come .fee1 span:nth-child(1) {
        font-size: 54px;
    }
    #flow .fee_cont .fee .come .fee1 span:nth-child(1) small {
        top: -5px;
        font-size: 37px;
    }
    #flow .fee_cont .fee .come .fee1 span:nth-child(2) {
        font-size: 35px;
    }
    #flow .fee_cont .fee .come .fee1 span:nth-child(3) {
        position: absolute; top: -15px; right:0;
        font-size:12px;
        font-weight:900;
    }
    #flow .fee_cont .fee .come .fee2 { display:block;}
    #flow .fee_cont .fee .come .fee2 p { display:inline;}
    #flow .fee_cont .fee .come .fee2 {
        padding-top: 20px;
        font-size: 75%;
        line-height: 18px;
        text-align: center;
    }
    #flow .fee_cont .fee .come .fee2 img { margin: 0;}
    #flow .fee_cont .fee .come .fee2 img.logo_kanna { display:inline; width: 74px;}
    #flow .fee_cont .fee .come .fee2 img.logo_photomanager { display:inline; width: 72px;}
    #flow .fee_cont .account {
        display: flex; justify-content: space-between;
        margin-top: 20px;
        padding-top: 30px;
        min-height: inherit;
        border-top:3px solid #223ca3;
    }
    #flow .fee_cont .account p:nth-child(1){
        position: relative; top: -10px;
        padding-top:0;
        font-size: 100%;
        line-height: 150%;
        text-align: center;
    }
    #flow .fee_cont .account p:nth-child(2) span:nth-child(1) {
        position: relative;
        display: block;
        font-size:75%;
        font-weight: 900;
        line-height: 150%;
        color: #223ca3;
    }
    #flow .fee_cont .account p:nth-child(2) span:nth-child(1) b {
        font-size: 50px;
    }
    #flow #tab2 .fee_cont .account p:nth-child(2) span:nth-child(1) b {
        margin-right: 0;
        font-size: 40px;
    }
    #flow .fee_cont .account p:nth-child(2) span:nth-child(1) small {
        position: absolute; top:-5px; right: 0;
        width: 70px;
        font-size:21px;
        line-height: 100%;
        text-align: center;
    }
    #flow .fee_cont .account p:nth-child(2) span:nth-child(2) { display: none;}
    #flow .fee_cont .account p:nth-child(3) {
        display: block;
        font-size:75%;
        font-weight: 400;
        line-height: 150%;
        text-align: center;
        color: #223ca3;
        font-weight: 700;
    }
}
@media only screen and (max-width:320px){
     #flow .fee_cont .mid { font-size: 30px;}
     #flow .fee_cont .fee .come .fee1 span:nth-child(1) { font-size:40px; line-height: 50px;}
     #flow .fee_cont .account p:nth-child(1) { font-size: 87.5%;}
     #flow .fee_cont .account p:nth-child(2) span:nth-child(1) b {font-size:40px;}
}


#flow .plan .service_cont .mid { padding-top: 50px;}
#flow .plan .service_cont .mid span { display: block; margin: auto; max-width:780px;}
#flow .plan .service_cont .mid b {
    position: relative;
    display:inline-block;
    padding: 12px 30px;
    min-width: 220px;
    height: 53px;
    font-size: 162.5%;
    font-weight: 900;
    color:#223ca3;
}
#flow .plan .service_cont .mid b::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: -39px;
    width: 40px; height:auto; aspect-ratio: 40 / 53;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
#flow .plan .service_cont .mid.cate1 { background: #fff;}
#flow .plan .service_cont .mid.cate1 b,
#flow .plan .service_cont .mid.cate1 b::before { background:#f1f8fd;}
#flow .plan .service_cont .mid.cate2 { background:#f1f8fd;}
#flow .plan .service_cont .mid.cate2 b,
#flow .plan .service_cont .mid.cate2 b::before { background:#fff;}
#flow .plan .service_cont .box .inner {
    display:flex; flex-direction: column; gap:40px;
    max-width: 780px;
    padding: 70px 0 55px;
}
#flow .plan .service_cont .box .logo {
    display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
#flow .plan .service_cont .box .logo span {
    display: block;
    position: relative;
    padding:20px;
    width: 44%;
    height: 70px;
    color: #fff;
    font-size:187.5%;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #003aa8, #009ce1);
}
#flow .plan .service_cont .box .logo span::before{
    display: block; clear: both; content:"";
    position: absolute; top: 0; right: -39px;
    width: 40px; height:auto; aspect-ratio: 40 / 70;
    background: #009ce1;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
#flow .plan .service_cont .box .logo b {
    display: block;
    position:absolute; top: 0; bottom: 0; right:-60px;
    margin: auto;
    width: 90px; height: 30px;
    font-size: 20px;
    font-weight: 900;
    color: #223ca3;
    text-align: center;
    background: #faf138;
    border-radius: 30px;
}
#flow .plan .service_cont .box .logo img { width: 50%;}
#flow .plan .service_cont .box .logo img.logo_kanna { max-width: 285px;}
#flow .plan .service_cont .box .logo img.logo_pickbuddy { max-width: 265px; margin-right:20px;}
#flow .plan .service_cont .box .logo img.logo_manabiba { max-width:180px; margin-right:70px;}
#flow .plan .service_cont .box .logo img.logo_photomanager { max-width: 280px;}
#flow .plan .service_cont .box .logo img.logo_connect { max-width: 267px; margin-right:20px;}
#flow .plan .service_cont .box .logo .free_option::after {
    display: block; clear: both; content:"※無料オプション";
    position: absolute; left: 0; bottom:-40px;
    width:100%;
    font-size:20px;
    font-weight:900;
    text-align: center;
    color: #0096dd;
}
#flow .plan .service_cont .box .logo:has(.free_option) {
    margin-bottom:15px;
}
#flow .plan .service_cont .box .txt { color: #223ca3;}
#flow .plan .service_cont .box .txt .come {
    margin-bottom: 5px;
    font-size: 118.8%;
    font-weight: 700;
    letter-spacing: -0.5px;
}
#flow .plan .other_cont .inner {
    max-width:590px;
    padding: 70px 0;
}
#flow .plan .other_cont .come {
    margin: 40px auto 20px;
    width: 100%; max-width: 850px;
    font-size: 137.5%;
    font-weight: 900;
}
#flow .plan .other_cont .come a {
    color: #0096dd;
}
#flow .plan .other_cont .notes a { color: #0096dd;}
#flow .plan .other_cont .b_entry { padding: 6px;}
#flow .plan .other_cont .b_entry a { padding: 15px 100px 15px 15px; font-size: 137.5%;}
#flow .plan .other_cont .b_entry a::before {
    width: 120px;
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#flow .plan .other_cont .b_entry a::after {
    width: 80px;
    background: url("/build/releases/607d0f76b3dc0dbf0e4407ffb70c685ff85c4b83f243b8ac98fc5ac6bf97355a-db1ed39aae3506949bf15f550ff557ba0fb0acba9f9bab0e41764a9bb8e36033/images/common/arrow1_w.webp") no-repeat center center;
    background-size: 29px auto;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #flow .plan .plan_cont { margin-bottom: 50px;}
    #flow .plan .service_cont .box .inner {
        gap:30px;
        padding: 50px 0 35px;
    }
    #flow .plan .service_cont .mid { padding-top:0;}
    #flow .plan .service_cont .mid b {
        padding: 6px 30px;
        min-width: 170px;
        height: 40px;
        font-size: 112.5%;
    }
    #flow .plan .service_cont .mid b::before {
        right: -29px;
        width: 30px; aspect-ratio: 30 / 40;
    }
    #flow .plan .service_cont .box .logo span {
        padding:6px 20px;
        width:140px;
        height: 40px;
        font-size:112.5%;
    }
    #flow .plan .service_cont .box .logo span::before{
        right: -29px;
        width: 30px; aspect-ratio: 30 / 40;
    }
    #flow .plan .service_cont .box .logo b {
        right:-120px;
        width: 80px; height: 30px;
        font-size: 19px;
    }
    #flow .plan .service_cont .box .logo img { margin:30px auto 0; width:90%; text-align: center;}
    #flow .plan .service_cont .box .logo img.logo_kanna { max-width:230px;}
    #flow .plan .service_cont .box .logo img.logo_pickbuddy { max-width:245px;}
    #flow .plan .service_cont .box .logo img.logo_manabiba { max-width:158px;}
    #flow .plan .service_cont .box .logo img.logo_photomanager { max-width:227px;}
    #flow .plan .service_cont .box .logo img.logo_connect { max-width:236px;}
    #flow .plan .service_cont .box .logo .free_option::after {
        position: absolute; top: 10px; left:145px;
        margin-top: 10px;
        width: 100%;
        font-size:75%;
    }
    #flow .plan .service_cont .box .logo:has(.free_option) {
        margin-bottom:0;
    }
    #flow .plan .service_cont .box .txt { color: #223ca3;}
    #flow .plan .service_cont .box .txt .come {
        font-size: 100%;
    }
    #flow .plan .other_cont .inner { padding:35px 0 60px;}
    #flow .plan .other_cont .come {
        margin: 25px auto 15px;
        font-size: 100%;
    }
    #flow .plan .other_cont .b_entry { padding: 5px;}
    #flow .plan .other_cont .b_entry a { padding: 8px 60px 8px 10px; font-size:118.8%; text-align: center;}
    #flow .plan .other_cont .b_entry a::before {
        width:60px;
        clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    #flow .plan .other_cont .b_entry a::after {
        width:45px;
        background-size: 20px auto;
    }
}
@media only screen and (max-width:320px){
    #flow .plan .service_cont .box .logo span { width: 120px; font-size:87.5%; }
    #flow .plan .service_cont .box .logo b {right: -100px}
    #flow .plan .service_cont .box .logo .free_option::after {left: 130px;}
}