@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-10: 10px;
$px-12: 12px;
$px-14: 14px;
$px-15: 15px;
$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-40: 40px;
$px-42: 42px;
$px-46: 46px;
$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: 53px;
    margin-top: -53px;
}
body {
    font-size: 16px;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    color: $c-grey;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.common_inner{
	width: calc(100% - 40px);
	margin-left: auto;
	margin-right: auto;
}
/************ 共通css終了 ************/

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


/* ------------------------------ */
/* ヘッダー開始 */
/* ------------------------------ */
body {
	margin: 0;
}
.toppage_all {
    width: 100vw;
	min-height: 100vh;
	position: relative;
    max-width: 100vw;
    overflow: hidden;
}
.header02 {
    position: fixed;
    top: 0;
	background-color: $c-white;
	z-index: 10;
	height: 53px;
	display: flex;
	align-items: center;
    width: 100%;
    border-top: 3px solid $c-main;
    box-sizing: border-box;
    max-width: 100vw;

    .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;

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

                    img {
                        max-width: 167px;
                        width: 100%;
                        height: auto;
                    }
                }
            }
            .header_right_sp {
                display: flex;
                flex-direction: row;

                .contact {
                    width: 60px;
                    height: 50px;
                    background-color: $c-main;

                    a {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        width: 100%;
                        height: 100%;
                        

                        .box_pic {
                            display: flex;
                            justify-content: center;
							height: 65%;
    						align-items: center;
                        }

                        img {
                            height: auto;
                            width: 45%;
                            margin: 0 auto;
                        }

                        .box_text {
                            color: $c-white;
                            font-size: $px-10;
                            text-align: center;
                            height: 35%;
                            display: flex;
                            align-items: center;
                            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: 53px;
            z-index: 1;
            transform: translateX(100%);
            width: 100%;
            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: 40px auto;

                /*---SPメニューをスクロールさせる---*/
                width: 90%;
                max-width: 690px;
                min-width: 375px;
                height: 99%;
                //overflow: auto;
                -webkit-overflow-scrolling: touch;
				.nav__items.nav-items{
					padding: 0 20px;
				}
                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-16;
						font-weight: 500;
                    }

                    a {
                        padding: 10px;
                        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: 5px;
                            top: calc(50% - 4px);
                            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: $px-16;
                                padding: 10px;
                            }
                            ul.accordion-content {
                                display: none;
                                padding: 0 0 15px 0.5em;
                                color: $c-grey-light1;

                                li {
                                    a {
										position: relative;
                                        display: flex;
                                        justify-content: flex-start;
										font-size: $px-14;
										font-weight: 500;
										&::after {
                                        border-right: solid 2px #ac1e40;
                                        border-top: solid 2px #ac1e40;
                                        content: "";
                                        display: block;
                                        height: 8px;
                                        position: absolute;
                                        right: 14px;
                                        top: 38%;
                                        transform: rotate(45deg);
                                        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
                                        width: 8px;
                                    }
                                    }
                                }
                            }
                            /* 矢印 */
                            .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: 5px;
											width: 3px;
											height: 17px;
											top: 5px;
                                        }
                                        &::after {
                                            transform: rotate(90deg);
                                            width: 1px;
                                            top: 5px;
                                            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 20px;
                    }

                    img {
                        width: 41px;
                    }
                }
                .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-28;
							letter-spacing: 0.02em;
                            width: 80%;
                            height: 35px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: 700;
                        }
                    }
                    .tel_lower_sp {
                        font-size: $px-14;
						letter-spacing: 0.06em;
						margin-top: 3px;
                    }
                }
				.contact_sp{
					display: flex;
					justify-content: center;
					margin-bottom: 20px;
					a{
						font-size: 17px;
						font-weight: 700;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 50px;
						max-width: 320px;
						width: calc(100% - 40px);
						color:$c-white;
						background-color: $c-main;
						border-radius: 10px;
					}
					
				}
            }

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

    .box_pic {
        height: 65%;
    }

    .box_text {
        color: $c-main;
        font-size: $px-10;
		font-weight: 700;
        height: 35%;
        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: 50px;
    height:100%;
    border: none;
    z-index: 10;
    transition: all .5s 0s ease;
    top: 1px;
    padding: 4px 4px 2px 4px;
    padding-inline: 0px;
}
/* ハンバーガーメニューの線 */
.hamburger span {
    width: 55%;
    height: 3px;
    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: 5px 0;
    //left: 11px;
    left: 50%;
}

