@charset "utf-8";

/*----- フォント設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stardos+Stencil&display=swap');


*{
	box-sizing: border-box;
	line-height: 1.333;
	word-wrap: break-word;
}
html{
	font-size: 62.5%;
    overflow:auto;
}
body{
	min-width: 100%;
	font-size: 1.6em;
	font-weight: 400;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    background: #d1dde6;
    color: #231815;
    overflow-x: hidden;
    position: relative;
}

img{
	height: auto;
	vertical-align: bottom;
}
a{
	transition: .3s all ease;
}
a:hover{
    opacity: 0.7;
    transition: .3s all ease;
}
small{
    margin-top: 20px;
    font-size: 1.2rem;
    line-height: 1.833;
    letter-spacing: 0.02rem;
    font-feature-settings: "palt";
    text-align: left;
    display: block;
}



/*----- 共通パーツ */

.basewidth{
	max-width: 1230px;
	padding-left: 25px;
	padding-right: 25px;
	margin-left: auto;
	margin-right: auto;
    text-align: center;
}
.inner__wrapper{
    max-width: 1050px;
    padding-left: 25px;
	padding-right: 25px;
    margin-left: auto;
	margin-right: auto;
}
.flex-content{
    display: flex;
}
.flex-content-reverse{
    flex-direction: row-reverse;
}
.title{
    text-align: center;
    display: block;
    font-size: clamp(2.4rem, 5vw, 5.1rem);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.11rem;
    color: #002896;
}
.title::before{
    content:attr(data-title);
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.subtitle{
    margin-bottom: 20px;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    line-height: 1.5666;
    letter-spacing: 0.01rem;
    color: #002896;
    text-align: left;
}
.title + .description{
    margin-top: 35px;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.02rem;

}
.textBlock p{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.95;
    font-feature-settings: "palt";
    letter-spacing: 0.01rem;
    text-align: justify;
}
.reason__cnt{
    padding-bottom: 128px;
}
.reason__cnt .flex-content .imgBlock{
    margin-top: 30px;
    min-width: 50%;
}
.reason__cnt .flex-content .textBlock p{
    font-feature-settings: "palt";
    letter-spacing: 0.01rem;
}
.btn-contact{
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}
.btn-contact img{
    width: 200px;
}


.pc_none{
    display: none;
}
.pc_only{
    display: inline-block;
}
.tb_block{
    display: none;
}
.tb_none{
    display: inline-block;
}
.tb_only{
    display: none;
}
.sp_none{
    display: inline-block;
}
.sp_only{
    display: none;
}


/*----- 色・装飾 設定 */
.gradient {
    background: linear-gradient(90deg, #036eaa, #71d4b9);
}
/* .markerUnder{
    color:#002896
}
.markerUnder span{
    background: linear-gradient(transparent 50%, #ffe200 0%);
    display: inline;
    padding-right: 1rem;
} */
.c-ff0079{
    color: #ff0079;
    font-weight: bold;
}
/*-------------------------------
	ヘッダー
-------------------------------*/
header{
    position: fixed;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: rgba(209,221,230,0.8);
    z-index: 10;
}
header .basewidth{
    padding-right: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.header__logo img{
    width: 325px;
    height: 60px;
}
.header__nav,
.nav__list,
.nav__item,
.nav__item a{
    display: flex;
    align-items: center;
    height: 100%;
}
.header__nav .header__logo{
    display: none;
}
.nav__item a{
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
    position: relative;
}
header .nav__list .nav__item:last-of-type a{
    padding-left: 30px;
    padding-right: 30px;
    background-color: #f4e215;
}

@media screen and (max-width:959px) , print{
/*----- ナビ　ハンバーガーメニュー */

#g-nav{
    padding-top: 15px;
    position:fixed;
    z-index: 999;
    top:-120%;
    left:0;
    width:100vw;
    background:#fff;
    transition: all 0.6s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    margin-top: 10px;
    width: 100%;
    flex-direction: column;
    background: linear-gradient(90deg, #036eaa, #71d4b9);
    position: relative;
}
#g-nav ul::before {
    content: "";
    background: url(../img/bg_nav.svg) no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translateY(-35%);
}

#g-nav li{
    width: 100%;
    height: 100%;
    justify-content: center;


}

#g-nav li a{
    justify-content: center;
    display: flex;
    align-items: center;
    color: #fff;
    height: auto;
    text-decoration: underline;
    text-underline-offset: 10px;
    font-size: 2rem;
}

.header__logo{
    text-align: left;
}
.header__logo img {
    width: auto;
    height: 40px;
}

.header__nav .header__logo{
    text-align: left;
    display: block;
    margin-right: auto;
    padding-left: 15px;
}
header .nav__list .nav__item:last-of-type a {
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    height: 100%!important;
    color: #000!important;
    text-decoration: none!important;
}
/*========= ボタンのためのCSS ===============*/
.openbtn1{
    position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
    right: 10px;
    cursor: pointer;
    width: 50px;
    height:50px;
}

/*×に変化*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 15px;
    height: 2px;
    background-color: #000;
    width: 45%;
}

.openbtn1 span:nth-of-type(1) {
    top:20px;
}

.openbtn1 span:nth-of-type(2) {
    top:30px;
}


.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

}

/*-------------------------------
	top
-------------------------------*/

.top{
    padding-top: 80px;
    position: relative;
}
.top:before{
    content: "";
    width: 100%;
    height: 668px;
    background: url(../img/bg_mainvisual.jpg) repeat-x;
    background-position: 0 0;
    animation: bgroop 150s linear infinite;
    position: absolute;
    top: 80px;
    z-index: -1;
    opacity: 0.8;
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1408px 0;
    }
}
.top .basewidth{
    text-align: center;
}

.mainvisual .main__image{
    margin-top: 100px;
    margin-bottom: 40px;
    width: 656px;
    height: 445px;
}
.mainvisual .sub__image{
    width: 684px;
    height: 165px;
}
.top h2{
    position: relative;
    display: inline-block
}
.top h2:after{
    content: "";
    background: url(../img/icon_mouse.svg) no-repeat center;
    width: 100px;
    height: 113px;
    position: absolute;
    top: 30px;
    right: -150px;
}

/*-------------------------------
	infomation__contents
-------------------------------*/

