@charset "utf-8";

/* ------------------------------ */
/* 共通開始 */
/* ------------------------------ */
/************ breakpointの設定開始 ************/
$bp_1920: 1920px;
$bp_1760: 1760px;
$bp_1600: 1600px;
$bp_1500: 1500px;
$bp_1450: 1450px;
$bp_1400: 1400px;
$bp_1300: 1300px;
$bp_1240: 1240px;
$bp_1200: 1200px;
$bp_1100: 1100px;
$bp_1050: 1050px;
$bp_1000: 1000px;
$bp_tab_980: 980px;
$bp_850: 850px;
$bp_800: 800px;
$bp_sp_768: 768px;
$bp_700: 700px;
$bp_580: 580px;
$bp_440: 440px;
$bp_400: 400px;
$bp_380: 380px;

@mixin bp_1760 {
    @media screen and (max-width: ($bp_1760)) {
      @content;
    }
  }
  
@mixin bp_1600 {
  @media screen and (max-width: ($bp_1600)) {
    @content;
  }
}
@mixin bp_1500 {
  @media screen and (max-width: ($bp_1500)) {
    @content;
  }
}
@mixin bp_1450 {
    @media screen and (max-width: ($bp_1450)) {
      @content;
    }
  }
@mixin bp_1400 {
  @media screen and (max-width: ($bp_1400)) {
    @content;
  }
}
@mixin bp_1300 {
  @media screen and (max-width: ($bp_1300)) {
    @content;
  }
}
@mixin bp_1240 {
    @media screen and (max-width: ($bp_1240)) {
        @content;
    }
}
@mixin bp_1200 {
    @media screen and (max-width: ($bp_1200)) {
      @content;
    }
  }
@mixin bp_1100 {
@media screen and (max-width: ($bp_1100)) {
    @content;
}
}
@mixin bp_1050 {
@media screen and (max-width: ($bp_1050)) {
    @content;
}
}
@mixin bp_1000 {
  @media screen and (max-width: ($bp_1000)) {
    @content;
  }
}
@mixin bp_tab_980 {
  @media screen and (max-width: ($bp_tab_980)) {
    @content;
  }
}
@mixin bp_850 {
    @media screen and (max-width: ($bp_850)) {
      @content;
    }
}
@mixin bp_800 {
    @media screen and (max-width: ($bp_800)) {
      @content;
    }
}
@mixin bp_sp_768 {
  @media screen and (max-width: ($bp_sp_768)) {
    @content;
  }
}
@mixin bp_700 {
    @media screen and (max-width: ($bp_700)) {
      @content;
    }
  }
@mixin bp_580 {
    @media screen and (max-width: ($bp_580)) {
      @content;
    }
  }
@mixin bp_440 {
@media screen and (max-width: ($bp_440)) {
    @content;
}
}
@mixin bp_400 {
@media screen and (max-width: ($bp_400)) {
    @content;
}
}
@mixin bp_380 {
@media screen and (max-width: ($bp_380)) {
    @content;
}
}

.pc {
    @media screen and (min-width: (1025px)) {
        display: block;
      }
    @media screen and (max-width: (1024px)) {
        display: none !important;
    }
}
.pc_big {/* 1400pxより大きい画面にはPC版のヘッダーを適用したい。 */
    @media screen and (min-width: (1401px)) {
      display: block;
    }
    @media screen and (max-width: (1400px)) {
        display: none !important;
    }
}
.pc_small_sp {/* SP版のヘッダーを1400pxまで適用したい。 */
    @media screen and (min-width: (1401px)) {
      display: none !important;
    }
    @media screen and (max-width: (1400px)) {
      display: block !important;
    }
}
.pc-show {
    @media screen and (min-width: (769px)) {
        display: block !important;
      }
    @media screen and  (max-width: (768px)) {
        display: none !important;
    }
}
.tab {
    @media screen and (min-width: (1024px)) {
        display: none !important;
      }
    @media screen and (min-width: (771px)) and (max-width: (1023px)) {
        display: block;
      }
}
.sp {
    @media screen and (min-width: (770px)) {
        display: none !important;
      }
    @media screen and (max-width: (769px)) {
        display: block;
      }
}
.width_over1240_show {
    @media screen and (min-width: (1240px)) {
        display: block !important;
      }
    @media screen and  (max-width: (1239px)) {
        display: none !important;
    }
}
.width_under1240_show {
    @media screen and (min-width: (1240px)) {
        display: none !important;
      }
    @media screen and  (max-width: (1239px)) {
        display: block !important;
    }
}
/************ breakpointの設定終了 ************/