.hamburger span:nth-child(3) {
    top: 0;
    //left:8px;
    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;
    }
}
/*==================== ハンバーガーメニュー終了 ====================*/


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


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

    &.fv {
        min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
        min-height: calc(var(--vh, 1vh) * 100);
        height: calc(var(--vh, 1vh) * 100);
        padding-top: 53px;
        box-sizing: border-box;
      }

	.mainview_catch{

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

		position: absolute;
		left:50%;
		top:50%;
		-webkit-transform: translate(-50%, -50%);
 		transform: translate(-50%, -50%);
		z-index: 2;
		//background-color: rgba(255,255,255,0.95);
		//border-radius: 10px;
		text-align: center;
		box-sizing: border-box;
		padding: 10px 10px;		
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.1));
		width: 95%;
		max-width: 360px;
        border: 5px solid #fff;

		&_01{
			font-size: $px-28;
			color: $c-main;
			font-style: italic;
			font-weight: 700;
			letter-spacing: 0.05em;
			line-height: 1.2;
			margin-bottom: 10px;

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

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

            &::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{
			position: absolute;
			bottom: 80px;
			left:50%;
			-webkit-transform: translate(-50%, 0);
			 transform: translate(-50%, 0);
			a{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 50px;
			width: 240px;
			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-16;
				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: 45px;
				height: 33px;
			}
			&: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-14;
		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%;
	}
}
/*
右から左へ
----------------------------*/
@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 {
    height: 100%;
}

.d-demo__wrap {
  display: flex;
  overflow: hidden;
  //height: 145px;
  height: calc(100% / 3);
}

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

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