.infomation__contents{
    margin-top: 30px;
}
.infomation__contents .flex-content{
    flex-wrap: wrap;
}
.infomation__contents .content{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    min-width: 480px;
    height: 100%;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.infomation__contents .content__inner{
    width: 100%;
    background: #FFF;
    padding: 25px 25px 30px;
    border-radius: 5px;
}
.infomation__contents .content h3{
    margin-bottom: 20px;
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 0.12rem;
    color: #002896;
}
.infomation__contents .content p{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
}

/*-------------------------------
	motive
-------------------------------*/


.motive{
    margin-top: 90px;
    text-align: left;
}
.motive .inner__wrapper{
    position: relative;
}
.motive .inner__wrapper::before{
    content: "";
    width: 1478px;
    height: 616px;
    border-radius: 300px;
    background-color: #fff;
    position: absolute;
    top: -40px;
    right: -65px;
    z-index: -1;
}
.motive .flex-content{
    justify-content: center;
}
.motive .imgBlock{
    margin-right: 60px;
}
.motive .imgBlock_sp{
    display: none;
}
.motive .imgBlock figure{
    margin-left: -15px;
    margin-bottom: 20px;
}
.motive .imgBlock img{
    width: 370px;
    height: 370px;
}
.motive .description{
    margin-top: 30px;
    margin-left: 10rem;
    font-size: 1.35rem;
    line-height: 1.6;
    letter-spacing: 0.02rem;
    text-align: left;
    color: #696969;
}
.motive .description span{
    display: inline-block;
    margin-left: -1rem;
}
.motive .textBlock{
    margin-top: 30px;
}
.motive .textBlock h3 span{
    background: linear-gradient(transparent 50%, #ffe200 0%);
    display: inline;
    padding-right: 1rem;
    font-weight: bold;
}
.motive .textBlock p{
    font-feature-settings:initial;
    letter-spacing: -0.05rem;
    width: 400px;
    text-align: justify;
}
.motive .textBlock p:first-of-type{
    margin-bottom: 1.6rem;
}

/*-------------------------------
	recommend
-------------------------------*/

.recommend{
    margin-top: 430px;
}
.recommend h3{
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.52;
    letter-spacing: 0.07rem;
    color: #002896;
    position: relative;
}
.recommend h3::before{
    content: "";
    background: url(../img/recommend01.svg) no-repeat center;
    width: 848px;
    height: 283px;
    position: absolute;
    top: -270px;
    left: 50%;
    transform: translateX(-50%);
}

/* reasonBlock ***********/
.reasonBlock{
    padding-top: 80px;
}
.reasonBlock .lead{
    margin-bottom: 125px;
}
.reasonBlock .lead h3{
    margin-bottom: 35px;
}
.reasonBlock .lead h3 img{
    width: 520px;
    height: 145px;
}
.reasonBlock .lead figure ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.reasonBlock .lead figure ul li{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
}
.reasonBlock .lead figure img{
    width: 260px;
    height: 227px;
}

.reasonBlock .titleBlock{
    margin-bottom: 70px;
}

.reasonBlock .title::before{
    width: 342px;
    height: 100px;
}

/* reason01 魅力溢れる多くの実績 *********/

.reason01 .title::before{
    background: url(../img/reason-num01.svg) no-repeat center;
}

.reason01{
    position: relative;
    z-index: 1;
}
.reason01 .gradient{

    margin: 0 calc(50% - 50vw);
    width: 100vw;
    position: relative;
    z-index: -2;
    background: linear-gradient(-90deg, #036eaa, #71d4b9);
}
.reason01 .gradient::before{
    content: "";
    background-position: center top;
    width: 100vw;
    height: 460px;
    display: block;
    position: absolute;
    top: 0%;
    z-index: -1;
}
.reason01 .achievement-hp::before{
    background-image: url(../img/bg_site.jpg);
}
.reason01 .achievement-movie::before{
    background-image: url(../img/bg_movie.jpg);
}
.reason01 .achievement > h3{
    padding-top: 42px;
    margin-bottom: 30px;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.03rem;
    color: #fff;
}
.reason01 .achievement > h3 strong{
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 0.03rem;
}
.reason01 .achievement{
    padding-bottom: 90px;
}
.reason01 .achievement .slider h4{
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.04rem;
    color: #fff;
}
.reason01 .achievement .slider h4 > small{
    font-size: 2rem;
    font-weight: bold;
    display: inline-block;
}
.reason01 .achievement .slider p{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: -0.05rem;
    color: #fff;
    display: inline-block;
    text-align: center;
}


/* youtube */

.reason01 .achievement-movie .slider .youtubeFrame{
/*     width: 500px;
    height: 380px; */
    width: 456px;
    height: 350px;
    position: relative;
    display: flex;
    justify-content: center;
}
.reason01 .achievement-movie .slider .youtubeFrame::before{
    content: "";
    background: url(../img/g4639.png) no-repeat center;
    background-size: contain;
/*     width: 500px;
    height: 380px; */
    width: 456px;
    height: 350px;
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
    background-size: cover;

}
.frame_wrap{
    position: relative;
}
.frame_wrap .arrow,
.frame_wrap .arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
}
.frame_wrap .arrow {
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background-color: rgba(255,255,255,.8); /* 矢印背景色　*/
    pointer-events: none;
}
.frame_wrap .arrow::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #222; /* 矢印色　*/
}
.youtubeFrame .youtube{
    margin-top: 7.5px;
    position: relative;
/*     width: 470px;
    height: 280px; */
    width: 428px;
    height: 252px;
    overflow: hidden;
}
.frame_wrap img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}
.frame_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
/* reason02 パッケージ型で圧倒的コスパ *********/

.reason02 .title::before{
    background: url(../img/reason-num02.svg) no-repeat center;
}
.reason02 .imgBlock{
    margin-top: 0;
}
.reason02 .imgBlock figcaption{
    margin-left: -1rem;
    font-size: 2.1rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.02rem;
    text-align: left;
}
.reason02 .textBlock{
    margin-top: 50px;
    margin-left: 50px;
}

/* reason03 プロにおまかせ手間なく楽ちん *********/
.reason03 .title::before{
    background: url(../img/reason-num03.svg) no-repeat center;
}
/* reason04 安心・手厚いアフターフォロー *********/
.reason04 .title::before{
    background: url(../img/reason-num04.svg) no-repeat center;
}
.reason04 .textBlock p{
    letter-spacing: 0.05rem !important;
}

/* reason05 スピーディな納期 *********/
.reason05 .title::before{
    background: url(../img/reason-num05.svg) no-repeat center;
}
.reason05 .textBlock p{
    letter-spacing: 0.03rem !important;
}

/* reason06 九州トップクラスの撮影チーム *********/
.reason06 .title::before{
    background: url(../img/reason-num06.svg) no-repeat center;
}
.reason06 .textBlock{
    width: 400px;
}
.reason06 .flex-content{
    padding-bottom: 48px;
}
.reason06 .drone{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    border-top: 2px solid #002896;
    border-bottom: 2px solid #002896;
}
.reason06 .drone .flex-content{
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: flex-start;
    align-items: center;
}
.reason06 .drone .flex-content .imgBlock{
    margin-top: 0;
    min-width: 230px;
}
.reason06 .drone .flex-content .youtube{
        margin-top: 7.5px;
        position: relative;
        width: 230px;
        height: 130px;
        overflow: hidden;
    }
.reason06 .drone .flex-content .textBlock{
    margin-left: 35px;
    width: 100%;
}
.reason06 .drone .flex-content .textBlock h3{
    font-size: 2.6rem;
}

/* reason07 採用マーケティングのノウハウ凝縮 *********/
.reason07 .title::before{
    background: url(../img/reason-num07.svg) no-repeat center;
}
.reason07 .textBlock p{
    letter-spacing: 0.02rem !important;
}
/* reason08 選ばれるもうひとつの理由 *********/
.reason08{
    position: relative;
    padding-bottom: 280px;
}
.reason08::before{
    content: "";
    background-color: #fff;
    width: 1100px;
    height: 390px;
    border-radius: 170px;
    display: block;
    position: absolute;
    top: 30px;
    left: -50px;
    z-index: -1;
}

.reason08 .title::before{
    content:attr(data-title-message);
    margin-bottom: 30px;
    display: block;
    width: 100%;
    height: auto;
    font-size: 30px;
    line-height: 1.566;
    letter-spacing: 0.01rem;

}
.reason08 .titleBlock{
    margin-bottom: 30px;
}

.reason08 .flex-content .imgBlock {
    margin-top: 0;
}
.reason08 .flex-content .imgBlock img{
    width: 376px;
    height: 199px;
}