/************ フォント読み込み開始 ************/
body, input, button, textarea, select {
    font-family: "Noto Sans CJK JP","Noto Sans Japanese","Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
/************ フォント読み込み終了 ************/

/************ カラーコード開始 ************/
$c-main: #ac1e40;
$c-main-dark: #8a0021;
$c-main-light1:#a01c3b;
$c-main-light2:#d598a7;
$c-white: #ffffff;
$c-beige: #f7f7f7;
$c-beige-slash: #f5f5f5;
$c-grey:#333333;
$c-grey-light1:#645e66;
$c-grey-light2: #ededed;
$c-grey-light3:#bfbfbf;
$c-grey-light4: #e0e0e0;
$c-grey-footer: #a9a9a9;
$c-black:#f2f2f2;

$c-blue:#0153ac;
$c-blue-dark:#004187;
$c-pink:#b14292;
$c-pink-light:#f4d3db;
$c-pink-dark:#8e2f74;
$c-pink-slash-u: #da9dac;
$c-pink-slash-l: #f4eef3;

$c-green:#1c9734;
$c-green-slash-u: #a9d8b2;
$c-green-slash-l: #e7f8ea;
$c-green-bk: #eef9f0;
$c-green-dark:#15832a;
$c-orange:#ec7237;
$c-orange-dark:#cb602c;

$c-scan-pink: #b14292;
$c-scan-pink-bk: #f9f3f7;

$c-bpo-orange: #ec7237;
$c-bpo-orange-bk: #fff6f2;

$c-data-blue: #0153ac;
$c-data-blue-bk: #e6f2ff;
$c-data-blue-bk-example: #f0f7ff;

$c-btn-lightcolor: #ba294f;
$c-btn-lightcolor-light: #ba657b;

$c-common-blue: #8dbae9;

$grad-red-inochi:linear-gradient(180deg, rgba(177, 46, 78, 1), rgba(203, 124, 146, 1));
$grad-red:linear-gradient(90deg, rgba(213, 152, 167, 1), rgba(213, 152, 167, 0));
$grad-red_2:linear-gradient(180deg, rgba(213, 152, 167, 1), rgba(213, 152, 167, 0));
$grad-blue:linear-gradient(180deg, rgba(209, 233, 255, 1), rgba(209, 233, 255, 0));
$grad-grey:linear-gradient(90deg, rgba(248, 248, 248, 1), rgba(248, 248, 248, 0));
$grad-green:linear-gradient(180deg, rgba(169, 216, 178, 1), rgba(231, 248, 234, 1));
$grad-green-dark:linear-gradient(180deg, rgba(75, 173, 94, 1), rgba(100, 184, 116, 1));
$grad-scan-pink:linear-gradient(180deg, rgba(225, 180, 213, 1), rgba(250, 229, 244, 1));
$grad-scan-pink-dark:linear-gradient(180deg, rgba(197, 116, 175, 1), rgba(209, 145, 191, 1));
$grad-bpo-orange:linear-gradient(180deg, rgba(248, 200, 177, 1), rgba(254, 237, 229, 1));
$grad-bpo-orange-dark:linear-gradient(180deg, rgba(240, 141, 93, 1), rgba(242, 157, 115, 1));
$grad-data-blue:linear-gradient(180deg, rgba(201, 225, 246, 1), rgba(236, 242, 246, 1));
$grad-data-blue-dark:linear-gradient(180deg, rgba(51, 136, 228, 1), rgba(93, 160, 233, 1));
$grad-common-blue:linear-gradient(180deg, rgba(140, 189, 242, 1), rgba(178, 213, 247, 1));
/************ カラーコード終了 ************/

/************ フォントサイズ開始 ************/
$px-12: 12px;
$px-14: 14px;
$px-16: 16px;
$px-18: 18px;
$px-20: 20px;
$px-22: 22px;
$px-24: 24px;
$px-28: 28px;
$px-30: 30px;
$px-32: 32px;
$px-36: 36px;
$px-35: 35px;
$px-40: 40px;
$px-42: 42px;
$px-46: 46px;
$px-48: 48px;
$px-56: 56px;
$px-94: 94px;
/************ フォントサイズ終了 ************/

/************ グラデーション開始 ************/
@mixin grad-blue {
background-image: linear-gradient(90deg, rgba(4, 59, 139, 1), rgba(18, 36, 108, 1));
}
@mixin grad-btn {
background: linear-gradient(135deg, transparent 10px, #043c8d 10px,#12246c 100%);
}
@mixin grad-btn-white {
background: linear-gradient(135deg, transparent 10px, #043c8d 10px, #fff 0);
}
@mixin grad-btn-orange {
background: linear-gradient(135deg, transparent 10px, #dd7615 10px, #df5910 100%);
}
/************ グラデーション終了 ************/

/************ ボタン開始 ************/


/************ ボタン終了 ************/

/************ 開始 ************/


/************ 終了 ************/

/************ 共通css開始 ************/
a {
    color: unset;
    text-decoration: none;
}
img{
    max-width: 100%;
    vertical-align: bottom;
}
.top_content {
    img {
        height: 100%;
    }
}
footer {
    img {
        height: 100%;
    }
}
.ank{
    padding-top: 80px;
    margin-top: -80px;
}
body {
    font-size: 16px;
    /*width: 100vw;
    min-height: 100vh;*/
    position: relative;
    color: $c-grey;
}
.common_inner{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 40px);
}
/************ 共通css終了 ************/

/* ------------------------------ */
/* 共通終了 */
/* ------------------------------ */


/* ------------------------------ */
/* ヘッダー開始 */
/* ------------------------------ */
.header01 {
    height: 80px;
    position: fixed;
    width: 100%;
    background-color: $c-white;
    z-index: 10;

    .header01_wrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        background-color: $c-white;
        max-width: 1920px;
        margin: 0 auto;

        .header01_logo {
            a {
                img {
                    width: 386px;
                    margin: 0 0 0px 15px;
					@include bp_1600{
						width: 250px;
					}
                }
				transition: ease 0.5s;
				&:hover{
					opacity: 0.7;
				}
            }
        }

        .header01_nav_wrapper {
            height: 100%;
            display: flex;
            align-items: center;

            .header01_nav {
                display: flex;
                flex-direction: row;
                align-items: center;

                ul.header01_list {
                    display: flex;
                    flex-direction: row;
                    align-items: center;



                    li.header01_item {
                        position: relative;

                        ul {
                            display: block;
                        }

                        &.has_child {
							cursor: pointer;
							margin-right: 18px;
                            &:hover > ul {
                                visibility: visible;
                                opacity: 1;
                            }
                            ul {
								padding: 12px 0;
                                position: absolute;
                                left:0;
                                top:53px;
                                z-index: 4;
                                    /*形状を指定*/
                                background-color:$c-main;
                                width:180px;
                                    /*はじめは非表示*/
                                visibility: hidden;
                                opacity: 0;
                                    /*アニメーション設定*/
                                transition: all .5s;

                                li {
									
                                    a {	
										padding: 8px 0;
										font-size: $px-16;
                                        color: $c-white;
                                    }
                                }
                            }
							/*--- 下矢印 ---*/
                                    &::after {
                                        content: '';
                                        position: absolute;
                                        top: 50%;
                                        right: 0;
                                        display: inline-block;
                                        vertical-align: middle;
                                        color: $c-main;
                                        line-height: 1;
                                        width: 8px;
                                        height:8px;
										margin-top: -6px;
                                        border: 2px solid $c-main;
                                        border-left: 0;
                                        border-bottom: 0;
                                        box-sizing: border-box;
                                        transform: translateY(25%) rotate(135deg);
                                    }
                        }
                        a,div {
                            display: block;
                            margin: 0px 18px 0 18px;
                            transition: .5s;
							@include bp_1760{
								margin: 0 15px;
							}
                            &:hover {
                                color: $c-main;
                            }
                            
                                font-size: $px-18;
								font-weight: 700;
                                &.tel_lower {
                                    position: relative;
                                    padding-right: 20px;

                                    
                            }
                        }
                    }
                }
                .sns_wrap {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin: 0 25px;
					@include bp_1760{
						margin: 0;
					}

                    a {
						width: 40px;
						margin-right: 10px;
						&:hover{
							opacity: 0.7;
						}
                        img {
							height: auto;
                        }
                    }
                }
                .tel_wrap {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin: 0 15px;

                    .tel_upper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
						white-space: nowrap;
                        img {
                            height: 30px;
                        }
                        .tel_number {
                            color: $c-main;
                            font-size: $px-24;
                            width: 195px;
                            height: 35px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: 700;
                        }
                    }
                    .tel_lower {
                        font-size: $px-14;
						white-space: nowrap;
                    }
                }
                .inquiry {
                    height: 80px;
                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 260px;
                        height: 100%;
                        background-color: $c-main;
                        color: $c-white;
                        font-size: $px-18;
						font-weight: 500;
						transition: ease 0.5s;
                        @include bp_1600 {
                            max-width: 160px;
                        }
						&:hover{
							background: $c-main-dark;
						}
                    }
                }
            }
        }
    }
}
/*========== ヘッダー横幅1400px以下開始 ==========*/

/* ------------------------------ */
/* 1400px以下のヘッダー開始 */
/* ------------------------------ */