.d-demo__item {
    //height: 145px;
	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開始 */
/* ------------------------------ */
.aboutus_wrap {
    display: flex;
    justify-content: center;
    background-color: $c-white;
padding: 60px 0;
    .aboutus_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        box-sizing: border-box;

        .a_a_left_wrap {
            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;
                align-items: center;
                img {
                    width: 410px;
                    height: auto;
                }
                .h2_topic {
                    position: absolute;
                    bottom: -12px;
                    font-size: $px-20;
                }
            }
            .a_a_text {
                margin: 20px 0 25px 0;
				font-size: $px-16;
				line-height: 1.8;
            }
            .a_a_mark_wrap {
                display: flex;
				justify-content: space-between;
				align-items: center;
                flex-direction: row;
                margin: 0 auto 40px auto;
				width: 80%;
                .a_a_mark_icon {
                    width: 18%;
					display: flex;
					justify-content: center;
                    img {
                        height: auto;
                    }
                }
            }
            .btn_01 {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
                &.common_btn_wrap {
                    .common_btn_inner {
						a{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        height: 60px;
                        width: 100%;
                        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-15;
							font-weight: 500;
							letter-spacing: 0.064em;
							font-weight: 700;
                        }

                        &::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: 40px;
                            height: 39px;
                        }
							&: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: 100%;
			margin-bottom: 30px;

            .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: 60px 0 10px 0;
    .value_inner {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;        
        box-sizing: border-box;

        h2.common_ttl_wrap_01 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
			img{
				    max-width: 250px;
			}

            .common_ttl {
                font-size: $px-20;
                color:$c-grey;
                position: absolute;
                bottom: -20px;
            }
        }

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

        .b_b_text {
            margin: 30px 0 30px 0;
			font-size: $px-16;
			line-height: 1.8;
        }
        .b_b_icon_wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-width: $bp_400;

            .b_b_icon_parts {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin: 0 0px 50px 0;

                .b_b_img_wrap {
                    height: 166px;
                }
                .b_b_icon_ttl {
                    font-size: $px-22;
                    font-weight: 700;
                    text-align: center;
                    position: relative;
                    margin: 23px 0 20px 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: 0px;
                        left: 0;
                    }
					.txt{
						position: relative;
						z-index: 1;
					}
                }
                .b_b_icon_text {
                    text-align: center;
                    max-width: 360px;
                }
            }
        }
    }
}
/* ------------------------------ */
/* Value終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Service開始 */
/* ------------------------------ */
section.service_wrap {
    display: flex;
    justify-content: center;
	padding: 80px 0;
    //background: url(../../assets/img/top/bposervice/bposervice_back_img_sp.png) no-repeat center bottom;
    //background-size: cover;
    overflow: hidden;

    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;
        position: relative;
        z-index: 1;

        

        .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;

                    @include bp_580(){
                        font-size: $px-24;
                    }

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

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

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

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

                h2 {
                    img {
                        width: 100%;
                        height: auto;
                    }
                    .common_ttl {
                        font-size: 20px;
                        bottom: -35px;
                    }
                }

                .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;
                        width: 350px;
                        height: 220px;
                    }
                }
            }
        }

        .bpo_middle_wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            
            .m_box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                padding: 40px 20px 40px 20px;
                border-radius: 10px;
                box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
                background-color: white;
                margin-bottom: 30px;


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

                &.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: 100%;
                    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: 5px;
                    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;
                        line-height: 1.3;
                    }
                    .backpink_text {
                        line-height: 1.62;
                        letter-spacing: 1px;
                    }
                }

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


                .common_text {
                    font-weight: 700;
                }

                
                .red_btn_plus {
                    &.common_btn_wrap {
                        width: 100%;

                        .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: #ac1e40;
                                font-size: 16px;
                                line-height: 1.2;
                                letter-spacing: 0.064em;
                                text-align: center;
                            }

                            &::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;

                                .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: 100%;
                height: auto;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                

                img {
                    width: 100%;
                    height: auto;
                    animation-name: modalopen;
                    animation-duration: 1s;
                    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: 60px 0 0 0;
    .flow_inner {
		h2.common_ttl_wrap_01 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;

            img {
                max-width: 205px;
				height: auto;
            }
            .common_ttl {
                font-size: $px-20;
                color:$c-grey;
                position: relative;
                top: -10px;
                white-space: nowrap;
            }
        }

        .d_d_text {
            margin: 15px 0 40px 0;
            text-align: center;
        }

        .d_d_img_wrap {
			width: 100%;
        }
		.flow_sec{
			width: 100%;
			.flow_box{
				width: 100%;
				position: relative;
				padding: 30px 15px 25px 15px;
				box-sizing: border-box;
				text-align: center;
				margin-bottom: 60px;
				&::after{
					position: absolute;
					left:0;
					bottom: -40px;
					width:  100%;
					height: 40px;					
					content: "";
					z-index: 1;
					content: "";
				}
				&.flow01{
					background-color: #b5cfe5;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon01.png) no-repeat center 10px;
						background-size: 53px 35px;
					}
					&::after{
						background: url(../img/top/flow/flow01_arrow_sp.png) no-repeat center top;
						background-size:cover; 
					}
				}
				&.flow02{
					background-color: #a6c1d9;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon02.png) no-repeat center top;
						background-size: 50px 41px;
					}
					&::after{
						background: url(../img/top/flow/flow02_arrow_sp.png) no-repeat center top;
						background-size:cover; 
					}
				}
				&.flow03{
					background-color: #95b2cc;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon03.png) no-repeat center 2px;
						background-size: 32px 45px;
					}
					&::after{
						background: url(../img/top/flow/flow03_arrow_sp.png) no-repeat center top;
						background-size:cover; 
					}
				}
				&.flow04{
					background-color: #85a4c0;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon04.png) no-repeat center 1px;
						background-size: 43px 46px;
					}
					&::after{
						background: url(../img/top/flow/flow04_arrow_sp.png) no-repeat center top;
						background-size:cover; 
					}
				}
				&.flow05{
					background-color: #6f90ad;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon05.png) no-repeat center 1px;
						background-size: 38px 46px;
					}
					&::after{
						background: url(../img/top/flow/flow05_arrow_sp.png) no-repeat center top;
						background-size:cover; 
					}
				}
				&.flow06{
					background-color: #5c80a0;
					.flow_ttl{
						background: url(../img/top/flow/flow_icon06.png) no-repeat center 3px;
						background-size: 46px 46px;
					}
					&::after{
						content: "";
					}
				}
			}
			.flow_no{
				position: absolute;
				left:50%;
				top: -0.5em;
				color:$c-main;
				font-weight: 700;
				line-height: 1.0;
				font-size: 38px;
				-webkit-transform: translate(-50%, 0);
 				transform: translate(-50%, 0);
			}
			.flow_ttl{
				color:#FFF;
				font-size: $px-16;
				font-weight: 700;
				padding-top: 52px;
				margin-bottom: 10px;
			}
			.flow_txt{
				color:#FFF;
				font-size: $px-16;	
				line-height: 1.4;				
			}
		}
    }
}
/* ------------------------------ */
/* Flow終了 */
/* ------------------------------ */