/*-------------------------------
	point
-------------------------------*/
.point{
    padding-bottom: 160px;
}
.point h3{
    margin-bottom: 30px;
}
.point .basewidth{
    padding-left: 0;
    padding-right: 0;
}
.point h3 img{
    width: 481px;
    height: 71px;
}

.point p{
    margin-bottom: 50px;
    font-size: 2.3rem;
    font-weight: bold;
    line-height: 1.6;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    color: #002896;
}
.point .subtitle{
    margin-bottom: 40px;
    font-size: 3rem;
    text-align: center;
}
.point .description{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 45px;
    padding-right: 45px;
    background-color: #fff;
    border-radius: 30px;
    display: inline-block;
    font-size: 1.9rem;
}

/* table ***********/

.table__wrapper{
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    border: 4px solid #002896;
    max-width: 1180px;
}
.table__wrapper table{
    min-width: 100%;
    border-collapse:separate;

}
.table__wrapper td{
    border-right: 3px solid #002896;
    border-bottom: 3px solid #002896;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
}
.table__wrapper th{

    white-space: nowrap;
    border-right: 3px solid #002896;
    border-bottom: 3px solid #002896;
    text-align: center;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: bold;
    color: #002896;
    position: sticky;
    top: 0;
    left: 0;
}

.table__wrapper tr:first-of-type th{
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.5rem;
    background-color: #4c68b5;
    color: #fff;
    font-size: 1.6rem;
    width: 140px;
}

.table__wrapper tr:not(:first-of-type){
    height: 120px;
}


.table__wrapper tr:not(:first-of-type) td:first-of-type{
    background-color: #d1dde6;
}
.table__wrapper tr:nth-of-type(4) th,
.table__wrapper tr:nth-of-type(4) td{
    background-color: #ffe200!important;
}
.table__wrapper tr th:first-of-type{
    border-right: 3px solid #002896;
    max-width: 250px;
    width: 250px;
    z-index: 1;
    background-color: #fff;
}

.table__wrapper tr:nth-of-type(4) th:first-of-type{
    background-color: #ffe200;
}
.table__wrapper th:last-of-type,
.table__wrapper td:last-of-type{
    border-right: none;
}
.table__wrapper tr:last-of-type th,
.table__wrapper tr:last-of-type td{
    border-bottom: none;
}
.table__wrapper .logo{
    width: 200px;
    height: 58px;
}

.table__wrapper td img{
    width: 140px;
    height: auto;
}

.point small{
    margin-top: 15px;
    margin-left: 22px;
}

/*-------------------------------
	three-plans
-------------------------------*/
.three-plans{
    margin-bottom: 140px;
}
.three-plans .title{
    margin-bottom: 30px;
}
.three-plans .title::before{
    background: url(../img/icon_three-plans.svg) no-repeat center;
    width: 170px;
    height: 47px;
    margin-bottom: 30px;
}
.three-plans .subtitle{
    margin-bottom: 50px;
    text-align: center;
}
.three-plans .description{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.04rem;
}
.plan{
    width: 100%;
    border: 4px solid #002896;
}
.plan__wrapper{
    display: flex;
    width: 100%;
}
.planBlock{
    min-width: calc(100% / 3);
    position: relative;
}
.planBlock::before{
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 151px;
    height: 41px;
}
.planBlock:not(:last-of-type){
    border-right: 4px solid #002896;
}
.planBlock dt{
    padding-top: 30px;
    padding-bottom: 26px;
}
.planBlock dd{
    padding-top: 30px;
    padding-bottom: 45px;
}
.planBlock .subtitle{
    color: #fff;
    line-height: 1;
    margin-bottom: 24px;
}
.planBlock .description{
    color: #fff;
}
.planBlock dd h4{
    margin-bottom: 30px;
}
.planBlock dd ul{
    padding-left: clamp(10px, 2vw, 30px);
    padding-right: 5px;
    text-align: left;
}
.planBlock dd ul li{
    font-size: 1.6rem;
    line-height: 1.9375;
    letter-spacing: 0.02rem;
    font-feature-settings: "palt";
    position: relative;
}
.plan-support{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8235;
    letter-spacing: 0.02rem;
    border-top: 4px solid #002896;
    background-color: #fff;
}
.plan-support span{
    display: none;
}

.three-plans small img{
    width: 39px;
    height: 11px;
    margin-bottom: 0.5rem;
}
.three-plans .btnBlock{
    margin-top: 60px;
}
.three-plans .btnBlock img{
    width: 616px;
    height: 135px;
}
/* プラン別設定 */
.planBlock-light{
    background-color: rgba(43,183,179,0.1);
}
.planBlock-light dt{
    background-color: #2bb7b3;
}
.planBlock-light h4 img{
    width: 199px;
    height: 58px;
}
.planBlock-standard{
    background-color: rgba(220,165,65,0.1);
}
.planBlock-standard:before{
    background: url(../img/headline_standard.svg) no-repeat center;
}
.planBlock-standard dt{
    background-color: #dca541;
}
.planBlock-standard h4 img{
    width: 199px;
    height: 58px;
}
.planBlock-movieplus{
    background-color: rgba(255,0,121,0.1);
}
.planBlock-movieplus:before{
    background: url(../img/headline_movieplus.svg) no-repeat center;
}
.planBlock-movieplus dt{
    background-color: #ff0079;
}
.planBlock-movieplus h4 img{
    width: 220px;
    height: 58px;
}
.mark-L,
.mark-LS,
.mark-LSM{
    position: relative;
    display: inline-block;
    font-weight: 600;
}
.mark-L{
    text-indent: -2rem;
    margin-left: 2rem;
}
.mark-LS{
    margin-left: 3.5rem;
    text-indent: -3.5rem;
}
.mark-LSM{
    margin-left: 5.2rem;
    text-indent: -5.2rem;
}
.mark-L:before{
    margin-right: 7px;
    content: "";
    background: url(../img/mark-L.png) no-repeat center;
    width: 13px;
    height: 13px;
    display: inline-block;
}
.mark-LS:before{
    margin-right: 7px;
    content: "";
    background: url(../img/mark-LS.png) no-repeat center;
    width: 29px;
    height: 13px;
    display: inline-block;
}
.mark-LSM:before{
    margin-right: 7px;
    content: "";
    background: url(../img/mark-LSM.png) no-repeat center;
    width: 45px;
    height: 13px;
    display: inline-block;
}