body {
	margin: 0;
    line-height: 1.3;
}
.toppage_all {
	width: 100%;
    /*width: 100vw;
	min-height: 100vh;*/
	position: relative;
}
.header02 {
    position: fixed;
    top: 0;
	background-color: $c-white;
	z-index: 10;
	height: 86px;
	display: flex;
	align-items: center;
    width: 100%;
    border-top: 6px solid $c-main;
    box-sizing: border-box;

    .header02_wrap {
        height: 100%;

        section {
            height: 420px;
            display: grid;
            justify-content: center;
            align-content: center;
        }
        .header_sp_wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100%;
            width: 100%;
            justify-content: space-between;

            .header02_logo {
                height: 100%;
                a {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 20px 0 20px;
				&:hover{
					opacity: 0.7;
				}

                    @include bp_580 {
                        padding: 0 10px 0 10px;
                    }

                    img {
                        max-width: 333px;
                        width: 100%;
                        height: auto;

                        @include bp_440 {
                            padding: 5px 5px 5px 5px;
                        }
                    }
                }
            }
            .header_right_sp {
                display: flex;
                flex-direction: row;

                .contact {
                    width: 86px;
                    height: 80px;
                    

                    a {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        width: 100%;
                        height: 100%;
                        transition: ease 0.5s;
						background-color: $c-main;
						&:hover{
							 background-color: $c-main-dark;
						}

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

                        img {
                            height: 24px;
                            width: 35px;
                            margin: 0 auto;
                        }

                        .box_text {
                            color: $c-white;
                            font-size: $px-12;
                            text-align: center;
                            height: 20px;
                            display: flex;
                            align-items: flex-end;
                            justify-content: center;
                            font-family: "Noto Sans CJK JP","Noto Sans Japanese","Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
                            font-weight: 700;
                        }
                    }
                }
            }
        }

        /*----- SP版メニュー開始 -----*/

        .header__nav {
            background-color: $c-white;
            position: fixed;
            top: 86px;
            right: 0;
            z-index: 1;
            transform: translateX(100%);
            width: 600px;
            height: 100vh;
            display: grid;
            justify-content: center;
            align-content: flex-start;
            color: $c-grey;
            text-align: center;
            transition: .5s;
            overflow: auto;

            .header_nav_inner {
                padding-inline: 0;
                box-sizing: border-box;
                margin: 60px auto;

                /*---SPメニューをスクロールさせる---*/
                width: 90%;
                max-width: 690px;
                min-width: 375px;
                height: 99%;
                //overflow: auto;
                -webkit-overflow-scrolling: touch;

                li.nav-items__item {
                    list-style: none;
                    cursor: pointer;
                    border-bottom: 1px solid $c-grey-light2;

                    &:first-child {
                        border-top: 1px solid $c-grey-light2;
                    }

                    .m_wrap {
                        display: flex;
                        align-items: center;
                    }

                    .m_s_small {
                        font-size: $px-20;
                    }

                    a {
                        padding: 20px 20px;
                        display: block;
                    }

                    &:hover {
                        color: $c-main;
                    }

                    /* 矢印 */
                    .m_s_small {
                        position: relative;
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;

                        &::after {
                            border-right: solid 2px $c-main;
                            border-top: solid 2px $c-main;
                            content: "";
                            display: block;
                            height: 8px;
                            position: absolute;
                            right: 25px;
                            top: 38%;
                            transform: rotate(45deg);
                            transition: transform .3s ease-in-out, top .3s ease-in-out;
                            width: 8px;
                        }
                    }

                    
                    &.has_child_sp {

                        /* アコーディオンメニュー */
                        &.accordion {
                            position: relative;

                            .accordion-title {
                                color: $c-grey;
                                cursor: pointer;
                                font-size: 16px;
                                padding: 20px 20px;
                            }
                            ul.accordion-content {
                                display: none;
                                padding: 10px 20px;
                                color: $c-grey-light1;

                                li {
                                    position: relative;

                                    &::after {
                                        border-right: solid 2px #ac1e40;
                                        border-top: solid 2px #ac1e40;
                                        content: "";
                                        display: block;
                                        height: 8px;
                                        position: absolute;
                                        right: 25px;
                                        top: 38%;
                                        transform: rotate(45deg);
                                        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
                                        width: 8px;
                                    }

                                    a {
                                        display: flex;
                                        justify-content: flex-start;
                                    }
                                }
                            }
                            /* 矢印 */
                            .accordion-title {

                                .m_s_small {
                                    &.plus {
                                        position: relative;
                                        width: 100%;
                                        margin: 0 auto;
    
                                        &::before,&::after {
                                            content: '';
                                            display: inline-block;
                                            position: absolute;
                                            background-color: $c-main;
                                        }
                                        &::before {
                                            right: 25px;
                                            width: 3px;
                                            height: 19px;
                                            top: 6px;
                                        }
                                        &::after {
                                            transform: rotate(90deg);
                                            width: 1px;
                                            top: 7px;
                                            height: 15px;
                                        }
                                    }
                                }

                                &.open {
                                    .m_s_small {
                                        &.plus {
                                            &::before {
                                                opacity: 0;
                                            }
                                        }
                                    }
                                   
                                }
                            }
                        }
                
                    }
                    
                }
                .sns_wrap_sp {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    padding: 10px;

                    a {
                        margin: 0 15px;	
						&:hover{
							opacity: 0.7;
						}
                    }

                    img {
                        width: 45px;
                    }
                }
                .tel_wrap_sp {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin: 30px 15px 20px 15px;

                    .tel_upper_sp {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        img {
                            height: 30px;
                        }
                        .tel_number_sp {
                            color: $c-main;
                            font-size: $px-24;
                            width: 195px;
                            height: 35px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: 700;
                        }
                    }
                    .tel_lower_sp {
                        font-size: $px-14;
                    }
                }
				.contact_sp{
					margin: 30px 0 20px 0;
					a{
						font-size: 17px;
						font-weight: 700;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 50px;
						width: 100%;
						color: $c-white;
						background-color: $c-main;
						border-radius: 10px;
						&:hover{
							background-color: $c-main-dark;
						}
					}
				}
				
            }

        }
        /*----- SP版メニュー終了 -----*/
    }
}
/*==================== ハンバーガーメニュー開始 ====================*/
.inquiry_hamburger {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 86px;
    height: 81px;
	cursor: pointer;
    .box_pic {

    }

    .box_text {
        color: $c-main;
        font-size: $px-12;
        height: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Noto Sans CJK JP","Noto Sans Japanese","Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        font-weight: 700;
    }
}
.hamburger {
    position: relative;/*ボタン内側の基点となるためrelativeを指定*/
    background:$c-white;
    cursor: pointer;
    width: 60px;
    height:100%;
    border: none;
    z-index: 10;
    transition: all .5s 0s ease;
    top: 4px;
    padding: 4px 4px 2px 4px;
    padding-bottom: 5px;
}
/* ハンバーガーメニューの線 */
.hamburger span {
    width: 55%;
    height: 2px;
    background-color: $c-main;
    position: relative;
    transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
    display: block;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
}

.hamburger span:nth-child(1) {
    top: 0;
    //left: 14px;
    left: 53%;
}

.hamburger span:nth-child(2) {
    margin: 6px 0;
    //left: 10px;
    left: 50%;
}

.hamburger span:nth-child(3) {
    top: 0;
    //left: 6px;
    left: 47%;
}
/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
    transform: translateX(0);
    
}

.hamburger_01.active span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
    left: 0%;
    margin: 0 auto;
}

.hamburger_01.active span:nth-child(2) {
    opacity: 0;
}

.hamburger_01.active span:nth-child(3) {
    top: -7px;
    transform: rotate(-45deg);
    left: 0%;
    margin: 0 auto;
}

.header__nav{
    &.hamburger-open {
        transform: translateX(0) !important;
    }
}
/*==================== ハンバーガーメニュー終了 ====================*/

/* ------------------------------ */
/* 1400px以下のヘッダー終了 */
/* ------------------------------ */

/*========== ヘッダー横幅1400px以下終了 ==========*/

/* ------------------------------ */
/* ヘッダー終了 */
/* ------------------------------ */