/* ------------------------------ */
/* Example開始 */
/* ------------------------------ */
section.example_wrap {
    display: flex;
    justify-content: center;
	padding: 60px 0 0 0;
    .example_inner {
        .c_c_h2_wrap {
			margin-bottom: 35px;
            h2.common_ttl_wrap_03 {
                display: flex;
                flex-direction: row;
                align-items: center;
				background: url(../img/top/example/example_icon_01.png) no-repeat right 30px;
				background-size: 100px 96px;
                .common_ttl_inner_ttl {
                    margin: 0 50px 0 0;
                    position: relative;
					letter-spacing: 0.014em;	
					img{
						max-width: 315px;
						height: auto;
					}
                    .common_ttl {
                            font-size: 20px;
    position: relative;
    top: -18px;
    line-height: 1.4;
						margin-right: 80px;
                    }
                }
                .common_ttl_inner_img {
                    display: none;
                }
            }

        }

        .e_e_wrap {
			.icon{
				position: absolute;
				top:-30px;
				left:50%;
				margin-left: -50px;
				background-color: #fff;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
                z-index: -1;
                
				img{
					height: auto;
					max-width: 48px;
				}
			}
            .e_e_box {
                background: #FFF;
				border-radius: 10px;
				position: relative;
				filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
				margin-bottom: 60px;

                .e_e_box_text_wrap {
                    padding: 45px 20px 20px 20px;					
                    .e_e_box_text_upper {
                        font-size: 17px;
						letter-spacing: 0.01em;
						line-height: 1.6;
						margin-bottom: 10px;
						padding-bottom: 10px;
						border-bottom: 1px solid $c-main;
                        span {
                            color: $c-main;
                            font-size: $px-15;
							font-weight: 500;
							letter-spacing: 0.01em;
                        }
                    }
                    .e_e_box_text_lower {
                        font-size: $px-15;
						letter-spacing: 0.01em;
						line-height: 1.8;
                    }
                }
            }
        }
    }
}
/* ------------------------------ */
/* Example終了 */
/* ------------------------------ */