/*-------------------------------
	flow
-------------------------------*/
.flow{
    margin-bottom: 120px;
    position: relative;
}
.flow:before{
    content: "";
    background-color: #fff;
    width: 1000px;
    height: 100%;
    border-radius: 100px;
    display: block;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.flow .description{
    margin-top: 25px;
    margin-bottom: 56px;
    color: #002896;
}

.flow-chart ul{
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.flow-chart ul::before{
    content: "";
    background: url(../img/flow-arrow.svg) no-repeat center;
    width: 29px;
    height: 718px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    background-size: cover;
}
.flow-chart li{
    margin-bottom: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 737px;
    border: 3px solid #002896;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    position: relative;
}
.flow-chart li::before{
    /*透過防止用*/
    content: "";
    background-color: #fff;
    width: 100%;
    height: 105%;
    position: absolute;
    top: -1px;
    z-index: -1;
}
.flow-chart li:last-child{
    margin-bottom: 0;

}
.flow-chart .subtitle{
    margin-bottom: 0;
    font-size: 2.4rem;
}
.flow-chart ul li .flex-content .subtitle{
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #002896;
}

.flow-chart small{
    margin-top: 0;
    color: #002896;
    font-size: 1.6rem;
    line-height: 1.4375;
    font-weight: 600;
}
.flow-chart li:nth-of-type(2),
.flow-chart li:nth-of-type(6){
    background-color: rgba(0,40,150,0.7);
}
.flow-chart li:last-of-type{
    background-color: #002896;
}
.flow-chart li:nth-of-type(2) p,
.flow-chart li:nth-of-type(6) p,
.flow-chart li:last-of-type p{
    color: #fff;
}

/*-------------------------------
	Q&A
-------------------------------*/
.qa{
    padding-bottom: 90px;
}
.qa .title{
    margin-bottom: 56px;
}
.accordion_area{
    counter-reset: number 0;
}
.accordion_area .accordion_one {
    margin-bottom: 36px;
}
.accordion_area .accordion_one:last-child {
    margin-bottom: 0;
}
.accordion_area .accordion_one .ac_header {

    background: linear-gradient(-90deg, #036eaa 0%, #71d4b9 100%);
    padding: 1.5rem 4rem 1.5rem 2rem;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition: .2s;
}
.accordion_area .accordion_one .ac_header:not(.open):hover {
    opacity: 0.8;
}
.accordion_area .accordion_one .ac_header .i_box {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 20px;
    height: 20px;
    margin-top: -10px;
}
.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
    position: absolute;
    content: "";
    margin: auto;
    box-sizing: border-box;
    vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
    border-top: 2px solid #fff;
    width: 20px;
    height: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
    border-left: 2px solid #fff;
    width: 0;
    height: 20px;
    top: 0;
    bottom: 0;
    right: 9px;
    transition: .3s;
}
.accordion_area .accordion_one .ac_header.open .i_box:after {
    height: 0;
}
.accordion_area .accordion_one .ac_inner {
    display: none;
    padding: 2rem 2rem 5rem 2rem;
    box-sizing: border-box;
}


/*=========
faq
=========*/

.p-faq__headinner {
    display: block;
    padding-left: 35px;
    padding-right: 35px;
    position: relative;
    line-height: 1.5;
}
.p-faq__headinner::before {
    position: absolute;
    left: 54px;
    color: #fff;
    font-size: 3.9rem;
    line-height: 1.3;
    letter-spacing: 0.03rem;
    font-family: 'Stardos Stencil', cursive;
    counter-increment: number 1;
    content: "Q"counter(number)"．";
}
.p-faq__headinner p.p-faq__q-txt {
    padding-left: 90px;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: -0.05rem;
    text-align: left;
    color: #fff;
    font-feature-settings: "palt";
}

.p-faq__bodyinner {
    display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
}
.p-faq__bodyinner::before {
    position: absolute;
    left: 76px;
    content: "A．";
    color: #de0000;
    font-size: 3.9rem;
    line-height: 1.3;
    letter-spacing: 0.03rem;
    font-family: 'Stardos Stencil', cursive;
}
.p-faq__bodyinner p.p-faq__a-txt {
    padding-left: 90px;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.01rem;
    text-align: left;
}

/*-------------------------------
	お問い合わせ
-------------------------------*/

#contact{
    padding-top: 100px;
    padding-bottom: 10px;
    background-color: #fff;
}
#contact .title + .description{
    margin-top: 60px;
    font-size: 1.6rem;
    line-height: 1.8125;
    letter-spacing: 0.02rem;
    font-feature-settings: "palt";
    text-align: justify;
    font-weight: normal;
}

#contact .contents {
    box-sizing: border-box;
    margin: 2rem auto;
    padding: 3rem;
    max-width: 720px;
    width: 100%;
}
#contact .form__frame {
    margin-left: auto;
    margin-right: auto;
    padding: 8rem 10rem;
    max-width: 880px;
    border: 3px solid #002896;
    border-radius: 100px;
}
#contact .form-title {
    color: #231815;
    font-size: 3.2rem;
    font-weight: normal;
    margin-bottom: 3.2rem;
    text-align: center;
    word-break: break-word;
}

#contact .form-description {
    font-size: 1.5rem;
    color: #231815;
    margin-bottom: 1rem;
    text-align: left;
    word-break: break-word;
}

#contact label {
    font-size: 1.8rem;
    font-weight: bold;
}

#contact small {
    display: block;
    font-size: 1.4rem;
}


#contact .question-title{
    margin-bottom: 1.1rem;
    color: #231815;
    font-size: 1.7rem;
    font-weight: bold;
    word-break: break-word;
    text-align: left;
}
#contact .form_list{
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}
#contact .form_list:first-of-type {
    flex-direction: column;
    align-items: flex-start;
}


#contact input{
    box-sizing: border-box;
}

#contact input[type="radio"],
#contact input[type="checkbox"]{
    margin-right: 1rem;
}

#contact .flex > label:first-of-type{
    margin-right: 1rem;
}

#contact input[type="text"]{
    padding: 10px 15px;
    font-size: 1.6rem;
    border-radius: 0.5rem;
    border: 1px solid #ddd;
}
#contact input[type="text"].form-name {
    width: 20rem;
}
#contact input[type="text"].form-name:first-of-type {
    margin-right: 1rem;
}
#contact input[type="text"].form-tel{
    width: 8rem;
}
#contact input[type="text"].form-tel:not(:first-of-type){
    margin-left: 1rem;
}
#contact input[type="text"].form-tel:not(:last-of-type){
    margin-right: 1rem;
}


#contact input[type="submit"]{
    width: 100%;
    padding: 1.5rem;
    font-size: 1.8rem;
    color: #fff;
    background: linear-gradient(-90deg, #036eaa 0%, #71d4b9 100%);
    border: none;
    border-radius: 0.5rem;
    transition: all .3s;
    cursor: pointer;
}
#contact input[type="submit"]:hover{
    opacity: 0.7;
    transition: all .3s;
}


#contact .form-control{
    padding: 10px 15px;
    font-size: 1.6rem;
    border:1px solid #d1dde6;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0 #d1dde6;
    color: #616161;
    display: block;
    width: 100%;
}

#contact .radio_btn{
    width: 25rem;
    text-align: left;
    display: flex;
}

#contact textarea{
    margin-bottom: 3rem;
    width: 550px;
}

#contact .consent_box{
    text-align: left;
    margin-bottom: 4rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 0 0.1rem rgb(0 0 0 / 75%);
    padding: 2.5rem 2rem;
}
#contact .consent_box label{
    margin-bottom: 0.5rem;
    display: flex;
    width: 100%;
}
#contact .consent_box a{
    font-size: 1.6rem;
}
#contact .required-mark{
    display: inline-block;
    margin-left: 1rem;
    margin-bottom: 0.25rem;
    font-size: 1.1rem !important;
    background: #f5f5f5;
    color: #002896;
    padding: 0.25rem 0.75rem;
    border-radius: 0.4rem;
    vertical-align: text-bottom;
    white-space: nowrap;
}
#contact .required{
    background: #002896;
    color: #fff;
}


/* 個人情報保護方針のアコーディオン開閉 */