.top_content {
    padding-top: 80px;
	overflow: hidden;
}
/* ------------------------------ */
/* メインビュー開始 */
/* ------------------------------ */
.mainview {
    width: 100%;
    display: flex;
    justify-content: center;
	position: relative;
    height: calc(100vh - 80px);
    overflow: hidden;

	.mainview_catch{

        .mainview_catch_inner {
            background-color: rgba(255,255,255,0.95);
            width: 100%;
            height: auto;
            padding: 80px 100px;
        }

		position: absolute;
		left:50%;
		top:50%;
		-webkit-transform: translate(-50%, -50%);
 		transform: translate(-50%, -50%);
		z-index: 2;
		text-align: center;
		box-sizing: border-box;
		padding: 13px 13px;		
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.1));
		min-width: 700px;
        border: 5px solid #fff;

        @include bp_1000() {
            top: 43%;
        }

		&_01{
			font-size: 58px;
			color: $c-main;
			font-style: italic;
			font-weight: 700;
			letter-spacing: 0.05em;
			line-height: 1.2;
			margin-bottom: 15px;
			position: relative;
			z-index: 5;

            @include bp_1600() {
                font-size: 48px;
            }

            span {
                background: $grad-red_inochi;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
		}
		&_02{
			font-size: $px-22;
			color:#333;
			font-weight: 700;
			letter-spacing: 0.05em;
			line-height: 1.7;
			margin-bottom: 0px;
			position: relative;
			z-index: 5;

            img {
                width: 450px;
                height: auto;
            }
		}
        &_03 {
            color: $c-main;
            font-size: 24px;
            position: relative;
            font-weight: 700;
            margin-top: 50px; 

            @include bp_1600() {
                font-size: 20px;
            }

            &::after {
                content: "";
                position: absolute;
                right: 0;
                display: inline-block;
                vertical-align: middle;
                color: #ac1e40;
                line-height: 1;
                width: 8px;
                height: 8px;
                margin-top: -6px;
                border: 2px solid #ac1e40;
                border-left: 0;
                border-bottom: 0;
                box-sizing: border-box;
                transform: translateY(25%) rotate(135deg);
                bottom: -13px;
                left: 50%;
            }
        }
		&_btn{
			z-index: 5;
			position: absolute;
			bottom: 40px;
			right: 40px;

            @include bp_1000(){
                bottom: 113px;
                left:50%;
                right: unset;
                -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
            }

			a{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 86px;
			width: 400px;
			background-color: $c-main-dark;
			border-radius: 10px;
			filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
			.txt {
				color: $c-white;
				font-size: $px-24;
				font-weight: 700;
				letter-spacing: 0.06em;
			}
			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat right bottom;
				background-size: contain;
				width: 65px;
				height: 51px;
			}
			&:hover{
				background-color: $c-main;
			}
			}
		}
	}
	.scroolbox_txt{
		position: absolute;
		left: 50%;
		bottom: 30px;
		-webkit-transform: translate(-50%, 0);
 		transform: translate(-50%, 0);
		color: $c-white;
		text-shadow:1px 1px 5px rgba(0,0,0,0.3);
		font-size: $px-16;
		font-weight: 700;
		letter-spacing: 0.14em;
		z-index: 2;
	}
	.scroolbox {
		position: absolute;
		left: 50%;
		bottom: -25px;
		z-index: 9;
		width: 1px;
		height: 50px;
		filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
	}
	.scroolbox .btn-scroll-deco .scroll-line01 {
		transform-origin: left top;
		transform: rotate(90deg);
		background: #fff;
		width: 2px;
		height: 25px;		
		display: block;
		animation-name: topscroll;/*名前*/
		animation-duration: 1.8s;/*秒*/
		animation-timing-function: linear;/*動き方*/
		animation-delay: 0;/*遅延（秒）*/
		animation-iteration-count: infinite;/*繰り返し回数（無限はinfinite）*/
		animation-direction: normal;
	}
	@keyframes topscroll {
	 0% {
	 transform: scaleY(0);
	 transform-origin: top;
	}
	 49% {
	 transform: scaleY(1);
	 transform-origin: top;
	}
	 50% {
	 transform: scaleY(1);
	 transform-origin: top;
	}
	 50% {
	 transform: scaleY(1);
	 transform-origin: bottom;
	}
	 100% {
	 transform: scaleY(0);
	 transform-origin: bottom;
	}
	}
	.scroolbox .btn-scroll-deco .scroll-line02 {
		position: absolute;
		left: 0;
		top: 25px;
		transform-origin: left top;
		transform: rotate(90deg);
		background: $c-main-dark;
		width: 2px;
		height: 25px;
		display: block;
		animation-name: topscroll02;/*名前*/
		animation-duration: 1.8s;/*秒*/
		animation-timing-function: linear;/*動き方*/
		animation-delay: 0;/*遅延（秒）*/
		animation-iteration-count: infinite;/*繰り返し回数（無限はinfinite）*/
		animation-direction: normal;
		z-index: 1;
	}
	@keyframes topscroll02 {
	 0% {
	 transform: scaleY(0);
	 transform-origin: top;
	}
	 49% {
	 transform: scaleY(0);
	 transform-origin: top;
	}
	 50% {
	 transform: scaleY(0);
	 transform-origin: top;
	}
	 50% {
	 transform: scaleY(0);
	 transform-origin: top;
	}
	 100% {
	 transform: scaleY(1);
	 transform-origin: top;
	}
	}
	.mainview_bk{
		position: relative;
		z-index: 1;
		width: 100%;
		overflow-x: hidden;
        height: 100%;

        .d-demo {
            height: 100%;
        }
	}
}
/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/
.d-demo__wrap {
  display: flex;
  overflow: hidden;
  //height: 270px;
  height: calc(100% / 3);
}

.d-demo__list {
  display: flex;
  list-style: none;
  //height: 270px;
  height: 100%;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
	//height: 270px;
    height: 100%;
}
.d-demo__item > img{
	height: 100%;
	width: auto;
	max-width: inherit;
}
/*
左から右へ
----------------------------*/
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