/* ------------------------------ */
/* BPOサービス赤バナー開始 */
/* ------------------------------ */
section.red_banner {
    background-color: $c-main;
    display: flex;
    justify-content: center;
	padding: 40px 0;
	position: relative;
	overflow: hidden;
	&::after{
		mix-blend-mode: multiply;
		background-color: rgba(0, 0, 0, 0.07);
		content: "";
		width: 140%;
		height: 140%;
		left: 50%;
		top: 30%;
		position: absolute;
		-webkit-transform: translate(-50%, 0);
 		transform: translate(-50%, 0);
		border-radius: 50%;
		z-index: 0;
	}	    
    .red_banner_inner {
		position: relative;
		z-index: 2;

        .f_f_wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $c-white;
        

            .f_f_left {
                
                .f_f_text_wrap {
					text-align: center;
                    font-weight: 700;
                    .f_f_text {

                        &.text_01 {
                            font-size: $px-20;
							letter-spacing: 0.06em;
                        }
                        &.text_02 {
                            font-size: $px-22;
                            margin: 0 0 15px 0;
							

                            span.fff {
                                position: relative;

                                &::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: 2;
								}
                            }
                            span.bbb {
                                font-size: $px-20;
                            }
                        }
                        &.text_03 {
                            font-size: $px-14;
							letter-spacing: 0.14em;
                        }
                    }
                    
                }
            }
            .f_f_right {
                width: 100%;

                .f_f_right_wrap {
                    width: 100%;
                    .common_btn_wrap {
                        width: 100%;
                        height: 65px;
                        border-radius: 10px;
                        background-color: $c-white;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 30px 0 30px 0;
                        transition: all 0.1s;
						filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
                        &.btn_02 {
                            position: relative;
                            margin: 35px auto 30px auto;

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

                                &::after {
                                    background: url(../../assets/img/common/btn_whitecircle_redarrow.png) no-repeat right bottom;
                                    background-size: contain;
                                }
								.common_btn_text {
									color: $c-white;
								}
                            }
                        }

                        .common_btn_inner {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .common_btn_text {
                                font-size: 17px;
								font-weight: 700;
								letter-spacing: 0.06em;
								color: $c-main-dark;
                            }
                        }
                    }
                    .f_f_right_lower_wrap {
                        display: flex;
						justify-content: center;
						
                        .f_f_right_lower_wrap_left {
							margin-right: 10px;
                            .f_f_tel_text {
                                font-size: $px-15;
								white-space: nowrap;
								line-height: 1.0;
								margin-bottom: 5px;
								letter-spacing: 0.06em;
                            }
                            .f_f_tel_wrap {
                                display: flex;
                                align-items: center;

                                img {
                                    width: 13px;
                                    height: auto;
                                }
                                a {
                                    .f_f_tel {
                                        font-size: $px-24;
                                        margin-left: 5px;
										font-weight: 700;
										letter-spacing: 0.06em;
										line-height: 1.0;
                                    }
                                }
                            }
                            .f_f_tel_time {
                                font-size: $px-12;
								white-space: nowrap;
								letter-spacing: 0.06em;
								margin-top: 5px;
                            }
                        }
                        .f_f_right_lower_wrap_right {
                            width: 98px;
                            height: auto;
							img{
								height: auto;
							}
                        }
                    }
                }
            }
         
        }
    }
}
/* ------------------------------ */
/* BPOサービス赤バナー終了 */
/* ------------------------------ */

/* ------------------------------ */
/* News開始 */
/* ------------------------------ */
section.news_wrap {
    display: flex;
    justify-content: center;
    background-color: $c-beige;
	padding: 60px 0;
    .news_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        max-width: 768px;
        width: calc(100% - 40px);

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

            img {
                max-width: 160px;
				height: auto;
            }
        }
        h2.common_ttl_wrap_04 {
            margin: 0 0 30px 0;

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

                img {
                    height: auto;
                    max-width: 160px;
                }
                .h2_topic {
                    position: absolute;
                    bottom: -15px;
                    font-size: $px-16;
                }
            }
        }

        .g_g_box_wrap {
            .g_g_box {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                padding-bottom: 20px;
				margin-bottom: 20px;
				border-bottom: 1px solid #FFF;
				filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.08));
                &:hover {
                    .g_g_box_left {
                        img {
                            border: 3px solid $c-main;
                        }
                    }
                }

                .g_g_box_left {
                    width: 30%;
                    border-radius: 5px;

                    img {
                        border-radius: 5px;
                        display: flex;
                        justify-content: center;
                        width: 100%;
						height: auto;
                    }
                }
                .g_g_box_right {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    width: 70%;
                    padding-left: 15px;
					box-sizing: border-box;

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

                        .g_g_box_date {
                            margin-right: 10px;
                        }
                    }

                    .g_g_box_topic {
                        margin: 0 0 10px 0;
                        font-size: 17px;
                    }

                    .g_g_box_text {
                        font-size: $px-15;

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

        .btn_03 {
            &.common_btn_wrap {
                width: 90%;
				margin-left: auto;
				margin-right: auto;
                .common_btn_inner {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    height: 60px;
                    width: 100%;
                    background-color: $c-white;
                    border-radius: 10px;
                    border: 2px solid $c-main;

                    .common_btn_text {
                        color: $c-main;
						font-weight: 700;
                    }

                    &::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: 40px;
                            height: 39px;
                    }

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

                        .common_btn_text {
                            color: $c-white;
							
							font-size: $px-15;
                        }

                        &::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: 40px;
                            height: 39px;
                        }
                    }
                }
            }
        }
    }
}
/* ------------------------------ */
/* News終了 */
/* ------------------------------ */