#contact .acc{
    margin-top: 2rem;
    padding: 0.5rem 2rem;
    font-size: 1.4rem;
    color: #9e9e9e;
    border: 1px solid #9e9e9e;
    border-radius: 0.5rem;
    display:inline-block;
    transition: all .3s;
    cursor: pointer;
}
#contact .acc:hover{
    color: #fff;
    background-color: #9e9e9e;
    border: 1px solid #9e9e9e;
    transition: all .3s;
}
#contact .box {
    margin-top: 2rem;
    margin-left: 1rem;
    display: none;
}
#contact .box h3{
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
#contact .box p{
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
#contact .box ol > li{
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    line-height: 1.5;
}
#contact .box ol > li > p{
    margin-top: 0.5rem;
    margin-left: 2rem;
    margin-right: 1rem;
    text-align: justify;
}
#contact .box ul > li{
    margin-left: 3.3rem;
    text-indent: -1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
}
#contact textarea::placeholder {
    font-size: 1.4rem;
  }
.powerdby{
    padding-top: 2rem;
}
/*-------------------------------
	フッター
-------------------------------*/
.footer{
    padding-top: 100px;
    padding-bottom: 40px;
    background-color: #fff;
}
.footer figure{
    margin-bottom: 60px;
}
.footer .logo{
    width: 226px;
    height: 160px;
}
.footer ul{
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}
/* .footer ul li:first-child{
    border-right: 1px solid #000;
} */
.footer ul li a{
    padding-left: 25px;
    padding-right: 25px;
    font-size: 1.6rem;
    letter-spacing: 0.05rem;
}
.footer small{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.03rem;
    display: inline-block;
}
.pagetop{
    position: absolute;
    bottom: 100px;
    right: clamp(50px, 10vw, 160px);
    z-index: 1;
}


/*-------------------------------
	送信完了ページ
-------------------------------*/

.thanks{
    padding-top: 100px;

}
.thanksBlock{
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 80px;
    width: 100%;
    border: 5px solid #002896;
    text-align: left;
    background-color: #fff;
}
.thanksBlock h2{
    margin-bottom: 36px;
    font-size: 3.6rem;
}
.thanksBlock .text{
    margin-bottom: 20px;
    font-size: 2rem;
    letter-spacing: 1.6;
}
.thanksBlock .btn{
    margin-top: 80px;
    margin-bottom: 80px;
}
.thanksBlock .btn a{
    font-size: 2rem;
    text-decoration: underline;
    color: #002896;
}