.d-demo__list--right{
animation :infinity-scroll-right 95s infinite linear 0.5s both;
}
.demo__wrap:hover .d-demo__list--left{
  animation-play-state: paused;
}
/* ------------------------------ */
/* メインビュー終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Aboutus開始 */
/* ------------------------------ */
section.aboutus_wrap {
    display: flex;
    justify-content: center;
    background-color: $c-white;
	padding: 115px 0;
    .aboutus_inner {
        max-width: $bp_1200;
        display: flex;
        flex-direction: row;
		justify-content: space-between;
		position: relative;
		z-index: 9;
        @include bp_1050 {
            flex-direction: column;
            align-items: center;
        }

        .a_a_left_wrap {
            margin: 0 20px 0 0;
            width: 46.6%;

            @include bp_1050 {
                margin: 0 0px 0 0;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            h2.a_a_img_wrap {
                position: relative;
                display: flex;
                flex-direction: column;
                img {
                    width: 410px;
                    height: auto;
                }
                .h2_topic {
                    position: absolute;
                    bottom: -12px;
                    left: 10px;
                    font-size: $px-20;
                }
            }
            .a_a_text {
                margin: 40px 0 20px 0;
				font-size: $px-18;
				line-height: 2.0;
				letter-spacing: 0.14em;

            }
            .a_a_mark_wrap {
                display: flex;
                flex-direction: row;
				align-items: center;
                margin: 0 0 60px 0;

                .a_a_mark_icon {
                    margin: 0 25px 0 0;
					img{
						height: auto;
					}
					&:nth-child(1){
						width: 51px;
					}
					&:nth-child(2){
						width: 60px;
					}
					&:nth-child(3){
						width: 54px;
					}
					&:nth-child(4){
						width: 62px;
					}
					&:nth-child(5){
						width: 55px;
					}
                }
            }
            .btn_01 {
                &.common_btn_wrap {
                    .common_btn_inner {
						a{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        height: 73px;
                        width: 345px;
                        background-color: $c-white;
						border: 2px solid $c-main;
                        border-radius: 10px;
						filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
                        .common_text {
                            color: $c-main;
							font-size: $px-18;
							font-weight: 500;
							letter-spacing: 0.064em;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            background: url(../../assets/img/common/btn_redcircle_whitearrow.png) no-repeat center bottom;
                            background-size: contain;
                            width: 50px;
                            height: 47px;
                        }
							&:hover{
								background-color: $c-main;
								/*&::after {
									background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat center bottom;
									background-size: contain;
								}*/
								.common_text {
									color: $c-white;
								}
							}
						}
                    }
                }
            }
        }

        .a_a_right_wrap {
            width: 48.3%;
 
            &.pc{
				@include bp_1050 {
				display: none!important;                
            }
			}
			
			&.sp{
				 @include bp_1050 {
					 display: block!important;
					 width: 60%;
                	margin: 0 0 60px 0;
				}
				
			}

            .youtube_wrap {
                width: 100%;
                aspect-ratio: 16 / 9;

                iframe {
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
/* ------------------------------ */
/* Aboutus終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Value開始 */
/* ------------------------------ */
section.value_wrap {
    background: linear-gradient(180deg, rgba(102, 183, 255, 0.34), rgba(240, 250, 255, 0.34));
    display: flex;
    justify-content: center;
	padding: 85px 0 90px 0;
    .value_inner {
        max-width: $bp_1200;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        h2.common_ttl_wrap_01 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
			width: 485px;
            img {
                height: auto;
            }
            .common_ttl {
                font-size: $px-30;
                color:$c-grey;
                position: absolute;
                bottom: -20px;
				letter-spacing: 0.014em;
            }
        }

        .b_b_fukidashi {
            color: $c-white;
            font-size: 18px;
            margin: -59px auto 0px;
            position: relative;
            background: url(../../assets/img/top/value/core_to_more.png) no-repeat center bottom;
            background-size: contain;
            width: 470px;
            height: 144px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 5px;
            font-weight: 700;

            @include bp_1050(){
                width: 350px;
                height: 107px;
            }
        }

        .b_b_text {
            margin: 30px 0 60px 0;
            text-align: center;
			font-size: $px-16;
			line-height: 2.0;
			letter-spacing: 0.014em;
        }
        .b_b_icon_wrap {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .b_b_icon_parts {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: calc((100% - 120px)/3);

                &:last-child {
                    margin: 0 0px 0 0;
                }

                .b_b_img_wrap {
                    height: 166px;
                }
                .b_b_icon_ttl {
                    font-size: $px-22;
                    font-weight: 700;
                    text-align: center;
                    position: relative;
                    margin: 50px 0 30px 0;

                    &::after {
                        content: '';
                        width: 100%;
                        height: 11px;
                        display: inline-block;
                        background: linear-gradient(0deg, rgba(213, 152, 167, 1), rgba(213, 152, 167, 0));
                        position: absolute;
                        bottom: -1px;
                        left: 0;
                    }
					.txt{
						position: relative;
						z-index: 1;
					}
                }
                .b_b_icon_text {
                    text-align: center;
					font-size: $px-16;
					line-height: 1.6;
					letter-spacing: 0.01em;
                }
            }
        }
    }
}
/* ------------------------------ */
/* Value終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Service開始 */
/* ------------------------------ */

section.service_wrap {
    display: flex;
    justify-content: center;
	padding: 100px 0 140px 0;
    background: url(../../assets/img/top/bposervice/bposervice_back_img.png) no-repeat center bottom;
    background-size: cover;
    overflow: hidden;

    @include bp_1100(){
        background: unset;

        span {
            position: relative;
    
            &.gray_slash_01 {
                //グレーの斜めあしらい左上
                &::before {
                    content: '';
                    position: absolute;
                    left: -494px;
                    top: -606px;
                    background: url(../../assets/img/top/bposervice/bposervice_back_img_sp.png) no-repeat center bottom;
                    background-size: cover;
                    width: 800px;
                    height: 800px;
                    z-index: 0;
                }
            }
    
            &.gray_slash_02 {
                //グレーの斜めあしらい右下
                &::after {
                    content: '';
                    position: absolute;
                    right: 0px;
                    bottom: -748px;
                    background: url(../../assets/img/top/bposervice/bposervice_back_img_sp.png) no-repeat center bottom;
                    background-size: cover;
                    width: 800px;
                    height: 800px;
                    z-index: 0;
                }
            }
            
        }
    }
    .service_inner {
        max-width: $bp_1200;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .c_c_h2_wrap {
            display: flex;
            justify-content: flex-start;
            margin: 0 0 90px auto;
            position: relative;

            h2.common_ttl_wrap_02 {
                height: 76px;
                width: 734px;

                @include bp_1100(){
                    width: 100%;
                }
    
                .common_ttl {
                    text-align: left;
                    font-size: $px-30;
                    position: absolute;
                    left: 0;
                    bottom: -60px;

                    span {
                        color: $c-orange;
                    }
                }
            }
        }

        .bpo_top_wrap {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 90px;

            @include bp_1100(){
                justify-content: flex-start;
                width: 80%;
            }

            .bpo_01 {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;


                .bpo_top_text {
                    font-size: 16px;
                    line-height: 2em;
                    margin-bottom: 30px;
                }

                .orange_btn {
                    &.common_btn_wrap {
                        .common_btn_inner {
                            a{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            height: 73px;
                            width: 345px;
                            background-color: $c-white;
                            border: 2px solid $c-orange;
                            border-radius: 10px;
                            filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
                            .common_text {
                                color: $c-orange;
                                font-size: $px-18;
                                font-weight: 700;
                                letter-spacing: 0.064em;
                            }

                            &::after {
                                content: '';
                                position: absolute;
                                right: -2px;
                                bottom: -2px;
                                background: url(../../assets/img/top/bposervice/btn_orange.png) no-repeat center bottom;
                                background-size: contain;
                                width: 50px;
                                height: 47px;
                            }
                                &:hover{
                                    background-color: $c-orange;
                                    /*&::after {
                                        background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat center bottom;
                                        background-size: contain;
                                    }*/
                                    .common_text {
                                        color: $c-white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .bpo_02 {
                display: flex;
                align-items: flex-end;

                img {
                    width: 368px;
                    height: 235px;
                    margin-right: 50px;

                    @include bp_1100() {
                        display: none;
                    }
                }
            }
        }

        .bpo_middle_wrap {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            @include bp_1100(){
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
            }
            .m_box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 48%;
                padding: 54px 33px 40px 33px;
                border-radius: 10px;
                box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
                background-color: white;

                @include bp_1100(){
                    width: 80%;
                    margin-bottom: 30px;
                }

                &.blue {
                    border: 2px solid $c-blue;
                }
                &.pink {
                    border: 2px solid $c-pink;
                }
                &.green {
                    border: 2px solid $c-green;
                }
                &.transparent {
                    border: 2px solid transparent;
                }

                .red_ribbon_background {
                    background: url(../../assets/img/top/bposervice/top_bpo_service_red_ribbon.png) no-repeat center center;
                    background-size: contain;

                    text-align: center;
                    width: 80%;
                    height: auto;
                    margin: 0 auto;
                    padding: 10px 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        color: white;
                        font-size: 18px;
                        font-weight: 700;
                    }
                }
                .bpo_topic {
                    font-size: 22px;
                    font-weight: 700;
                    margin-top: 37px;
                    margin-bottom: 20px;
                    text-align: center;
                }

                img {
                    height: auto;
                    width: auto;
                    margin: 0 auto;
                }
                
                .m_text {
                    font-size: 16px;
                    margin-bottom: 20px;
                    margin-top: 23px;
                    line-height: 1.62;
                    letter-spacing: 1px;
                }

                .m_text_backpink {
                    background-color: #f4ebf1;
                    padding: 11px 19px;
                    margin-bottom: 20px;
                    min-height: 120px;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                

                    .backpink_ttl {
                        color: $c-main;
                        margin-bottom: 8px;
                        font-weight: 700;
                        font-size: 16px;
                        letter-spacing: 1px;
                    }
                    .backpink_text {
                        line-height: 1.62;
                        letter-spacing: 1px;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;

                        .text_wrap {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;

                            .text_c {
                                margin-right: 24px;
                            }
                        }
                    }
                }

                .common_btn_wrap {
                    width: 68%;
                    margin: 0 auto;
                }

                

                .common_text {
                    font-weight: 700;
                }

                
                .red_btn_plus { 
                    &.common_btn_wrap {
                        .common_btn_inner {
                            
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            height: 73px;
                            width: 100%;
                            background-color: $c-white;
                            border: 2px solid $c-main;
                            border-radius: 10px;
                            
                            .common_text {
                                color: $c-main;
                                font-size: $px-18;
                                
                                letter-spacing: 0.064em;
                            }

                            &::after {
                                content: '';
                                position: absolute;
                                right: -2px;
                                bottom: -2px;
                                background: url(../../assets/img/top/bposervice/btn_red_plus.png) no-repeat center bottom;
                                background-size: contain;
                                width: 50px;
                                height: 47px;
                            }
                                &:hover{
                                    background-color: $c-main;
                                    /*&::after {
                                        background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat center bottom;
                                        background-size: contain;
                                    }*/
                                    .common_text {
                                        color: $c-white;
                                    }
                                }
                            
                        }
                    }
                }
            }
            
        }

        .modal, .modal_2 {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
            z-index: 10;

            .modalClose, .modalClose_2 { 
                width: 80%;
                height: auto;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                @include bp_1100() {
                    width: 100%;
                }

                img {
                    width: 100%;
                    height: auto;
                    animation-name: modalopen;
                    animation-duration: 1s;
                    max-width: 1000px;
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    
                }
                @keyframes modalopen {
                    from {opacity: 0}
                    to {opacity: 1}
                }
            }
        }
        
    }
}


/* ------------------------------ */
/* Service終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Flow開始 */
/* ------------------------------ */
section.flow_wrap {
    background: linear-gradient(180deg, rgba(102, 183, 255, 0.34), rgba(240, 250, 255, 0.34));
    display: flex;
    justify-content: center;
	padding: 80px 0 95px 0;
	@include bp_1050 {
		padding: 80px 0 15px 0;
	}
	
    .flow_inner {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        h2.common_ttl_wrap_01 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;

            img {
                height: 105px;
                width: auto;
            }
            .common_ttl {
                font-size: $px-30;
                color:$c-grey;
                position: absolute;
                bottom: -20px;
                white-space: nowrap;
            }
        }

        .d_d_text {
            margin: 73px 0 60px 0;
            text-align: center;
        }

        .d_d_img_wrap {
			width: 100%;
        }
		.flow_sec{
			display: flex;
			flex-wrap:wrap;
			justify-content: space-between;
			width: 100%;
			 @include bp_1050 {
                flex-direction:column;
                justify-content: center;
            }
			.flow_box{
				width: calc((100% - 50px) / 6);
				position: relative;
				padding: 20px 0 25px 20px;
				box-sizing: border-box;
				 @include bp_1050 {
                width: 100%;
					 margin-bottom: 70px;
            }
				&::after{
					position: absolute;
					top:0;
					right:-30px;
					width:  30px;
					height: 100%;					
					content: "";
					z-index: 1;
					content: "";
					@include bp_1050 {
						top:inherit;
						right:inherit;
						bottom:-40px;
						left:0;
						width: 100%;
						height: 40px;
					}
				}
				&.flow01{
					background-color: #b5cfe5;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon01.png) no-repeat center 10px;
						background-size: 34px 22px;						
					}
					&::after{
						background: url(../img/top/flow/flow01_arrow_pc.png) no-repeat left top;
						background-size:cover; 
						@include bp_1050 {
							background: url(../img/top/flow/flow01_arrow_sp.png) no-repeat center bottom;
							background-size:cover; 
						}
					}
				}
				&.flow02{
					background-color: #a6c1d9;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon02.png) no-repeat center top;
						background-size: 45px 42px;
					}
					&::after{
						background: url(../img/top/flow/flow02_arrow_pc.png) no-repeat left top;
						background-size:cover; 
						@include bp_1050 {
							background: url(../img/top/flow/flow02_arrow_sp.png) no-repeat center bottom;
							background-size:cover; 
						}
					}
				}
				&.flow03{
					background-color: #95b2cc;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon03.png) no-repeat center 2px;
						background-size: 27px 38px;
					}
					&::after{
						background: url(../img/top/flow/flow03_arrow_pc.png) no-repeat left top;
						background-size:cover; 
						@include bp_1050 {
							background: url(../img/top/flow/flow03_arrow_sp.png) no-repeat center bottom;
							background-size:cover; 
						}
					}
				}
				&.flow04{
					background-color: #85a4c0;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon04.png) no-repeat center 1px;
						background-size: 37px 39px;						
					}
					&::after{
						background: url(../img/top/flow/flow04_arrow_pc.png) no-repeat left top;
						background-size:cover; 
						@include bp_1050 {
							background: url(../img/top/flow/flow04_arrow_sp.png) no-repeat center bottom;
							background-size:cover; 
						}
					}
				}
				&.flow05{					
					background-color: #6f90ad;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon05.png) no-repeat center 1px;
						background-size: 32px 39px;
					}
					&::after{						
						background: url(../img/top/flow/flow05_arrow_pc.png) no-repeat left top;
						background-size:cover; 
						@include bp_1050 {
							background: url(../img/top/flow/flow05_arrow_sp.png) no-repeat center bottom;
							background-size:cover; 
						}
					}
				}
				&.flow06{
					padding: 20px 15px 25px 20px;
					background-color: #5c80a0;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon06.png) no-repeat center 3px;
						background-size: 35px 35px;
						padding-right: 10px;
					}
					&::after{
						right: 0;
						content: "";
					}
				}
			}
			.flow_no{
				position: absolute;
				left:0;
				top: -0.5em;
				color:$c-main;
				font-size: $px-36;
				font-weight: 700;
				line-height: 1.0;
				@include bp_1050 {
					left: 50%;
					-webkit-transform: translate(-50%, 0);
 transform: translate(-50%, 0);
				}
			}
			.flow_ttl{
				color:#FFF;
				font-size: $px-16;
				font-weight: 700;
				text-align: center;
				padding-top: 52px;
				margin-bottom: 10px;
				padding-right: 20px;
			}
			.flow_txt{
				color:#FFF;
				font-size: $px-16;	
				line-height: 1.4;		
				@include bp_1050 {
					text-align: center;
				}
			}
		}
    }
}
/* ------------------------------ */
/* Flow終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Example開始 */
/* ------------------------------ */
section.example_wrap {
    display: flex;
    justify-content: center;
	padding: 100px 0 115px 0;
	@include bp_1050 {
		padding: 100px 0 35px 0;
	}
    .example_inner {
        .c_c_h2_wrap {
            display: flex;
            justify-content: flex-start;
            margin: 0 0 140px auto;

            h2.common_ttl_wrap_03 {
                display: flex;
                flex-direction: row;
                align-items: center;

                .common_ttl_inner_ttl {
                    height: 107px;
                    width: auto;
                    margin: 0 50px 0 0;
                    position: relative;
					letter-spacing: 0.014em;					
                    .common_ttl {
                        font-size: $px-30;
                        position: absolute;
                        bottom: -48px;
						line-height: 1.4;
                    }
                }
                .common_ttl_inner_img {
                    img {
                        height: 122px;
                        width: auto;
                    }
                }
            }

        }

        .e_e_wrap {
            display: flex;
            flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			
            @include bp_1050 {
                flex-direction:column;
                justify-content: center;
            }
			.icon{
				position: absolute;
				top:-45px;
				left:50%;
				margin-left: -60px;
				background-color: #fff;
				width: 120px;
				height: 120px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
                z-index: -1;

				img{
					height: auto;
				}
			}
            .e_e_box {
                width: calc((100% - 80px) / 3);
                background: #FFF;
				border-radius: 10px;
				position: relative;
				filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
				@include bp_1050 {
					width: 100%;
					margin-bottom: 80px;
				}
                .e_e_box_text_wrap {
                    padding: 40px 20px 20px 20px;					
                    .e_e_box_text_upper {
                        font-size: $px-20;
						letter-spacing: 0.01em;
						line-height: 1.6;
						margin-bottom: 10px;
						padding-bottom: 10px;
						border-bottom: 1px solid $c-main;
                        padding-top: 10px;
                        
                        span {
                            color: $c-main;
                            line-height: 2.2;
                            font-size: $px-16;
							font-weight: 500;
							letter-spacing: 0.01em;
                        }
                    }
                    .e_e_box_text_lower {
                        font-size: $px-16;
						letter-spacing: 0.01em;
						line-height: 1.8;
                    }
                }
            }
        }
    }
}
/* ------------------------------ */
/* Example終了 */
/* ------------------------------ */

/* ------------------------------ */
/* BPOサービス赤バナー開始 */
/* ------------------------------ */
section.red_banner {
    background-color: $c-main;
    display: flex;
    justify-content: center;
	overflow: hidden;
	padding: 60px 0;
    .red_banner_inner {
        margin: 0 auto;
        .f_f_wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: $c-white;

            @include bp_1050() {
                flex-direction: column;
            }
        

            .f_f_left {
                width: calc(100% - 500px);
				@include bp_1050() {
               width: 100%;
					text-align: center;
					margin-bottom: 30px;
            }
                .f_f_text_wrap {
                    
                    .f_f_text {

                        &.text_01 {
                            font-size: $px-36;
                            margin: 0 0 10px 0;
							font-weight: 700;
                        }
                        &.text_02 {
                            font-size: $px-36;
                            margin: 0 15px 33px 0;
							font-weight: 700;

                            span.fff {
                                position: relative;

                                &::after {
                                    content: '';
                                    width: 100%;
                                    height: 20px;
                                    display: inline-block;
                                    background: linear-gradient(0deg, rgba(213, 152, 167, 1), rgba(213, 152, 167, 0));
                                    position: absolute;
                                    bottom: 0px;
                                    left: 0;
                                }
								.txt{
									position: relative;
									z-index: 1;
								}
                            }
                            span.bbb {
                                font-size: $px-32;
                            }
                        }
                        &.text_03 {
                            font-size: $px-18;
                        }
                    }
                    
                }
            }
            .f_f_right {
                width: 500px;
				@include bp_1050() {
               width: 100%;
            }

                .f_f_right_wrap {
					position: relative;
					&::before{
						mix-blend-mode: multiply;
						background-color: rgba(0,0,0,0.07);
						content: "";
						width: 660px;
						height: 700px;
						left:50%;
						top:50%;
						position: absolute;
						margin-top: -350px;
						margin-left: -330px;
						border-radius: 50%;
						z-index: 0;
					}
                    background-size: cover;
                    background-position: right;
                    width: auto;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;

                    @include bp_1240 {
                        background: none;
                    }

                    .common_btn_wrap {
						margin: 0 0 30px 0;
                        a{
							filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $c-white;
						width: 500px;
						height: 110px;
						border-radius: 10px;						
						display: flex;
						align-items: center;
						justify-content: center;						
						transition: all 0.1s;   
							&::after {
									content: '';
									position: absolute;
									right: 0;
									bottom: -4px;
									background: url(../../assets/img/common/btn_redcircle_whitearrow.png) no-repeat center center;
									background-size: contain;
									width: 80px;
									height: 80px;
								}
								&:hover {		
									background-color: $c-main-dark;	
									.common_btn_text {
										color:#FFF;
									}
									&::after {
										content: '';
										position: absolute;
										right: -1px;
										bottom: -5px;
										background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat center center;
										background-size: contain;
										width: 80px;
										height: 80px;
									}
								}
                        }
						&.btn_02 {
                            position: relative;
							z-index: 2;						
								
							}  

                        .common_btn_inner {
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .common_btn_text {
                                font-size: $px-24;
								font-weight: 700;
								color: $c-main-dark;
                            }
                        }

                        &:hover {
                            .common_btn_inner {
                                color: $c-main-dark;
                            }
                        }
                    }
                    .f_f_right_lower_wrap {
                        display: flex;
                        flex-direction: row;
						position: relative;
						z-index: 2;
                        justify-content: space-between;
                        width: 100%;
                        
                        .f_f_right_lower_wrap_left {
                            .f_f_tel_text {
                                font-size: $px-22;
                                margin: 0 0 15px 0;
								font-weight: 500;
								letter-spacing: 0.14em;
                            }
                            .f_f_tel_wrap {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                margin: 0 0 15px 0;

                                img {
                                    width: 25px;
                                    height: 45px;
                                }
                                a {
                                    .f_f_tel {
                                        font-size: $px-32;
										font-weight: 700;
                                        margin-left: 10px;
										letter-spacing: 0.08em;
                                    }
                                }
                            }
                            .f_f_tel_time {
                                font-size: $px-16;
								letter-spacing: 0.14em;
								font-weight: 500;
                            }
                        }
                        .f_f_right_lower_wrap_right {
                            width: 160px;
                            height: 130px;
                        }
                    }
                }
            }
         
        }
    }
}
/* ------------------------------ */
/* BPOサービス赤バナー終了 */
/* ------------------------------ */

/* ------------------------------ */
/* News開始 */
/* ------------------------------ */
section.news_wrap {
    display: flex;
    justify-content: center;
    background-color: $c-beige;
	padding: 95px 0 100px 0;
    .news_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        max-width: 1200px;
        width: 100%;

        @include bp_1240(){
            width: calc(100% - 40px);
        }
        

        h2.common_ttl_wrap_04 {
            margin: 0 0 60px 0;

            .common_ttl_inner_img {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    height: 50px;
                    width: auto;
                }
                .h2_topic {
                    position: absolute;
                    bottom: -15px;
                    font-size: $px-20;
                }
            }
        }

        .g_g_box_wrap {
            width: 100%;

            .g_g_box {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                margin: 0 0 40px 0;
				padding: 0 0 40px 0;
				border-bottom: 1px solid #FFF;
                box-sizing: border-box;

                &:hover {
                    .g_g_box_left {
                        img {
                            border: 3px solid $c-main;
                        }
                    }
                }

                .g_g_box_left {
                    width: 20%;
                    max-width: 200px;
                    border-radius: 5px;
					filter: drop-shadow(0 3px 5px rgba(0,0,0,.08));
                    img {
                        border-radius: 5px;
                        height: 142px;
                        width: auto;
                    }
                }
                .g_g_box_right {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    width: 80%;
                    padding-left: 20px;

                    .g_g_box_date_cat_wrap {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        margin: 0 0 15px 0;
                        font-size: $px-16;

                        .g_g_box_date {
                            margin-right: 20px;
							letter-spacing: 0.01em;
                        }
                        .g_g_box_cat {
							letter-spacing: 0.01em;
                        }
                    }

                    .g_g_box_topic {
                        margin: 0 0 15px 0;
                        font-size: $px-22;
						letter-spacing: 0.01em;
						font-weight: 500;
                    }

                    .g_g_box_text {
                        font-size: $px-16;
						letter-spacing: 0.01em;
						line-height: 1.8;
                        span {
                            color: $c-main;
                        }
                    }
                }
            }
        }

        .btn_03 {
            &.common_btn_wrap {
				a{
                .common_btn_inner {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    height: 73px;
                    width: 345px;
                    background-color: $c-white;
                    border-radius: 10px;
                    border: 2px solid $c-main;
					filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
                    .common_btn_text {
                        color: $c-main;
						font-weight: 500;
						font-size: $px-18;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        right: 0;
                        bottom: -2px;
                        background: url(../../assets/img/common/btn_redcircle_whitearrow.png) no-repeat center center;
                        background-size: contain;
                        width: 50px;
                        height: 47px;
                    }

                    &:hover {
                        background-color: $c-main;
                        .common_btn_text {
                            color: $c-white;
                        }

                        /*&::after {
                            content: '';
                            position: absolute;
                            right: 0;
                            bottom: -2px;
                            background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat center center;
                            background-size: contain;
                            width: 50px;
                            height: 50px;
                        }*/
                    }
                }
            }
			}
        }
    }
}
/* ------------------------------ */
/* News終了 */
/* ------------------------------ */