/* ------------------------------ */
/* QandA開始 */
/* ------------------------------ */
section.qa_wrap {
    display: flex;
    justify-content: center;
    padding: 60px 0;
    .qa_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;

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

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

                img {
                    max-width: 140px;
                    height: auto;
                }
                .h2_topic {
                    position: absolute;
                    bottom: -12px;
                    font-size: $px-16;
                }
            }
        }

        .accordion_wrap {
            width: 100%;
      
            a {
              color: $c-main;
              border-bottom: 1px solid red;
            }
            .s_02 .accordion_one .accordion_header {
              color: $c-grey;
              font-size: $px-16;
              font-weight: 700;
    padding: 10px 40px 10px 65px;
              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: 2%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                width: 40px;
                height: 40px;
              }
              
            }
            .s_02 .accordion_one .accordion_header .i_box {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              top: 50%;
              right: 0;
              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: 10px 40px 10px 65px;
      
              &::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: 2%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                width:40px;
                height: 40px;
              }
      
              .txt_a_ac {
                font-size: $px-15;
				  line-height: 1.6;
              }
            }
            .s_02 .accordion_one .accordion_inner p.txt_a_ac {
              margin: 0;
            }
            
        }
    }
}
/* ------------------------------ */
/* QandA終了 */
/* ------------------------------ */

/* ------------------------------ */
/* フッター開始 */
/* ------------------------------ */
.footer {
    background-color: $c-grey;
    padding: 40px 0px;
    box-sizing: border-box;
    color: $c-white;
    position: relative;
    z-index: 1;
    width: 100%;
      
      ul {
        padding: 0;
        list-style: none;
      }
      
      .footer_inner_wrap {
        max-width: 98%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .footer_inner_upper {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .footer_inner_lower {
            display: flex;
            justify-content: center;
            font-size: $px-12;
            color: $c-grey-footer;
        }
        
      }

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

        .footer__logo {
            display: inline-block;
            margin-bottom: 20px;
			width: 240px;
			margin-left: auto;
			margin-right: auto;
            img {
                    width: 240px;
    height: auto;
            }
        }
        .footer__address {
            font-size: $px-14;
            margin: 0 0 15px 0;

            span {
                font-weight: 700;
                font-size: $px-16;
                line-height: 2;
            }
        }
      }

      .right_wrap {
        width: 100%;

        a {
            color: $c-grey-light1;
            text-decoration: none;
    
            &:hover {
                color: $c-main;
            }
        }

        .footer_menu {
            display: none;
        }
		  

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

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

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

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

/* ------------------------------ */
/* TOPへ戻るボタン開始 */
/* ------------------------------ */
#page_top {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: 40px;
    height: 40px;
    margin: 20px;

    img {
        max-width: 120%;
    }
	a:hover img{
			opacity: 0.9;
		
		}
}
/* ------------------------------ */
/* TOPへ戻るボタン終了 */
/* ------------------------------ */