/*-------------------------------
	TB専用
-------------------------------*/
@media screen and (min-width:768px) and ( max-width:1100px)  , print{
    img{
        width: 100%;
    }
    .pc_only{
        display: none;
    }
    .sp_only{
        display: none;
    }
    .tb_none{
        display: none;
    }
    .tb_only{
        display: inline-block;
    }

    .basewidth {
        max-width: 100%;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
    }
    .inner__wrapper {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .reason__cnt {
        padding-bottom: 10vw;
    }
    .reasonBlock .lead {
        margin-bottom: 10vw;
    }

    .infomation__contents .content{
        margin-left: 1.25vw;
        margin-right: 1.25vw;
        margin-bottom: 20px;
        min-width: calc(50% - 5vw);
        width: calc(50% - 5vw);
        height: 100%;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .infomation__contents .flex-content {
        justify-content: center;
    }
    .infomation__contents .content__inner {
        padding:2.5vw 2.5vw 5vw;
    }
    .infomation__contents .content h3 {
        font-size: 2.5vw;
    }
    .infomation__contents .content p {
        font-size: 1.8rem;
    }
    .motive .inner__wrapper::before {
        height: 560px;
    }
    .motive .imgBlock img {
        width: 35vw;
    }
    .motive .description {
        margin-top: 30px;
        margin-left: 5vw;
        font-size: 1.35rem;
        line-height: 1.6;
        letter-spacing: 0.02rem;
        text-align: left;
        color: #696969;
    }
    .recommend h3::before {
        content: "";
        background: url(../img/recommend01.svg) no-repeat center;
        background-size: contain;
        width: 100%;
        height: 283px;
        position: absolute;
        top: -270px;
        left: 50%;
        transform: translateX(-50%);

    }
    .reason02 .textBlock {
        margin-top: 50px;
        margin-left: 0;
    }
    .reason__cnt .flex-content .imgBlock {
        padding-left: 0;
        padding-right: 5vw;
    }
    .reason__cnt .flex-content-reverse .imgBlock {
        padding-left: 5vw;
        padding-right: 0;
    }

    .reasonBlock .lead figure img {
        width: 160px;
        height: 160px;
    }
    .reason08 {
        position: relative;
        padding-top: 10vw;
        padding-bottom: 20vw;
    }
    .reason08::before {

        height: 500px;
        border-radius: 0;

    }
    .reason08 .flex-content .imgBlock img {
        width: 100%;
        height: 199px;
    }
    .point .description {
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    .planBlock .subtitle {
        line-height: 1.5;
    }
    .planBlock-light .subtitle {
        margin-top: 20px;
        margin-bottom: 48px;
    }
    #contact .form__frame {
        padding: 10vw 5vw;
        border-radius: 5vw;
    }
}



/*-------------------------------
	SP専用
-------------------------------*/
@media screen and (max-width:767px) , print{

    .pc_none{
        display: inline-block;
    }
    .pc_only{
        display: none;
    }
    .tb_only{
        display: none;
    }
    .sp_none{
        display: none;
    }
    .sp_only{
        display: inline-block;
    }


    header{
        width: 100%;
        height: 56px;
    }
    body{
        min-width: 100vw;
    }
    img{
        width: 100%;
    }
    small{
        margin-top: 4vw;
        font-size: 1.4rem;
    }



    /*----- 共通パーツ */

    header .basewidth {
        padding-right: 0;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .basewidth{
        max-width: 100%;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .inner__wrapper{
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .flex-content{
        display: flex;
        flex-direction: column;
    }
    .flex-content-reverse{
        flex-direction: column-reverse;
    }
    .title{
        line-height: 1.5;
    }
    .subtitle{
        margin-bottom: 10px;
    }
    .title + .description{
        margin-top:10vw;
        text-align: left;
        line-height: 1.6;


    }
    .reason__cnt{
        padding-bottom: 15vw;
    }
    .reason__cnt .flex-content .imgBlock{
        margin-top: 10vw;
        min-width: 100%;
    }
    .reason__cnt .flex-content .imgBlock img{
        width: 60%;
    }
    .reason__cnt .flex-content .textBlock p{
        font-feature-settings: "palt";
        letter-spacing: 0.01rem;
    }
    .btn-contact{
        display: none;
        position: fixed;
        bottom: -10px;
        right: 20px;
        z-index: 5;
    }
    .btn-contact img{
        height: auto;
        margin-right: -30px;
    }


    /*-------------------------------
        top
    -------------------------------*/
    .top:before{
        content: "";
        width: 100%;
        height: 340px;
        background-size: cover;
        top: 56px;
    }

    .mainvisual .main__image{
        margin-top: 10vw;
        margin-bottom: 7.5vw;
        width: 100%;
        height: auto;
    }
    .mainvisual .sub__image{
        width: 684px;
        height: 165px;
    }
    .top{
        padding-top: 40px;
    }
    .top h2{
        position: relative;
        display: inline-block
    }
    .top h2:after{
        width: 50px;
        height: 100%;
        background-size: contain;
        position: absolute;
        top: -60px;
        right: 5vw;
    }

    /*-------------------------------
        infomation__contents
    -------------------------------*/

    .infomation__contents{
        margin-top: 30px;
    }
    .infomation__contents .flex-content{
        flex-wrap: wrap;
    }
    .infomation__contents .content{
        padding: 5px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 2.5vw;
        min-width: 100%;

    }
    .infomation__contents .content__inner{
        padding: 3.5vw 2.5vw;

    }
    .infomation__contents .content h3{
        margin-bottom: 5vw;
        font-size: 2.2rem;
    }
    .infomation__contents .content p{
        font-size: 1.5rem;
        font-weight: bold;

    }

    /*-------------------------------
        motive
    -------------------------------*/


    .motive{
        margin-top: 10vw;
        text-align: left;
    }
    .motive .inner__wrapper{
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        position: relative;
        flex-direction: column-reverse;
    }
    .motive .inner__wrapper::before{
        content: "";
        width: 100%;
        height: 770px;
        border-radius: 5vw;
        background-color: #fff;
        position: absolute;
        top: -10px;
        right: 0;
        z-index: -1;
    }
    .motive .flex{
        display: flex;
    }
    .motive .subtitle{
        text-align: center;
        margin-bottom: 30px;
    }
    .motive .description{
        display: none;
    }
    .motive .imgBlock{
        display: none;
    }
    .motive .imgBlock_sp{
        display: block;
        margin-bottom: 30px;
    }
    .motive .imgBlock_sp figure{
        margin-left: auto;
        margin-right: auto;
        width: 70%;
    }
    .motive .imgBlock_sp img{
        width: 100%;
        height: auto;
    }
    .motive .imgBlock_sp .description{
        margin-top: 1rem;
        margin-left: 0;
        margin-right: 0;
        font-size: 1.1rem;
        text-align: left;
        font-weight: normal;
        display: block;
    }
    .motive .imgBlock_sp .description span {
        margin-left: -0.5rem;
    }
    .motive .textBlock{
        margin-top: 5vw;
        margin-bottom: 7.5vw;
        width: 100%;
    }
    .motive .textBlock p{
        width: 100%;
    }


    /*-------------------------------
        recommend
    -------------------------------*/
    .recommend {
        margin-top: 170px;
    }
    .recommend h3{
        font-size: 2.1rem;
        font-weight: bold;
        line-height: 1.52;
        letter-spacing: 0.07rem;
        color: #002896;
        position: relative;
    }
    .recommend h3::before{
        width: 320px;
        height: 125px;
        top: -130px;
        background-size: contain;
    }

    /* reasonBlock ***********/
    .reasonBlock{
        padding-top: 15vw;
        padding-bottom: 0;
    }
    .reasonBlock .lead{
        margin-bottom: 30px;
    }
    .reasonBlock .lead h3{
        margin-bottom: 30px;
    }
    .reasonBlock .lead h3 img{
        width: 340px;
        height: 95px;
    }

    .reasonBlock .lead figure ul li{
        margin-left: 1.25vw;
        margin-right: 1.25vw;
        margin-bottom: 5vw;
        width: calc(50% - 2.5vw);
    }
    .reasonBlock .lead figure img{
        width: 100%;
        height: auto;
    }

    .reasonBlock .titleBlock{
        margin-bottom: 30px;
    }
    .reasonBlock .title::before {
        width: 250px;
        background-size: contain!important;
    }


    /* reason01 魅力溢れる多くの実績 *********/

    .reason01 .title::before{
        background: url(../img/reason-num01.svg) no-repeat center;

    }

    .reason01{
        position: relative;
        z-index: 1;
    }
    .reason01 .gradient{

        margin: 0 calc(50% - 50vw);
        width: 100vw;
        position: relative;
        z-index: -2;
        background: linear-gradient(-90deg, #036eaa, #71d4b9);
    }
    .reason01 .gradient::before{
        width: 100vw;
        height: 300px;
        display: block;
        position: absolute;
        top: 0%;
        z-index: -1;
    }
    .reason01 .achievement > h3{
        padding-top: 10vw;
        margin-bottom: 5vw;
        font-size: 2.6rem;
        line-height: 1.666;

    }
    .reason01 .achievement > h3 strong{
        font-size: 3.2rem;
    }
    .reason01 .achievement{
        padding-bottom: 25px;
    }
    .reason01 .achievement .slider h4{
        margin-top: 28px;
        margin-bottom: 18px;
        font-size: 1.8rem;
        font-weight: bold;
        letter-spacing: 0.04rem;
        color: #fff;
    }
    .reason01 .achievement-movie .slider h4 {
        margin-top: 0;
    }
    .reason01 .achievement .slider h4 > small{
        margin-top: 0;
        font-size: 1.4rem;
        font-weight: bold;
        display: inline-block;
    }
    .reason01 .achievement .slider p{
        margin-bottom: 28px;
        width: 80%;
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: left;
    }


    /* youtube */

    .reason01 .achievement-movie .slider .youtubeFrame{
        width: 250px;
        height: 235px;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .reason01 .achievement-movie .slider .youtubeFrame::before{
        content: "";
        background: url(../img/g4639.png) no-repeat center;
        width: 280px;
        height: 205px;
        display: block;
        position: absolute;
        top: 0;
        z-index: -1;
        background-size: contain;
    }
    .frame_wrap{
        position: relative;
    }

    .frame_wrap .arrow,
    .frame_wrap .arrow::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%,-50%);
    }
    .frame_wrap .arrow {
        width: 56px;
        height: 56px;
        border-radius: 100%;
        background-color: rgba(255,255,255,.8); /* 矢印背景色　*/
        pointer-events: none;
    }
    .frame_wrap .arrow::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 0 8px 12px;
        border-color: transparent transparent transparent #222; /* 矢印色　*/
    }
    .youtubeFrame .youtube {
        margin-top: 7.5px;
        position: relative;
        width: 250px;
        height: 145px;
        overflow: hidden;
    }
    .frame_wrap img {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
    }
    .frame_wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    /* reason02 パッケージ型で圧倒的コスパ *********/
    .reason02 .flex-content{
        flex-direction: column-reverse;
    }
    .reason02 .title::before{
        background: url(../img/reason-num02.svg) no-repeat center;

    }
    .reason02 .imgBlock{
        margin-top: 0;
    }
    .reason02 .imgBlock figcaption{
        margin-bottom: 1rem;
        font-size: 1.8rem;
    }
    .reason02 .imgBlock img{
       width: 100% !important;
    }
    .reason02 .textBlock{
        margin-top: 5vw;
        margin-left: 0;
    }

    /* reason03 プロにおまかせ手間なく楽ちん *********/
    .reason03 .title::before{
        background: url(../img/reason-num03.svg) no-repeat center;
    }
    /* reason04 安心・手厚いアフターフォロー *********/
    .reason04 .title::before{
        background: url(../img/reason-num04.svg) no-repeat center;
    }
    .reason04 .textBlock p{
        letter-spacing: 0.05rem !important;
    }
    .reason04 .flex-content{
        flex-direction: column-reverse!important;
    }

    /* reason05 スピーディな納期 *********/
    .reason05 .title::before{
        background: url(../img/reason-num05.svg) no-repeat center;
    }
    .reason05 .textBlock p{
        letter-spacing: 0.03rem !important;
    }

    /* reason06 九州トップクラスの撮影チーム *********/
    .reason06 .title::before{
        background: url(../img/reason-num06.svg) no-repeat center;
    }
    .reason06 .textBlock{
        width: 100%;
    }
    .reason06 .flex-content{
        padding-bottom: 48px;
        flex-direction: column-reverse!important;
    }
    .reason06 .drone{
        width: 100%;
    }

    .reason06 .drone .flex-content .imgBlock{
        margin-top: 5vw;
        min-width: 80%;
    }

    .reason06 .drone .flex-content .textBlock{
        margin-left: 0;
        width: 100%;
    }
    .reason06 .drone .flex-content .textBlock h3{
        font-size: 2.6rem;
    }
    .reason06 .drone .flex-content .youtube {
        margin-top: 0;
        position: relative;
        width: 300px;
        height: 170px;
        overflow: hidden;
    }
    .reason06 .drone .flex-content .youtube img{
       width: 100%;
    }

    /* reason07 採用マーケティングのノウハウ凝縮 *********/
    .reason07 .title::before{
        background: url(../img/reason-num07.svg) no-repeat center;
    }
    .reason07 .textBlock p{
        letter-spacing: 0.02rem !important;
    }
    /* reason08 選ばれるもうひとつの理由 *********/
    .reason08{
        padding-bottom: 85px;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        position: relative;
    }
    .reason08::before{
        width: 100%;
        height: 600px;
        border-radius: 5px;
        top: -30px;
        left: 0;
    }

    .reason08 .title::before{
        content:"さらに福岡・九州の\A企業様にとっては...";
        margin-bottom: 5vw;
        display: block;
        width: 100%;
        height: auto;
        font-size: 2.6rem;
        line-height: 1.566;
        letter-spacing: 0.01rem;
        white-space: pre;

    }
    .reason08 .titleBlock{
        margin-bottom: 30px;
    }

    .reason08 .flex-content .imgBlock {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .reason08 .flex-content .imgBlock img{
        width: 100%;
        height: auto;
    }

    /*-------------------------------
        point
    -------------------------------*/
    .point{
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        padding-bottom: 15vw;
    }
    .point h3{
        margin-bottom: 30px;
    }
    .point .basewidth{
        padding-left: 0;
        padding-right: 0;
    }
    .point h3 img{
        width: 260px;
        height: auto;
    }

    .point p{
        margin-bottom: 30px;
        font-size: 2.3rem;
        font-weight: bold;
        line-height: 1.6;
        font-feature-settings: "palt";
        letter-spacing: 0.1rem;
        color: #002896;
    }
    .point .subtitle{
        margin-bottom: 24px;
        font-size: 1.8rem;
        text-align: left;
    }
    .point .description{
        padding: 1.5vw 5vw;
        padding-right: 5vw;
        border-radius: 5vw;
        font-size: 1.6rem;
    }

    /* table ***********/

    .table__wrapper tr:not(:first-of-type) {
        height: auto;
    }
    .table__wrapper td{
        min-width: 135px;
    }

    .table__wrapper tr th:first-of-type{
        padding: 2.5vw;
        max-width: 100%;
        width: 100%;
        font-size: 1.5rem;
        white-space: break-spaces;
    }

    .table__wrapper .logo{
        width: 150px;
        height: auto;
    }
    .table__wrapper td img {
        width: 130px;
    }

    .point small{
        margin-top: 0.5rem;
        margin-left: 0;
        font-size: 1.3rem;
    }
    .scroll-hint-icon-wrap {
        z-index: 1;
        right: 20px;
    }
    .scroll-hint-icon-wrap span{
        display: block;
        margin-left: 70px;
    }

    /*-------------------------------
        three-plans
    -------------------------------*/
    .three-plans{
        margin-bottom: 15vw;
    }
    .three-plans .title{
        margin-bottom: 30px;
    }
    .three-plans .title::before{
        background: url(../img/icon_three-plans.svg) no-repeat center;
        width: 170px;
        height: 47px;
        margin-bottom: 30px;
    }
    .three-plans .subtitle{
        margin-bottom: 50px;
        text-align: center;
    }
    .three-plans .description{
        font-size: 1.5rem;
    }
    .plan{
        width: 100%;
        border: 4px solid #002896;
    }
    .plan__wrapper{
        flex-direction: column;
    }
    .planBlock{
        min-width: calc(100% / 3);
        position: relative;
    }
    .planBlock::before{
        content: "";
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 151px;
        height: 41px;
    }
    .planBlock:not(:last-of-type){
        border-right: none;
    }
    .planBlock dd{
        padding-top: 30px;
        padding-bottom: 45px;
    }
    .planBlock .subtitle{
        font-size: 2.4rem;
        margin-bottom: 24px;
    }
    .planBlock .description{
        color: #fff;
    }
    .planBlock dd ul{
        padding-left: clamp(10px, 2vw, 30px);
        padding-right: 5px;
        text-align: left;
    }
    .planBlock dd ul li{
        font-size: 1.6rem;
        line-height: 1.9375;
        letter-spacing: 0.02rem;
        font-feature-settings: "palt";
        position: relative;
    }
    .plan-support{
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 1.7rem;
        font-weight: 600;
        line-height: 1.8235;
        letter-spacing: 0.02rem;
        border-top: 4px solid #002896;
        background-color: #fff;
    }
    .plan-support span{
        margin-bottom: 2rem;
        padding: 0.25rem 0;
        display: inline-block;
        width: 151px;
        font-size: 1.6rem;
        font-weight: bold;
        color: #fff;
        background-color: #002896;
        border-radius: 20px;

    }

    .three-plans small img{
        width: 39px;
        height: 11px;
        margin-bottom: 0.7rem;
    }
    .three-plans .btnBlock{
        margin-top: 60px;
    }
    .three-plans .btnBlock img{
        width: 100%;
        height: auto;
    }
    /* プラン別設定 */
    .planBlock-light{
        background-color: rgba(43,183,179,0.1);
    }
    .planBlock-light dt{
        background-color: #2bb7b3;
    }
    .planBlock-light h4 img{
        width: 199px;
        height: 58px;
    }
    .planBlock-standard{
        background-color: rgba(220,165,65,0.1);
    }
    .planBlock-standard:before{
        background: url(../img/headline_standard.svg) no-repeat center;
    }
    .planBlock-standard dt{
        background-color: #dca541;
    }
    .planBlock-standard h4 img{
        width: 199px;
        height: 58px;
    }
    .planBlock-movieplus{
        background-color: rgba(255,0,121,0.1);
    }
    .planBlock-movieplus:before{
        background: url(../img/headline_movieplus.svg) no-repeat center;
    }
    .planBlock-movieplus dt{
        background-color: #ff0079;
    }
    .planBlock-movieplus h4 img{
        width: 220px;
        height: 58px;
    }
    .mark-L,
    .mark-LS,
    .mark-LSM{
        position: relative;
        display: inline-block;
        font-weight: 600;
    }
    .mark-L{
        text-indent: -2rem;
        margin-left: 2rem;
    }
    .mark-LS{
        margin-left: 3.5rem;
        text-indent: -3.5rem;
    }
    .mark-LSM{
        margin-left: 5.2rem;
        text-indent: -5.2rem;
    }
    .mark-L:before{
        margin-right: 7px;
        content: "";
        background: url(../img/mark-L.png) no-repeat center;
        width: 13px;
        height: 13px;
        display: inline-block;
    }
    .mark-LS:before{
        margin-right: 7px;
        content: "";
        background: url(../img/mark-LS.png) no-repeat center;
        width: 29px;
        height: 13px;
        display: inline-block;
    }
    .mark-LSM:before{
        margin-right: 7px;
        content: "";
        background: url(../img/mark-LSM.png) no-repeat center;
        width: 45px;
        height: 13px;
        display: inline-block;
    }

    /*-------------------------------
        flow
    -------------------------------*/
    .flow{
        margin-bottom: 20vw;
    }
    .flow:before{
        width: 100%;
        height: 100%;
        border-radius: 5vw;
        top: 20px;
    }
    .flow .description{
        margin-top: 5vw;
        margin-bottom: 10vw;
        font-size: 4vw;
        text-align: center;

    }

    .flow-chart ul{
        padding-bottom: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    .flow-chart ul::before{
        height: 770px;

    }
    .flow-chart li{
        margin-bottom: 22px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        border: 3px solid #002896;
        border-radius: 35px;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .flow-chart li::before{
        /*透過防止用*/
        content: "";
        background-color: #fff;
        width: 100%;
        height: 105%;
        position: absolute;
        top: -1px;
        z-index: -1;
    }
    .flow-chart li:last-child{
        margin-bottom: 0;

    }
    .flow-chart .subtitle{
        margin-bottom: 0;
    }
    .flow-chart ul li .flex-content .subtitle{
        margin-right: 0;
        padding-right: 0;
        border-right: none;
        text-align: center;
    }

    .flow-chart small{
        margin-top: 1rem;
        color: #002896;
        font-size: 1.6rem;
        line-height: 1.4375;
        text-align: center;
    }
    .flow-chart li:nth-of-type(2),
    .flow-chart li:nth-of-type(6){
        background-color: rgba(0,40,150,0.7);
    }
    .flow-chart li:last-of-type{
        background-color: #002896;
    }
    .flow-chart li:nth-of-type(2) p,
    .flow-chart li:nth-of-type(6) p,
    .flow-chart li:last-of-type p{
        color: #fff;
    }

    /*-------------------------------
        Q&A
    -------------------------------*/
    .qa{
        padding-bottom: 15vw;
    }
    .qa .title{
        margin-bottom: 7.5vw;
    }
    .accordion_area .accordion_one {
        margin-bottom: 5vw;
    }
    .accordion_area .accordion_one:last-child {
        margin-bottom: 0;
    }
    .accordion_area .accordion_one .ac_header {

        padding: 1.5rem 5.5rem 1.5rem 2rem;
    }

    .accordion_area .accordion_one .ac_header .i_box {
        position: absolute;
        top: 50%;
        right: 2rem;
        width: 20px;
        height: 20px;
        margin-top: -10px;
    }
    .accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
        position: absolute;
        content: "";
        margin: auto;
        box-sizing: border-box;
        vertical-align: middle;
    }
    .accordion_area .accordion_one .ac_header .i_box:before {
        border-top: 2px solid #fff;
        width: 20px;
        height: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    .accordion_area .accordion_one .ac_header .i_box:after {
        border-left: 2px solid #fff;
        width: 0;
        height: 20px;
        top: 0;
        bottom: 0;
        right: 9px;
        transition: .3s;
    }
    .accordion_area .accordion_one .ac_header.open .i_box:after {
        height: 0;
    }
    .accordion_area .accordion_one .ac_inner {
        display: none;
        padding: 2rem 2rem 5rem 2rem;
        box-sizing: border-box;
    }


    /*=========
    faq
    =========*/

    .p-faq__headinner {
        padding-left: 0;
        padding-right: 0;
    }
    .p-faq__headinner::before {
        top: -3px;
        left: 10px;
        font-size: 2.8rem;
    }
    .p-faq__headinner p.p-faq__q-txt {
        padding-left: 60px;
        font-size: 2rem;
        line-height: 1.333;
    }

    .p-faq__bodyinner {
        padding-left: 0;
    }
    .p-faq__bodyinner::before {
        top: -3px;
        left: 20px;
        font-size: 2.8rem;
    }
    .p-faq__bodyinner p.p-faq__a-txt {
        padding-left: 60px;
        font-size: 1.8rem;
        line-height: 1.5;
    }

    /*-------------------------------
        お問い合わせ
    -------------------------------*/
    #contact{
        padding-top: 60px;
        padding-bottom: 60px;
        background-color: #fff;
    }
    #contact .title + .description{
        margin-bottom:30px;
        font-size: 1.6rem;
        line-height: 1.8125;
        letter-spacing: 0.02rem;
        font-feature-settings: "palt";
    }
    #contact .contents {
        padding: 2rem 3vw 0;
        max-width: 100%;
    }
    #contact .form__frame {
        padding: 10vw 5vw;
        max-width: 100%;
        border-radius: 5vw;
    }
    #contact .form-title {
        font-size: 2.6rem;
        margin-bottom: 2.6rem;
    }

    #contact .form-description {
        font-size: 1.5rem;
        color: #231815;
        margin-bottom: 1rem;
        text-align: left;
        word-break: break-word;
    }
    #contact span {
        font-size: 1.4rem;
    }

    #contact .question-title{
        margin-bottom: 1.1rem;
        font-size: 1.5rem;
    }
    #contact .form_list{
        display: flex;
        align-items: center;
        margin-bottom: 3rem;
        flex-wrap: wrap;
    }
    #contact .form_list label{
        width: 100%;
    }
    #contact .form_list:first-of-type{
        flex-direction: column;
    }

    #contact .form_list:first-of-type label:first-of-type{
        margin-bottom: 1rem;
    }
    #contact input[type="text"]{
        width: 100%;
    }
    #contact input[type="text"].form-name {
        width: 100%;
    }
    #contact input[type="text"].form-name:first-of-type {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    #contact input[type="text"].form-tel {
        width: 7rem;
    }
    #contact textarea{

        margin-bottom: 3rem;
        width: 100%;
    }

    #contact .consent_box{
        margin-bottom: 4rem;
        background-color: #ffffff;
        border-radius: 0.5rem;
        border: none;
        box-sizing: border-box;
        box-shadow: 0 0 0.1rem rgb(0 0 0 / 75%);
        padding: 2.5rem 2rem;
    }
    #contact .consent_box label{
        display: block;
        margin-bottom: 1rem;
        width: 100%;
    }
    #contact .consent_box a{
        font-size: 1.6rem;
    }
    #contact .required-mark{
        margin-bottom: 0;
    }
    /*-------------------------------
        フッター
    -------------------------------*/
    .footer{
        padding-top: 12vw;
        padding-bottom: 125px;
        background-color: #fff;
    }
    .footer figure{
        margin-bottom: 60px;
    }
    .footer .logo{
        width: 50%;
        height: auto;
    }
    .footer ul{
        margin-bottom: 0;
        flex-direction: column;
    }
    .footer ul li:first-child{
        border-right: none;
    }
    .footer ul li a{
        padding-bottom: 25px;
        text-decoration: underline;
        text-underline-offset: 5px;
        display: block;
    }
    .footer small{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2;
        letter-spacing: 0.03rem;
        display: inline-block;
    }
    .pagetop{
        position: absolute;
        bottom: 90px;
        right: 30px;
        z-index: 1;
    }
    .pagetop button{
        background: transparent;
        border: none;
    }


    /*-------------------------------
        送信完了ページ
    -------------------------------*/

    .thanksBlock{
        margin-top: 10vw;
        margin-bottom: 10vw;
        padding: 10vw;
    }
    .thanksBlock h2{
        margin-bottom: 7.5vw;
        font-size: 2.4rem;
    }
    .thanksBlock .text{
        font-size: 1.8rem;
    }
    .thanksBlock .btn{
        margin-top: 10vw;
        margin-bottom: 10vw;
    }
    .thanksBlock .btn a{
        font-size: 1.8rem;
    }

}