/* ------------------------------ */
/* QandA開始 */
/* ------------------------------ */
section.qa_wrap {
    display: flex;
    justify-content: center;
    padding: 95px 0 40px 0;
    .qa_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
        width: 100%;

        h2.common_ttl_wrap_04 {
            margin: 0 0 60px 0;

            .common_ttl_inner_img {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    height: 50px;
                    width: auto;
                }
                .h2_topic {
                    position: absolute;
                    bottom: -12px;
                    font-size: $px-20;
                }
            }
        }

        .accordion_wrap {
            margin-bottom: 60px;
            width: 100%;
      
            a {
              color: $c-main;
              border-bottom: 1px solid red;
            }
      
            .s_02 .accordion_one {
            }
            .s_02 .accordion_one .accordion_header {
              color: $c-grey;
              font-size: $px-22;
              font-weight: 700;
              padding: 28px 10%;
              text-align: left;
              position: relative;
              z-index: +1;
              cursor: pointer;
              transition-duration: 0.2s;
              min-height: 78px;
              display: flex;
              align-items: center;
              border-bottom: 2px solid $c-grey-light2;
      
              &::before {
                position: absolute;
                content: '';
                background: url(../../assets/img/top/qa/qa_q.png) no-repeat;
                background-size: contain;
                transform: scale(0.3);
                position: absolute;
                top: 50%;
                left: 3%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                width: 42px;
                height: 42px;
              }
              
            }
            .s_02 .accordion_one .accordion_header .i_box {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              top: 50%;
              right: 3%;
              width: 40px;
              height: 40px;
              margin-top: -20px;
              box-sizing: border-box;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              transform-origin: center center;
              transition-duration: 0.2s;
            }
            .s_02 .accordion_one .accordion_header .i_box .one_i {
              display: block;
              width: 18px;
              height: 18px;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              transform-origin: center center;
              transition-duration: 0.2s;
              position: relative;
            }
            .s_02 .accordion_one .accordion_header.open .i_box {
              -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
            }
            .s_02 .accordion_one .accordion_header .i_box .one_i:before, .s_02 .accordion_one .accordion_header .i_box .one_i:after {
              display: flex;
              content: '';
              background-color: $c-main;
              border-radius: 10px;
              width: 18px;
              height: 4px;
              position: absolute;
              top: 7px;
              left: 0;
              -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
              transform-origin: center center;
            }
            .s_02 .accordion_one .accordion_header .i_box .one_i:before {
              width: 4px;
              height: 18px;
              top: 0;
              left: 7px;
            }
            .s_02 .accordion_one .accordion_header.open .i_box .one_i:before {
              content: none;
            }
            .s_02 .accordion_one .accordion_header.open .i_box .one_i:after {
              -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
            }
            .s_02 .accordion_one .accordion_inner {
              display: none;
              box-sizing: border-box;
              background-color: $c-beige;
            }
            .s_02 .accordion_one .accordion_inner .box_one {
              height: auto;
              position: relative;
              padding: 28px 0 28px 10%;
				font-size: $px-16;
				line-height: 1.8;
      
              &::before {
                position: absolute;
                content: '';
                background: url(../../assets/img/top/qa/qa_a.png) no-repeat;
                background-size: contain;
                transform: scale(0.3);
                position: absolute;
                top: 50%;
                left: 3%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                width: 42px;
                height: 42px;
              }
      
              .txt_a_ac {
                font-size: $px-16;
              }
            }
            .s_02 .accordion_one .accordion_inner p.txt_a_ac {
              margin: 0;
            }
            @media screen and (max-width: 1024px) {
              .s_02 .accordion_one .accordion_header {
                font-size: $px-16;
              }
              .s_02 .accordion_one .accordion_header .i_box {
                width: 30px;
                height: 30px;
                margin-top: -15px;
              }
            }
            @media screen and (max-width: 767px) {
              .s_02 .accordion_one .accordion_header {
                font-size: $px-16;
                text-align: left;
                padding: 15px 60px 15px 15px;
              }
            }
            
        }
    }
}
/* ------------------------------ */
/* QandA終了 */
/* ------------------------------ */

/* ------------------------------ */
/* フッター開始 */
/* ------------------------------ */
.footer {
    background-color: $c-grey;
    padding: 80px 0;
    color: $c-white;
    position: relative;
    z-index: 1;
    width: 100%;
      
    ul {
    padding: 0;
    list-style: none;
    }
    
    .footer_inner_wrap {

    .footer_inner_lower {
        display: flex;
        justify-content: flex-end;
		align-items: center;
        font-size: $px-12;
        color: $c-grey-footer;
		margin-top: 35px;
		.f_menu_b{
			margin-right: 55px;
            display: flex;
            flex-direction: row;

			li{
                &:first-child {
                    margin-right: 30px;
                }

				a{
					font-size: $px-14;
					color: #FFF;
					&:hover{
						color: $c-main;
					}
				}
			}
		}
		.copyright{
			font-size: 12px;
		}
    }
    
    }

    .left_wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .footer__logo {
        display: inline-block;
        margin-bottom: 2rem;

        img {
            width: 290px;
        }
    }
    .footer__address {
        font-size: $px-14;
        margin: 0 0 27px 0;
		color: $c-grey-footer;
		line-height: 1.6;
        span {
            font-weight: 700;
            font-size: $px-16;
            line-height: 2;
			color:#FFF;
        }
    }
    }

    .right_wrap {
    width: 50%;

    a {
        color: $c-grey-light1;
        text-decoration: none;

        &:hover {
            color: $c-main;
        }
    }

    .footer_menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        .f_menu_w {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 auto;
        }

        .f_menu_l {
            
            a {
                color: $c-white;
                display: block;
                padding: 20px 20px;
            }

            p {
                font-size: $px-18;
                position: relative;

                &:hover {
                    color: $c-main;
                }

                &::before {
                    content: 'ー';
                    position: absolute;
                    width: 10px;
                    height: 1px;
                    color: $c-main;
                    left: -25px;
                }
            }

            .footer__navi {
				margin-top: -10px;
				margin-bottom: 10px;
                li {
                    a {
                        color: $c-grey-footer;
						padding: 5px 20px;

                        &:hover {
                            color: $c-main;
                        }
                    }
                }
            }
        }

        .footer__navi-heading {
            font-weight: 500;
        }

        .footer__navi {
            li {
                margin: 5px;
            }
        }
    }

    .sns_wrap {
        display: flex;
        justify-content: flex-end;
        padding: 20px 25px;

        a {
            display: inline-block;
            width: 45px;

            &:not(:last-child) {
                margin-right: 16px;
            }
			&:hover{
				opacity: 0.7;
			}
        }
        }

    }
    
    @media (min-width: 768px) {
    .md-flex {
        display: flex;
    }
    
    .md-justify-between {
        justify-content: space-between;
    }
    
    }
      
}
/* ------------------------------ */
/* フッター終了 */
/* ------------------------------ */

/* ------------------------------ */
/* TOPへ戻るボタン開始 */
/* ------------------------------ */
#page_top {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: 88px;
    margin: 50px;
	a:hover img{
			opacity: 0.9;
		
		}
}
/* ------------------------------ */
/* TOPへ戻るボタン終了 */
/* ------------------------------ */