@charset "utf-8";

/*
Theme Name: bigoasis-inc co.
Theme URI:
Description:株式会社ビッグオアシスのWPテーマです
Author: ko higuchi
Author URI:
License:
License URI:
Version: 1.1
*/


/*スクロールダウン全体の場所*/
.scrolldown {
    position: absolute;
    right: 0%;
    bottom: 100px;
    height: 100px;
}

.scrolldown span {
    position: absolute;
    left: -15px;
    top: -40px;
    color: #003664;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    transform: rotate(90deg);
}

.scrolldown::after {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    width: 1px;
    height: 100px;
    background: #003664;
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: 60px;
        opacity: 1;
    }

    100% {
        height: 60px;
        top: 100px;
        opacity: 0;
    }
}

/*****************************
ここからページネーション
 *****************************/
.pagination_box {
    width: 100%;
    text-align: center;
}

.pagination-box span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 12px;
    padding: 10px;
    margin: 10px;
    background-color: #fff;
    color: #003664;
}

.pagination-box .next {
    padding: 10px;
    margin: 10px;
    color: #003664;
    background-color: #fff;
}

.pagination-box a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 12px;
    padding: 10px;
    margin: 10px;
    background-color: #003664;
    color: #fff;
}

/* ここからFV & header */
/* FV & headerモーション */
#video-fixed {
    opacity: 0;
    transition: 1.0s;
    transition-delay: 0.2s;
}
#video-fixed.isView {
    opacity: 1;
}
#header {
    opacity: 1;/*アニメ無し*/
    transition: 1.0s;
    transition-delay: 0.2s;
}
#header.isView {
    opacity: 1;
}
.fv_message_p{
    opacity: 1;/*アニメ無し*/
    transition: 0.8s;
    transition-delay: 0s;
    transform: translateX(0%);
    position: relative;
    z-index: 3;
}
.fv_message_p:before{
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    background-color: #E2F5FF;
    top: -375%;
    left: -10%;
    z-index: -5;
}
.fv_message_p:after{
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    background-color: #F0F0F0;
    bottom: -100%;
    right: -40%;
    z-index: -5;
}
.fv_message_p.isView{
    opacity: 1;
    transform: translateX(0%);
}
.fv_message_p p span::after {
    opacity: 1;/*アニメ無し*/
}

.fv_message_p.isView p span::after {
    opacity: 1;
    transition: 2.0s;
}
.scrolldown{
    opacity: 0;
    transition: 0.3s;
    transition-delay: 0.2s;
}
.scrolldown.isView{
    opacity: 1;
}

@keyframes updown-anim {
    0% {
        transform: translateY(110%);
    }
    100% {
        transform: translateY(0);
    }
}
.updown {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.updown h1 span{
    opacity: 1;/*アニメ無し*/
    transition: 1.0s;
    font-family: serif;
    display: inline-block;
    color: #003664;
}
.updown.isView h1 span {

    opacity: 1;
}

/*** 各span(文字)に遅延時間delayを設定 ***/
.updown h1 span:nth-child(1) {
    animation-delay: 0.02s;
}
.updown h1 span:nth-child(2) {
    animation-delay: 0.04s;
}
.updown h1 span:nth-child(3) {
    animation-delay: 0.06s;
}
.updown h1 span:nth-child(4) {
    animation-delay: 0.08s;
}
.updown h1 span:nth-child(5) {
    animation-delay: 0.10s;
}
.updown h1 span:nth-child(6) {
    animation-delay: 0.12s;
}
.updown h1 span:nth-child(7) {
    animation-delay: 0.14s;
}
.updown h1 span:nth-child(8) {
    animation-delay: 0.16s;
}
.updown h1 span:nth-child(9) {
    animation-delay: 0.18s;
}
.updown h1 span:nth-child(10) {
    animation-delay: 0.20s;
}
.updown h1 span:nth-child(11) {
    animation-delay: 0.22s;
}
.updown h1 span:nth-child(12) {
    animation-delay: 0.24s;
}
.updown h1 span:nth-child(13) {
    animation-delay: 0.26s;
}
.updown h1 span:nth-child(14) {
    animation-delay: 0.28s;
}
.updown h1 span:nth-child(15) {
    animation-delay: 0.30s;
}
.updown h1 span:nth-child(16) {
    animation-delay: 0.32s;
}
.updown h1 span:nth-child(17) {
    animation-delay: 0.34s;
}
.updown h1 span:nth-child(18) {
    animation-delay: 0.36s;
}
.updown h1 span:nth-child(19) {
    animation-delay: 0.38s;
}
.updown h1 span:nth-child(20) {
    animation-delay: 0.40s;
}
.updown h1 span:nth-child(21) {
    animation-delay: 0.42s;
}
.updown h1 span:nth-child(22) {
    animation-delay: 0.44s;
}
.updown h1 span:nth-child(23) {
    animation-delay: 0.46s;
}
.updown h1 span:nth-child(24) {
    animation-delay: 0.48s;
}
.updown h1 span:nth-child(25) {
    animation-delay: 0.50s;
}
.updown h1 span:nth-child(26) {
    animation-delay: 0.52s;
}
.updown h1 span:nth-child(27) {
    animation-delay: 0.54s;
}
.updown h1 span:nth-child(28) {
    animation-delay: 0.56s;
}
.updown h1 span:nth-child(29) {
    animation-delay: 0.58s;
}
.updown h1 span:nth-child(30) {
    animation-delay: 0.60s;
}
.updown h1 span:nth-child(31) {
    animation-delay: 0.62s;
}
.updown h1 span:nth-child(32) {
    animation-delay: 0.64s;
}
.updown h1 span:nth-child(33) {
    animation-delay: 0.66s;
}
.updown h1 span:nth-child(34) {
    animation-delay: 0.68s;
}
.updown h1 span:nth-child(35) {
    animation-delay: 0.70s;
}
.updown h1 span:nth-child(36) {
    animation-delay: 0.72s;
}
.updown h1 span:nth-child(37) {
    animation-delay: 0.74s;
}
.updown h1 span:nth-child(38) {
    animation-delay: 0.76s;
}
.updown h1 span:nth-child(39) {
    animation-delay: 0.78s;
}
.updown h1 span:nth-child(40) {
    animation-delay: 0.80s;
}
.updown h1 span:nth-child(41) {
    animation-delay: 0.82s;
}



/* FV & headerモーション */
header {
    margin-top: 0;
    display: inline-block;
    height: 80px;
    transition: all 0.3s ease-out;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #fff;
}
@media screen and (max-width: 820px) {
    header {
        background: none;
    }
}
header:hover {
    background-color: #fff;
}

.header_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;

}

.section_inner {
    width: 1100px;
    margin: 0 auto;
}

#global_nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 50px;
    margin: 0 auto;
}

#global_nav ul li a {
    text-decoration: none;
    color: #003664;
    font-weight: 400;
    display: inline-block;
    height: 80px;
    width: 100%;
    line-height: 80px;
}

#header {
    width: 1100px;
    position: relative;
}

#FV {
    width: 1100px;
    height: 100vh;
    margin: 80px auto 0;
    position: relative;
}
#FV:before{
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background-color: #F0F0F0;
    top: 10%;
    left: 20%;
    z-index: -5;
    opacity: 1;/*アニメ無し*/
    transition: 0.6s;
    transition-delay: 0s;
    transform: rotate(0deg);
}
#FV:after{
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background-color: #E2F5FF;
    bottom: 30%;
    right: 50%;
    z-index: -5;
    opacity: 1;/*アニメ無し*/
    transition: 0.5s;
    transition-delay: 0s;
    transform: rotate(0deg);/*アニメ無し*/
}
#FV.isView:before{
    opacity: 1;
    transform: rotate(0deg);
}
#FV.isView:after{
    opacity: 1;
    transform: rotate(0deg);
}
.fv_message {
    position: absolute;
    top: 16%;
    left: 0;
}
.fv_message_p{
    position: absolute;
    top: 26%;
    left: 0;
}

.fv_message h1 {
    font-size: 2.1rem;
    font-family: serif;
    color: #003664;
    font-weight: 400;
    width: 100%;
    position: relative;
}

.fv_message_p p {
    font-size: 1.0vw;
    margin-top: 70px;
    padding-left: 60px;
    position: relative;
}

.fv_message_p p span {
    color: #003664;
    position: relative;
}

.fv_message_p p::before {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    content: "";
    width: 50px;
    height: 1px;
    background-color: #565352;
}

.fv_message_p p span::after {
    position: absolute;
    content: "";
    background: url(./images/bigoasis_logo.png);
    background-size: cover;
    width: 30px;
    height: 30px;
    top: -4px;
    right: -30px;
}

/* グロナビ */
.sub-menu {
    display: none !important;
}

#menu-item-35:hover .sub-menu,
.sub-menu:hover {
    display: flex !important;
    position: absolute;
    top: 80px;
    left: -35vw;
    background-color: #f0f0f0;
    width: 130vw;
    padding: 0px 0 0 40vw;
}
#menu-item-393:hover .sub-menu,
.sub-menu:hover {
    display: flex !important;
    position: absolute;
    top: 80px;
    left: -35vw;
    background-color: #f0f0f0;
    width: 130vw;
    padding: 0px 0 0 40vw;
}

#menu-item-49:hover .sub-menu {
    display: flex !important;
    position: absolute;
    top: 80px;
    left: -30vw;
    background-color: #f0f0f0;
    width: 130vw;
    padding: 0px 0 0 55vw;
}


#global_nav ul li a {
    background-image: linear-gradient(90deg, #022570, #022570);
    background-repeat: no-repeat;
    background-position: 0px 60px;
    background-size: 0 2px;
    transition: background-size 0.6s;
}

#global_nav ul li a:hover {
    background-size: 100% 2px;
}

#global_nav_sp,
#drawer_toggle {
    display: none;
}




/* ここからaboutus */
/* aboutusモーション */
.aboutus h2 {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.isView .aboutus h2 {
    opacity: 1;
    transform: translateX(0%);
}

.aboutus_box {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
}

.isView .aboutus_box {
    opacity: 1;
    transform: translateY(0%);
}

.aboutus_box_img::before {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 1.6s;
    transform: translateX(-10%);
}

.isView .aboutus_box_img::before {
    opacity: 0.7;
    transform: translateX(0%);
}

/* aboutusモーション */
#aboutus {
    width: 100%;
    margin-top: 100px;
}

.aboutus_box {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.aboutus_box_img {
    width: 48%;
    position: relative;
    z-index: 1;
    margin-top: 50px;
}

.aboutus_box_img::before {
    position: absolute;
    content: "";
    background-color: #003664;
    width: 100%;
    height: 100%;
    top: -50px;
    left: -200px;
    z-index: -1;
}

.aboutus_box_text {
    width: 48%;
}

.aboutus_box_text h3 {
    font-size: 1.3rem;
    line-height: 2.0;
    letter-spacing: 3px;
    font-family: serif;
}

.aboutus_box_text p {
    font-size: 1.1rem;
    line-height: 2.5;
    margin-top: 50px;
}

/* 動画 */

.vimeo iframe {
	    box-shadow: 7px 10px 18px 4px rgb(0 0 0 / 10%);
}

/* ここからservice */
/* serviceモーション */
.section_fp_title h2 {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.section_fp_title.isView h2 {
    opacity: 1;
    transform: translateX(0%);
}
.section_fp_title .title_text {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.section_fp_title.isView .title_text {
    opacity: 1;
    transform: translateX(0%);
}

.service_area_title {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateX(-10%);
}

.isView .service_area_title {
    opacity: 1;
    transform: translateX(0%);
    line-height: 2.0;
}

.service_box,
.service_box_ft {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .service_box,
.isView .service_box_ft {
    opacity: 1;
    transition-delay: 1.3s;
    transform: translateY(0%);
    transform: rotate(0deg);
}

/* aboutusモーション */
#service {
    width: 100%;
    margin-top: 300px;
}

#service .section_inner {
    position: relative;
}

.service_area h3 {
    margin: 100px 0 20px;
    position: relative;
    padding-left: 50px;
    font-size: 1.5rem;
    font-weight: 900;
    color: #333;
    font-family: serif;
}

.service_area h3::before {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    content: "";
    width: 30px;
    height: 1px;
    background-color: #565352;
}

.service_box_area {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5%;
}

.service_box_ft {
    width: 48.727%;
    height: 230px;
    margin-top: 2%;
    position: relative;
    display: inline-block;
    border: 1px solid #565352;
    position: relative;
}

.service_box {
    width: 23%;
    margin-top: 2%;
    border: 1px solid #565352;
    position: relative;
    height: 230px;
    display: inline-block;
    position: relative;
}
.a_text{
    position: absolute;
    bottom: 5%;
    left: 5%;
    color: #003664;
}
.w30 .service_box {
    width: 30%;
}

.service_box:hover,
.service_box_ft:hover {
    animation: hover 1.5s infinite;
    border: 1px solid #003664;
    outline: 1px solid #003664;
    -webkit-animation: hover 1.5s infinite;
    transition-delay: 0.1s;
}

@-webkit-keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

@keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

.service_box::after {
    position: absolute;
    content: "";
    width: 23%;
    height: 0;
    margin: 5% 0 0 0;
}

.service_box a,
.service_box_ft a {
    display: inline-block;
    height: 100%;
    width: 100%;
    padding: 5% 5%;
}

.service_box img,
.service_box_ft img {
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.service_box h4,
.service_box_ft h4 {
    margin-bottom: 5%;
    font-weight: 900;
    color: #333;
    font-family: serif;
}

.service_box p,
.service_box_ft p {
    font-size: 0.95rem;
}

.service_box a:hover,
.service_box_ft a:hover {
    background-color: #EAF8FF;
}

.advertisement {
    position: relative;

}

#service .section_inner::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    background-color: #E2F5FF;
    bottom: 20%;
    right: 20%;
    z-index: -1;
}

#service .section_inner::after {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    background-color: #F0F0F0;
    top: 56%;
    left: -4%;
    z-index: -1;
}

.advertisement::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    background-color: #F0F0F0;
    bottom: -9%;
    right: -2%;
    z-index: -1;
}

.advertisement::after {
    position: absolute;
    content: "";
    width: 140px;
    height: 140px;
    background-color: #E2F5FF;
    top: 5%;
    left: -4%;
    z-index: -1;
}





/* ここからworks */
/* worksモーション */
.section_fp_title h2 {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.section_fp_title.isView h2 {
    opacity: 1;
    transform: translateX(0%);
}

.article_content {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .article_content {
    opacity: 1;
    transition-delay: 1.0s;
    transform: translateY(0%);
    transform: rotate(0deg);
}

.desigh_btn {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.isView .desigh_btn {
    opacity: 1;
    transform: translateX(0%);
}
.article_content .article_title h3 a{
    font-size: 0.9rem;
}


/* worksモーション */
#works {
    width: 100%;
    margin-top: 300px;
}

.article_lists {
    width: 100%;
}

.article_contents {
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	position: relative;
}

.article_contents::after {
    content: "";
    width: 23.5%;
    height: 0;
    margin: 5% 0 0 0;
}

.article_lists li {
    width: 23%;
    margin: 0 1%;
    margin-bottom: 2%;
    border: 0px solid #003664;
    position: relative;
    background-color: #fff;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
    height: 290px;
}

.article_lists li a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.article_thumbnail {
    width: 100%;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.article_contents li img {
    width: 100%;
    background-size: cover;
    transition: 0.5s;
    background-color: #565352;
}

.article_title {
    margin: -40px auto 0;
    position: relative !important;
    z-index: 20;
    width: 90%;
}

.article_title a {
    position: relative !important;
}
.article_title p{
	font-size: 0.8rem;
}
.article_title h4 {
    background-color: #003664;
    padding: 5px;
    width: 70%;
    text-align: center;
    align-items: center;
    font-size: 0.85rem;
}

.article_title h4 a {
    color: #fff;
	display: inline-block;
	width: 100%;
}

.article_daily {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 5%;
}
.article_view {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    right: 5%;
    text-align: right;
}

.article_contents li:hover {
    animation: hover 1.5s infinite;
    border: 1px solid #003664;
    outline: 1px solid #003664;
    -webkit-animation: hover 1.5s infinite;
    transition-delay: 0.1s;
}

@-webkit-keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

@keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

.article_contents li:hover img {
    transform: scale(1.2);
}

#works .section_inner {
    position: relative
}

#works .section_inner::before {
    position: absolute;
    content: "";
    width: 440px;
    height: 520px;
    background-color: #E2F5FF;
    bottom: -5%;
    left: -15%;
    z-index: -1;
}

#works .section_inner::after {
    position: absolute;
    content: "";
    width: 440px;
    height: 520px;
    background-color: #F0F0F0;
    top: -5%;
    right: -15%;
    z-index: -1;
}

.desigh_btn {
    width: 200px;
    height: 50px;
    border: 1px solid #003664;
    background-color: #fff;
    position: relative;
    text-align: center;
    align-items: center;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
    overflow: hidden;
    transition: transform .3s;
    margin-top: 10px;
}

.desigh_btn a {
    color: #003664;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 50px;
    position: inherit;
    z-index: 2;
}

.desigh_btn:hover a {
    color: #fff;
}

.desigh_btn::before {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: #003664;
    transform-origin: right bottom;
    transform: skewX(30deg) scale(0, 1);
    transition: transform .3s;
    z-index: 0;
}

.desigh_btn:hover::before {
    transform-origin: left bottom;
    transform: skewX(30deg) scale(1, 1);
    opacity: 1;
}

.desigh_btn:hover {
    animation: hover 1.5s infinite;
    border: 1px solid #003664;
    outline: 1px solid #003664;
    -webkit-animation: hover 1.5s infinite;
    transition-delay: 0.1s;
}

@-webkit-keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

@keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}


/* ここからcompany */
/* companyモーション */
.section_fp_title h2 {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.section_fp_title.isView h2 {
    font-family: serif;
    opacity: 1;
    transform: translateX(0%);
}

.company_text {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateX(-10%);
}

.isView .company_text {
    opacity: 1;
    transform: translateX(0%);
}

.article_content {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .article_content {
    opacity: 1;
    transition-delay: 1.0s;
    transform: translateY(0%);
    transform: rotate(0deg);
}

.desigh_btn {
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}

.isView .desigh_btn {
    opacity: 1;
    transform: translateX(0%);
}

.company_img {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .company_img {
    opacity: 1;
    transition-delay: 1.0s;
    transform: translateY(0%);
    transform: rotate(0deg);
}

.company_img::after {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 1.6s;
    transform: translateX(-10%);
}

.isView .company_img::after {
    opacity: 1;
    transform: translateX(0%);
}

/* companyモーション */
#company {
    width: 100%;
    margin-top: 300px;
}
#philosophy {
    width: 100%;
    margin-top: 300px;
}
.company_contents {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.company_text {
    width: 40%;
    margin-top: 5%;
}

.company_text h3 {
    font-size: 1.45rem;
    font-family: serif;
}

.company_text ul {
    margin-top: 5%;
}

.company_text ul li {
    margin-top: 8%;
    padding-left: 13%;
    position: relative;
}

.company_text ul li::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 1px;
    background-color: #565352;
    top: calc(13px - 1px);
    left: 5%;
}

.company_text ul li a {
    background-image: linear-gradient(90deg, #022570, #022570);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    background-position: 0px 25px;
    background-size: 0 2px;
    transition: background-size 0.6s;
}

.company_text ul li a:hover {
    background-size: 100% 2px;
}

.company_img {
    width: 55%;
    position: relative;
}

.company_img img {
    width: 100%;
}

.company_img::after {
    position: absolute;
    content: "";
    background-color: #6D869F;
    width: 550px;
    height: 240px;
    right: -20%;
    bottom: -10%;
    z-index: -1;
}

/* 経営理念 */
.philosophy_box{
    width: 90%;
    margin: 5% auto;
    opacity: 0;
    transition: 0.8s;
    transform: translateX(-10%);
}
.isView .philosophy_box {
    opacity: 1;
    transform: translateX(0%);
    transition-delay: 0.8s;
}
.philosophy_box_title{
    margin-top: 15%;
}
.philosophy_box_title h3{
    color: #063664;
    font-size: 1.5rem;
}
.philosophy_box p{
    line-height: 2.0;
}
.philosophy_box_text{
    margin-top: 2%;
}
.value_area{
    margin-top: 2%;
}
.value_area_title{
    margin-top: 10%;
}
.value_area_title h4{
    margin-bottom: 1%;
    color: #003664;
}
.value_area_text{
    margin-left: 1%;
}
@media screen and (max-width: 1024px) {
    .philosophy_box{
        width: 100%;
        margin: 5% auto;
    }
    .philosophy_box_title h3{
        font-size: 4.0vw;
    }
    .philosophy_box p{
        line-height: 2.0;
        font-size: 3.5vw;
    }
}


/* ここからブログ */
#blog {
    width: 100%;
    margin-top: 300px;
}

#blog .section_inner {
    position: relative
}

#blog .section_inner::before {
    position: absolute;
    content: "";
    width: 440px;
    height: 520px;
    background-color: #E2F5FF;
    top: -5%;
    left: -15%;
    z-index: -1;
}

#blog .section_inner::after {
    position: absolute;
    content: "";
    width: 440px;
    height: 520px;
    background-color: #F0F0F0;
    bottom: -5%;
    right: -15%;
    z-index: -1;
}
#blog_content{
    margin-top: 100px;
}

/* ここからお知らせ */
/* newsモーション */
.news_content {
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .news_content {
    opacity: 1;
    transition-delay: 1.0s;
    transform: translateY(0%);
    transform: rotate(0deg);
}

/* newsモーション */

#news {
    width: 100%;
    margin-top: 300px;
}

.news_list {
    width: 100%;
    margin-top: 30px;
}

.news_contents {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
justify-content: flex-start}

.news_contents li {
    width: 23%;
	margin:1%;
    height: 240px;
    border: 1px solid #565352;
    position: relative;
    overflow: hidden;
    margin-top: 3%;
}

.news_contents::after {
    content: "";
    width: 25%;
    height: 0;
    margin: 5% 0 0 0;
}

.news_contents li a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.news_daily,
.news_title,
.news_text {
    width: 90%;
    margin: 10% auto 0;
}

.news_daily p {
    color: #022570;
    font-weight: bold;
}

.news_contents li h3 {
    font-size: 1.0rem;
}

.news_contents li:hover {
    animation: hover 1.5s infinite;
    border: 1px solid #003664;
    outline: 1px solid #003664;
    -webkit-animation: hover 1.5s infinite;
    transition-delay: 0.1s;
}

@-webkit-keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

@keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

/* ここからお問い合わせ */
#contact {
    width: 100%;
    margin-top: 300px;
}

.contact_bg {
    background: url(./images/contact_footer.png);
    width: 100%;
    background-size: cover;
    position: relative;
    z-index: 0;
}

.contact_bg .section_inner {
    width: 1100px;
    margin: 0 auto;
    padding: 50px 0;
}

.contact_bg::before {
    content: "";
    background-color: #050505;
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
    z-index: 1;
}

.contact_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact_text {
    width: 50%;
    position: inherit;
    z-index: 3;
}

.contact_text p {
    font-size: 1.15rem;
}

.contact_text p {
    color: #fff;
}

.contact_btn_box {
    width: 50%;
    position: relative;
    z-index: 5;
}

.contact_btn_box .desigh_btn {
    margin: 0px auto;
    opacity: 1;
}


/* ここから新しいfooterのcontact */
.contact_box_flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 100;
}

.to_contact {
    width: 45%;
}

.to_job-offer {
    width: 45%;
}

.to_contact h3,
.to_job-offer h3 {
    color: #fff;
    margin-bottom: 5%;
}

.to_contact p,
.to_job-offer p {
    color: #fff;
    margin-bottom: 5%;
    line-height: 2.0;
}

.to_contact .desigh_btn,
.to_job-offer .desigh_btn {
    opacity: 1;
    transform: translateX(0%);
}

/* ここからfooter */
footer {
    background-color: #063664;
    width: 100%;
}

.footer_intro img {
    width: 30%;
    margin-bottom: 5px;
}

footer p {
    color: #fff;
    font-size: 0.8rem;
}

.footer_area {
    padding: 50px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer_left {
    width: 50%;
}

.footer_right {
    width: 50%;
}

.footer_sns {
    margin-top: 20px;
}

.footer_sns ul li {
    margin: 10px 0px;
    padding-left: 0px;
    position: relative;
}

.footer_sns ul li a {
    color: #fff;

}

.logo_li_instagram::before,
.logo_li_facebook::before,
.logo_li_line::before,
.logo_li_tiktok::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
}

.credit a {
    display: inline-block;
    margin-top: 20px;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 30px;
    border-radius: 40px;
    line-height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.credit a:hover {
    color: #003664;
}

.credit a::before {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    content: '';
    width: 90%;
    height: 100%;
    background: #fff;
    transform-origin: right bottom;
    transform: skewX(30deg) scale(0, 1);
    transition: transform .3s;
    z-index: -1;

}

.credit a:hover::before {
    transform-origin: left bottom;
    transform: skewX(30deg) scale(1, 1);
    opacity: 1;
}

.youtube_bn{
	margin-top: 30px;
}
.youtube_bn img{
	transition: 0.5s;
	width: 100%;
}
.youtube_bn img:hover{
	opacity: 0.7;
}
.group_company {
    margin-top: 50px;
}

.group_company h3,
.group_company_info h4,
.group_company_info h5 {
    color: #fff;
}

.group_company_info {
    margin-top: 30px;
}

.group_company_info h5 {
    font-size: 1.15rem;
    margin-top: 5px;
}

footer ul li a {
    color: #fff;
}

.copyright {
    text-align: right;
    width: 100%;
}

.menu_list li {
    margin-top: 18px;
    font-size: 0.9rem;
}

.service_menu_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.service_menu_list {
    margin-left: 5%;
    display: flex;
    flex-wrap: wrap;
    width: 45%;
}

.service_menu_list li {
    width: 100%;
}

.ad_menu_list li {
    width: 100%;
}

.ad_menu_list {
    margin-left: 5%;
}

.company_menu_list {
    margin-left: 5%;
}


/* ここから下層ページ */

/* カスタム投稿サービスページ */
/* カスタム投稿サービスモーション */
.page_title{
    opacity: 0;
    transition: 1.0s;
    transform: translateX(-10%);
}
.page_title.isView{
    opacity: 1;
    transform: translateX(0%);
}
.title_img{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.5s;
}
.title_img.isView{
    opacity: 1;
}
.page_title_bg::after{
    opacity: 0;
    transition: 1.0s;
    transition-delay: 1.0s;
    transform: translateX(-10%);
}
.isView .page_title_bg::after{
    opacity: 1;
    transform: translateX(0%);
}

/* カスタム投稿サービスモーション */

#page_title {
    width: 100%;
}

#page_title .section_inner {
    position: relative;
    height: 500px;
}

.page_title {
    position: absolute;
    top: 60%;
    left: 0;
}

section .post_title {
    color: #333;
    font-family: serif;
    position: relative;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 20px;
}

section .post_title b {
    font-size: 20px;
    font-weight: normal;
}

section .post_title span {
    font-size: 20px;
    padding: 0 40px;
    font-family: serif;
    letter-spacing: normal;
    color: #003664;
    position: relative;
}

section .post_title span::after {
    content: "";
    position: absolute;
    background: url(./images/svg/favicon.svg);
    background-size: cover;
    top: -5px;
    right: 0;
    width: 30px;
    height: 30px;
}

.title_img {
    position: absolute;
    top: 50%;
    right: 0;
}

.page_title_bg {
    width: 100%;
    position: relative;
}

.page_title_bg::after {
    position: absolute;
    content: "";
    background-color: #EAF8FE;
    width: 400px;
    height: 240px;
    right: -20%;
    bottom: -15%;
    z-index: -1;
}

/* feature */
/* featureモーション */
.feature_box h3{
    opacity: 0;
    transition: 1.0s;
    transition-delay: 0.8s;
    transform: translateX(-10%);
}
.isView .feature_box h3{
    opacity: 1;
    transform: translateX(0%);
}
.feature_box_img{
    opacity: 0;
    transition: 1.0s;
    transition-delay: 1.6s;
    transform: translateY(10%);
}
.isView .feature_box_img{
    opacity: 1;
    transform: translateY(0%);
}
.feature_box_text{
    opacity: 0;
    transition: 1.0s;
    transition-delay: 1.6s;
    transform: translateX(-10%);
}
.isView .feature_box_text{
    opacity: 1;
    transform: translateX(0%);
}
/* featureモーション */



#feature{
    width: 100%;
    margin-top: 300px;
}
.feature_box {
    margin-top: 100px;
}

.feature_box h3 span {
    font-size: 40px;
    padding-right: 10px;
    color: #003664;
}

.feature_box_flex {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.feature_box_img {
    width: 45%;
}

.feature_box_img img {
    width: 100%;
}

.feature_box_text {
    width: 50%;
    line-height: 2.5;
}

.feature1,
.feature2,
.feature3,
.feature4 {
    position: relative;
}

.feature1::before,
.feature3::before {
    position: absolute;
    content: "";
    background-color: #6D869F;
    width: 400px;
    height: 240px;
    left: -25%;
    bottom: -15%;
    z-index: -1;
}

.feature2::before,
.feature4::before {
    position: absolute;
    content: "";
    background-color: #EAF8FE;
    width: 400px;
    height: 240px;
    right: -25%;
    bottom: -15%;
    z-index: -1;
}


#advertisement_area {
    margin-top: 300px;
}


/* flow */
/* flowモーション */
.flow_list{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .flow_list{
    opacity: 1;
    transition-delay: 0.8s;
    transform: translateY(0%);
    transform: rotate(0deg);
}
/* flowモーション */
#flow {
    margin-top: 300px;
}

.flow_box_flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

.flow_list {
    width: 18%;
    padding: 1%;
    border: 1px solid #565352;
    text-align: center;
}

.flow_list h3 span {
    font-size: 1.0rem;
    color: #003664;
}

.flow_list h3 {
    font-size: 1.0rem;
    margin-bottom: 10px;
}

.flow_list p {
    font-size: 0.75rem;
}

.flow_list img {
    width: 50%;
    height: 70px !important;
    height: auto;
    margin: 5% auto;
}


/* problem */
/* problemモーション */
.problem_list_box{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
}
.isView .problem_list_box{
    opacity: 1;
    transform: translateY(0%);
}
/* problemモーション */
#problem {
    margin-top: 300px;
}

.problem_list_box {
    margin-top: 70px;
    width: 100%;
    height: 250px;
    position: relative;
}

.problem_list li {
    position: relative;
    padding-left: 35px;
    margin-top: 20px;
    font-size: 1.0rem;
}

.problem_list li::before {
    position: absolute;
    content: "";
    background: url(./images/svg/check.svg);
    background-size: cover;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
}

.problem_person {
    position: absolute;
    right: 10%;
    top: -10%;
    z-index: -100;
}


/* achivement */
/* モーションachivement */
.achivement_box h3{
    opacity: 0;
    transition: 1.0s;
    transition-delay: 0.8s;
    transform: translateX(-10%);    
}
.isView .achivement_box h3 {
    opacity: 1;
    transform: translateX(0%);
}
.achivement_box_text {
    opacity: 0;
    transition: 1.0s;
    transition-delay: 1.6s;
    transform: translateX(-10%);
}
.isView .achivement_box_text {
    opacity: 1;
    transform: translateX(0%);
}
.achivement_img_all {
    opacity: 0;
    transition: 1.0s;
    transition-delay: 1.6s;
    transform: translateY(10%);
}
.isView .achivement_img_all {
    opacity: 1;
    transform: translateY(0%);
}
/* モーションachivement */
#achivement {
    margin-top: 300px;
}

.title_text {
    margin-top: 20px;
    line-height: 2.0rem;
}

.achivement_box {
    margin-top: 80px;
}

.achivement_box h3 span {
    font-size: 40px;
    padding-right: 10px;
    color: #003664;
}

.achivement_box_flex {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.achivement_box_img {
    width: 40%;
}

.achivement_box_img1,
.achivement_box_img2,
.achivement_box_img3 {
    position: relative;
}

.achivement_box_img1 img,
.achivement_box_img2 img,
.achivement_box_img3 img {
    width: 100%;
    height: auto;
}

.achivement_box_img1::after,
.achivement_box_img3::after {
    position: absolute;
    content: "";
    background-color: #6D869F;
    width: 400px;
    height: 240px;
    right: -20%;
    bottom: -15%;
    z-index: -1;
}

.achivement_box_img2::after {
    position: absolute;
    content: "";
    background-color: #EAF8FE;
    width: 400px;
    height: 240px;
    right: -20%;
    bottom: -15%;
    z-index: -1;
}

.achivement_box_text {
    width: 50%;
    line-height: 2.5;
}

.listing_box_img1 {
    width: 30%;
}

.listing_box_img2 {
    width: 40%;
    position: relative;
}

.listing_box_img3 {
    width: 40%;
    position: relative;
}

.listing_box_img2::after {
    position: absolute;
    content: "";
    background-color: #EAF8FE;
    width: 400px;
    height: 240px;
    right: -20%;
    bottom: -15%;
    z-index: -1;
}

.listing_box_img3::after {
    position: absolute;
    content: "";
    background-color: #6D869F;
    width: 400px;
    height: 240px;
    right: -20%;
    bottom: -15%;
    z-index: -1;
}

.achivement_box_img1,
.achivement_box_img2,
.achivement_box_img3 {
    width: 40%;
    position: relative;
}


/* FAQ */
/* FAQモーション */
.faq_box{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
}
.faq_box.isView{
    opacity: 1;
    transform: translateY(0%);
}
/* FAQモーション */
#faq {
    margin-top: 300px;
}

.faq_box {
    margin-top: 50px;
}

.faqs {
    margin-top: 40px;
}

.faqs p {
    font-size: 0.95rem;
}

.faqs p b {
    color: #003664;
    padding-right: 10px;
    line-height: 2.0;
    font-size: 1.5rem;
}



/* company */
/* companyモーション */
.company_menu_list2 li{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
    transform: rotate(-5deg);
}

.isView .company_menu_list2 li{
    opacity: 1;
    transition-delay: 1.0s;
    transform: translateY(0%);
    transform: rotate(0deg);
}
.company_list{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateX(-10%);
}
.company_list.isView{
    opacity: 1;
    transform: translateX(0%);
}
.company_greet_person{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
}
.company_greet_person.isView{
    opacity: 1;
    transform: translateY(0%);
}
.recommendation_person{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateX(-10%);
}
.recommendation_text{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
}
.isView .recommendation_person{
    opacity: 1;
    transform: translateX(0%);
}
.isView .recommendation_text{
    opacity: 1;
    transform: translateY(0%);
}
/* companyモーション */

#company_info {
    width: 100%;
    margin-top: 300px;
}

.company_list {
    width: 100%;
}

.company_list dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.company_list dl dt {
    width: 35%;
    margin-top: 50px;
    padding: 30px 0;
    font-weight: bold;
    border-top: 1px solid #0188ff;
    line-height: 2.0;
}

.company_list dl dd {
    width: 65%;
    margin-top: 50px;
    padding: 30px 0;
    border-top: 1px solid #f5f4f4;
    line-height: 2.0;
}

.company_list dl dd a {
    color: #033e80;
    text-decoration: underline;
}

.company_menu {
    width: 100%;
}

.company_menu_list2 {
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.company_menu_list2 li {
    width: 22%;
}

.company_menu_list2 li {
    width: 23%;
    padding: 2%;
    height: 240px;
    border: 1px solid #565352;
    position: relative;
    overflow: hidden;
    margin-top: 3%;
}

.company_menu_list2 li a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.company_menu_list2 li h3 {
    font-size: 1.2rem;
    color: #003664;
    margin-bottom: 20px;

}

.company_menu_list2 li:hover {
    animation: hover 1.5s infinite;
    border: 1px solid #003664;
    outline: 1px solid #003664;
    -webkit-animation: hover 1.5s infinite;
    transition-delay: 0.1s;
}

@-webkit-keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

@keyframes hover {
    100% {
        outline-color: transparent;
        outline-offset: 12px;
    }
}

#company_info .section_inner {
    position: relative;
}

#company_info .section_inner::before {
    position: absolute;
    content: "";
    width: 200px;
    height: 200px;
    background-color: #E2F5FF;
    top: 17%;
    left: -10%;
    z-index: -1;
}

#company_info .section_inner::after {
    position: absolute;
    content: "";
    width: 130px;
    height: 130px;
    background-color: #F0F0F0;
    bottom: -20%;
    right: -5%;
    z-index: -1;
}


/* 代表挨拶 */
#company_greet {
    width: 100%;
    margin-top: 300px;
}

.company_greet_person {
    width: 75%;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ceo_title {
    width: 60%;
    margin-top: 140px;
}

.ceo_img {
    width: 40%;
    position: relative;
}

.ceo_img img {
    width: 100%;
}

.ceo_title h3 {
    font-size: 1.5rem;
}

.ceo_title p {
    font-size: 1.3rem;
    margin-top: 30px;
    color: #003664;
    line-height: 2.0;
}

.ceo_title p span {
    font-size: 1.1rem;
    color: #565352;
}

.ceo_message {
    margin-top: 100px;
}

.ceo_message p {
    font-size: 1.0rem;
    line-height: 2.5em;
}

.sigh {
    width: 30%;
    margin: 5% 0 0 70%;
    text-align: left;
}

.sigh img {
    width: 100%;
    position: relative;
}

.sp_message_title {
    display: none !important;
}

.ceo_img::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    background-color: #E2F5FF;
    top: 15%;
    left: -15%;
    z-index: -1;
}

.ceo_img::after {
    position: absolute;
    content: "";
    width: 70px;
    height: 70px;
    background-color: #F0F0F0;
    bottom: -10%;
    right: -10%;
    z-index: -1;
}



/* 推薦者のお声 */
#recommendation {
    width: 100%;
    margin-top: 300px;
}

.recommendation_box {
    width: 90%;
    margin: 150px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.recommendation_person {
    width: 45%;
}

.recommendation_person img {
    width: 100%;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
}

.recommendation_text {
    width: 48%;
    margin-top: 5%;
}

.recommendation_text h3 {
    margin-bottom: 30px;
    line-height: 1.7;
}

.recommendation_text h3 span {
    color: #0188ff !important;
}

.recommendation_text p {
    line-height: 2.0;
}

.recommendation_box:nth-child(2n)::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background-color: #E2F5FF;
    top: 10%;
    left: 49.5%;
    z-index: -1;
}

.recommendation_box:nth-child(2n)::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #F0F0F0;
    bottom: -5%;
    right: 5%;
    z-index: -1;
}

.recommendation_box:nth-child(2n+1)::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background-color: #E2F5FF;
    top: 25%;
    left: 49.5%;
    z-index: -1;
}

.recommendation_box:nth-child(2n+1)::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #F0F0F0;
    bottom: 45%;
    right: -1%;
    z-index: -1;
}




/* newsカスタム投稿 */
#news_content {
    width: 100%;
    margin-top: 300px;
}

#page_title {
    width: 100%;
}

#page_title .section_inner {
    position: relative;
    height: 500px;
}

.news_article_title {
    position: absolute;
    top: 50%;
    left: 0;
}

section .news_article_title {
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
    position: relative;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-top: 20px;
}

section .news_article_title b {
    font-size: 1.0rem;
    font-weight: normal;
}

section .news_article_title span {
    font-size: 20px;
    padding: 0 40px;
    font-family: serif;
    letter-spacing: normal;
    color: #003664;
    position: relative;
}

section .news_article_title::after {
    content: "";
    position: absolute;
    background: url(./images/svg/favicon.svg);
    background-size: cover;
    top: -1px;
    right: -40px;
    width: 30px;
    height: 30px;
}

.news_content_box {
    margin-top: 50px;
    line-height: 2.0;
}
.news_content_box a{
	color: #003664;
	text-decoration: underline;
}

.news_content_box h4 {
    margin-top: 30px;
}

.news_content_box h2{
    margin-top: 100px;
}
h3.blog_title{
    margin-top: 100px;
    
}

/* contactカスタム投稿 */
/* contactカスタム投稿モーション */
.contact_message,.contact_type,.contact_type_mail{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateY(10%);
	margin-top:50px !important;
}
.isView .contact_message,.isView .contact_type,.isView .contact_type_mail{
    opacity: 1;
    transform: translateY(0%);
}


/* contactカスタム投稿モーション */

#contact_page {
    width: 100%;
    margin-top: 100px;
}

.contact_message {
    width: 1000px;
    margin: 100px auto;
    text-align: center;
}

.contact_type {
    width: 1000px;
    margin: 100px auto;
    display: flex;
    text-align: center;
}

.tel {
    position: relative;
    padding-left: 100px;
    font-size: 1.4rem;
}

.tel::before {
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/tel.svg);
    width: 30px;
    height: 30px;
    background-size: cover;
    top: 0;
    left: 25%;
}

.contact_type h3 {
    font-size: 1.3rem;
}

.contact_type_mail {
    width: 1000px;
    margin: 100px auto;

}


/* コンタクトフォーム */
.contact_form {
    text-align: left;
    width: 90%;
    margin: 0 auto;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
    padding: 5%;
    position: relative;
    transition: 0.5s;
    transition-delay: 1.0s;
    transform: translate(0px, 50px);
}

/* .contact_form::after{
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 50;
    transition: 0.5s;
    transition-delay: 1.2s;
} */


.contact_form_lr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin-top: 2%;
}

.contact_form_l {
    width: 30%;
    padding: 2% 0 5%;
    position: relative;
    font-weight: bold;
}

.contact_form_l p span {
    background-color: #0188ff;
    color: #fff;
    padding: 4px;
    margin-right: 10px;
    border-radius: 3px;
}

.contact_form_l::before {
    position: absolute;
    content: "";
    width: 50%;
    top: 0;
    left: 0;
    border-top: 1px solid #0188ff;
}

.contact_form_r {
    width: 65%;
    padding-top: 2%;
}

.contact_form_r .wpcf7-form-control {
    padding: 1%;
    width: 100%;
}




.pol_text {
    width: 100%;
    margin: 20px auto;
    padding: 2.5%;
    height: 150px;
    background-color: #ffffff;
    overflow: scroll;
    border: 1px solid #f0f0f0;
}
.pol_text p{
font-size: 0.8rem;
}
.contact_form_btn {
    width: 250px;
    margin: 0 auto;
}

@media (max-width: 768px) {
	.contact_form_btn {
    width: 100%;
    margin: 0;
}
	.contact_form_btn > input[type="submit"] .wpcf7-submit{
		width: 100% !important;
	}
}

.wpcf7-submit {
    color: #fff;
    background-color: #565352;
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
    width: 250px;
    height: 60px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
    margin: 5% auto;
    position: relative;
}

.wpcf7-submit:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 1px;
    margin: auto 0;
    background: #fff;
    transition: 0.3s;
}

.wpcf7-submit:hover {
    color: #E6352F;
    background-color: #fff;
    border: none;
}


/* privacy-policy */
.privacy-policy_content {
    margin: 50px;
}

.privacy-policy_content h3 {
    margin: 10px 0;
    color: #003664;
}

.privacy-policy_content p,
.privacy-policy_content li {
    line-height: 2.0;
}

.privacy-policy_content ul {
    margin: 2% 0 2% 5%;
    list-style: number;
}

/* attention */
#attention{
    width: 100%;
    margin-top: 300px;
}



/* seomeo */
/* seoモーション */
.isView .page_title_seo_bg{
    transform: translateX(0%);

}
.isView .page_title_box{
    transform: translateY(0%);
    opacity: 1;
    -webkit-transform: translateY(0%);
}
.blue_box_w100{
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateX(-100%);
}
.isView .blue_box_w100{
    transform: translateX(0%);
}
.about_box{
    transform: translateY(50px);
    transition: 1.0s;
    transition-delay: 1.6s;
    opacity: 0;
}
.isView .about_box{
    transform: translateY(0%);
    opacity: 1;
}
.seo_listing_difference_bg{
    transition: 0.8s;
    transition-delay: 0.8s;
    transform: translateX(-100%);
}
.isView .seo_listing_difference_bg{
    transform: translateX(0%);
}
.seo_listing_difference_area{
    transform: translateY(50px);
    transition: 1.0s;
    transition-delay: 1.6s;
    opacity: 0;
}
.isView .seo_listing_difference_area{
    transform: translateY(0%);
    opacity: 1;
}
.seo_listing_difference h3{
    transform: translateY(50px);
    transition: 1.0s;
    transition-delay: 1.6s;
    opacity: 0;
}
.isView .seo_listing_difference h3{
    transform: translateY(0%);
    opacity: 1;
}
.flow_box_area{
    transform: translateY(-50px);
    transition: 1.0s;
    transition-delay: 0.8s;
    opacity: 0;
}
.isView .flow_box_area{
    transform: translateY(0%);
    opacity: 1;
}
.price_box{
    transform: translateY(50px);
    transition: 1.0s;
    transition-delay: 0.8s;
    opacity: 0;
}
.isView .price_box{
    transform: translateY(0%);
    opacity: 1;
}
/* seoモーション */

#why{
    width: 100%;
    margin-top: 300px;
}
#page_title_lp{
    margin-top: 150px;
}
.page_title_seo_bg{
    background-color: #D8EDFD;
    position: absolute;
    content: "";
    width: 100%;
    height: 450px;
    top: 150px;
    left: 0;
    transition: 0.8s;
    transform: translateX(-100%);
}
.page_title_seo_bg.glay{
    background-color: #EFEFEF;
    z-index: -1;
}
.page_title_sub{
    font-size: 1.2rem;
}
.page_title_sub b span{
    color: #D38E00;
}
.page_title_box{
    padding: 10% 0 3%;
    width: 100%;
    transform: translateY(100px);
    transition: 1.0s;
    transition-delay: 0.8s;
    opacity: 0;
}
.title_img_eyecatch{
    width: 30%;
}
.title_img_eyecatch img{
    width: 100%;
}
#about {
    width: 100%;
    margin-top: 300px;
    position: relative;
}
.blue_box_w100{
    width: 100%;
    display: block;
    background-color: #85B3DD;
    height: 200px;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: -100;
}
.about_box_area{
    margin-top: 50px;
}
.about_box{
    background-color: #EDF6FF;
    padding: 2% 5% 2%;
    width: 45%;
    text-align: center;
    border-radius: 10px;
    position: relative;
}
.about1::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/about_title1.svg);
    width: 90px;
    height: 90px;
    background-size: cover;
    top: -30px;
    left: -20px;
}
.about2::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/about_title2.svg);
    width: 90px;
    height: 90px;
    background-size: cover;
    top: -30px;
    left: -20px;
}
.about_box_img{
    width: 70%;
    margin: 5% auto 0;
}
.about_box_img img{
    width: 100%;
}
.about_title_text{
    line-height: 2.2rem;
    letter-spacing: 1px;
}
.about_title_text h3 span{
    font-weight: bold;
    color: #CE9804;
    font-size: 2.2rem;
}
.feature_box_img.feature_seo{
    width: 40%;
}
.feature_box_text a{
    color: #003664;
    text-decoration: underline;
}
.feature_box_text b{
    color: #003664;
}
.seo_listing_difference_area{
    width: 950px;
    margin: 0 auto;
}
.seo_listing_difference{
    width: 100%;
    padding: 2% 5%;
    margin-top: 5%;
    position: relative;
}
.seo_listing_difference_bg{
    background-color: #F4F4F4;
    position: absolute;
    content: "";
    width: 100%;
    height: 550px;
    top: 0;
    left: 0;
    z-index: -1;
}
.seo_listing_difference h3{
    text-align: center;
    color: #575757;
    margin: 0% 0 1%;
}
.seo_listing_difference_box{
    width: 49%;
    padding: 4% 2%;
    margin-top: 2%;
}
.merit{
    background-color: #D9F2FF;
}
.demerit{
    background-color: #EDD9DE;
}
.seo_listing_difference_box_title{
    text-align: center;
}
.merit h4{
    color: #0B3663;
    position: relative;
    font-size: 1.3rem;
}
.demerit h4{
    color: #A93E54;
    position: relative;
    font-size: 1.3rem;

}
.merit h4::after{
    background: #0B3663;
    position: absolute;
    content: "";
    width: 150px;
    height: 3px;
    top: 30px;
    left: calc( 50% - 75px);
}
.demerit h4::after{
    background: #A93E54;
    position: absolute;
    content: "";
    width: 150px;
    height: 3px;
    top: 30px;
    left: calc( 50% - 75px);
}
.seo_listing_difference_box_text ul{
    margin: 7% auto 0;
    width: 70%;
}
.seo_listing_difference_box_text ul li{
    font-weight: bold;
    margin-top: 1%;
}
/* seo flow */
.flow_box_area{
    width: 900px;
    margin: 0 auto;
}
.flow_box{
    border: 1px solid #575757;
    position: relative;
    margin-top: 70px;
    padding: 5% 3%;
}
.flow_title{
    text-align: center;
    width: 50%;
    margin: 0 auto 20px;
    border-bottom: 1px solid #575757;
    padding: 1% 0 2%;
    font-size: 1.1rem;
}
.flow_box_text{
    width: 95%;
    margin: 0 auto;
    line-height: 2.0;
}
.flow1::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/flow_01.svg)no-repeat top left;
    background-size: cover;
    width: 75px;
    height: 72px;
    top: -15px;
    left: -20px;
}
.flow2::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/flow_02.svg)no-repeat top left;
    background-size: cover;
    width: 75px;
    height: 72px;
    top: -15px;
    left: -20px;
}
.flow3::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/flow_03.svg)no-repeat top left;
    background-size: cover;
    width: 75px;
    height: 72px;
    top: -15px;
    left: -20px;
}
.flow4::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/flow_04.svg)no-repeat top left;
    background-size: cover;
    width: 75px;
    height: 72px;
    top: -15px;
    left: -20px;
}

.flow_box::after{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/svg/flow_allow.svg);
    background-size: cover;
    width: 40px;
    height: 32px;
    bottom: -55px;
    left: calc( 50% - 13px);
}
.flow_box:last-child:after{
    display: none;
}

/* price */
#price{
    width: 100%;
    margin-top: 300px;
}
.price_box{
    background-color: #E9F6FF;
    width: 48%;
    margin-top: 5%;
    padding: 5% 5%;
}
.price_box h3{
    text-align: center;
    margin-bottom: 5%;
    margin-top: -5%;
}
.price_box h4{
    text-align: center;
    letter-spacing: 1px;
}
.price_box p{
    margin-top: 5%;
}
.price_box h4 span{
    color: #FF455D;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0 5px;
}
.price_bg_white{
    background-color: #fff;
    padding: 10%;
    height: 200px;
}


/* フッターバナー */
.footer_banar{
	width:50%;
	margin:20px auto;
}
.footer_banar img{
	width:80%;
	    transition: 0.3s;
}
.footer_banar img:hover{
opacity: 0.7;
}
@media screen and (max-width: 820px) {
	.footer_banar{
	width:100%;
	margin:10px auto;
}
	.footer_banar img{
	width:100%;
}
}

/* リクルート */
#recruit {
    width: 100%;
    margin-top: 300px;
}
.recruit_list {
    width: 100%;
}

.recruit_list dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.recruit_list dl dt {
    width: 20%;
    margin-top: 50px;
    padding: 20px 0;
    font-weight: bold;
    border-top: 1px solid #0188ff;
    line-height: 2.0;
}

.recruit_list dl dd {
    width: 25%;
    margin-top: 50px;
    margin-right: 2%;
    padding: 20px 0;
    border-top: 1px solid #f5f4f4;
    line-height: 2.0;
}

.recruit_list dl dd a {
    color: #033e80;
    text-decoration: underline;
}
#recruit h3{
    margin-top: 50px;
    color: #033e80;

}


.recruit_list2 dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.recruit_list2 dl dt {
    width: 20%;
    margin-top: 50px;
    padding: 20px 0;
    font-weight: bold;
    border-top: 2px solid #0188ff;
    line-height: 2.0;
}

.recruit_list2 dl dd {
    width: 70%;
    margin-top: 50px;
    padding: 20px 0;
    border-top: 1px solid #f5f4f4;
    line-height: 2.0;
}
.recruit_flex_box{
    border-bottom: 1px solid #f5f4f4;
    margin-bottom: 50px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.recruit_flex_title{
    width: 25%;
}
.recruit_flex_text{
    width: 75%;
}
.recruit_flex_title h5{
    font-size: 1.0rem;
}


/* youtubeの埋め込み */
.iframe-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* youtubeの埋め込み */



/* お知らせ記事の画像flex */
.news_flex img{
    width: 25%;
    margin: 2% auto;
}
.menu_flex_img{
	justify-content: space-between;
	margin-top: 3%;
}
.menu_flex_img_content{
	width: 32%;
	text-align: center;
}
.menu_flex_img_content img{
	width: 100%;
}
@media screen and (max-width: 1024px) {
	.news_flex img{
	width: 49%;
	margin: 2% auto;
}
.menu_flex_img_content{
	width: 100%;
}
}



/* 執筆者情報 */
.writer_box{
	/* display: none; */
    width: 800px;
    margin: 2% auto;
    border: 1px solid var(--glay);
    background-color: #f7f7f7;
    padding: 3%;
}
.writer_box_inner{
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.writer_box_inner_img{
    width: 20%;
    text-align: center;
    margin: 0 auto;
}
.writer_box_inner_img img{
    width: 100%;
}
.writer_box_inner_text{
    width: 70%;
    margin: 0 auto;
}
.writer_box_inner_text h5{
    font-size: 1.1rem;
    margin-bottom: 3%;
}
.writer_box_inner_text p{
    font-size: 13px;
}
.share_sns_box{
	/* display: none; */
    width: 800px;
    margin: 5% auto;    
}
.share_sns_box_icon{
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.share_sns_box_icon_text{
    width: 20%;
}
.share_sns_box_icon_text p{
    font-size: 1.5rem;
}
.share_sns_box_icon_btn{
    width: 7%;
}
.share_sns_box_icon button{
    background-color: transparent;
    border: 0;
    width: 30px;
}
.share_sns_box_icon_btn button img{
    width: 100%;
}
@media screen and (max-width: 1100px){
    .share_sns_box_icon{
        width: 100%;
    }
    .writer_box{
        width: 75%;
        margin: 2% auto;
    }
    .writer_box_inner_img{
        width: 100%;
        margin: 5% auto;
    }
    .writer_box_inner_img img{
        width: 50%;
        margin: 0 auto;
    }
    .writer_box_inner_text{
        width: 100%;
        margin: 0 auto;
    }
    .share_sns_box_icon_text{
        width: 35%;
    }
    .share_sns_box_icon_btn {
        width: 10%;
    }    
    .share_sns_box_icon button {
        width: 35px;
    }    
}
@media screen and (max-width: 600px){
    .share_sns_box_icon{
        width: 90%;
    }
    .writer_box{
        width: 90%;
        margin: 2% auto;
    }
	.share_sns_box_icon_text{
    width: 40%;
}
    .share_sns_box_icon_text p {
        font-size: 1.2rem;
    }
	.writer_box_inner_text h5 {
    font-size: 1.0rem;
    margin-bottom: 3%;
}
    .share_sns_box_icon button {
        width: 25px;
    }    
}

/* 執筆者情報 */

/* Youtrubeアカウント運用 */
.center_title{
    text-align: center;
}
section .center_title h2::before {
    display: none;
}
.center_title h2{
    font-size: 1.8rem;
    line-height: 1.4;
    padding-left: 0;
    color: #050505;
    font-weight: bold;
}
.center_title h2 span{
    color: #964C47;
    line-height: 2.0!important;
    font-weight: bold;
}
.center_title h2 b{
    color: #ff0000;
}
.start{
    background-color: #F7F7F7;
    padding: 3% 0;
    margin-top: 3%;
}
.start h3{
    text-align: center;
    color: #0B3663;
    margin-bottom: 5%;
    position: relative;
    font-size: 1.4rem;
}
.start h3::before{
    position: absolute;
    content: "";
    background-color: #0B3663;
    width: 100px;
    height: 3px;
    bottom: -15px;
    left: calc(50% - 50px);
}
.start_problem{
    width: 24%;
    box-shadow: 0px 0px 5px #707070;
    text-align: center;
    padding: 3% 0;
    position: relative;
}
.start_problem::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/problem_check.png);
    background-size: cover;
    width: 20px;
    height: 20px;
    top: -10px;
    left: calc(50% - 10px);
}
.start_problem p{
    line-height: 2.0;
    font-size: 1.4rem;
    font-family: sans-serif;
}
.start_problem p span{
    color: #ff0000;
    font-size: 1.5rem;
    font-family: sans-serif;
    font-weight: bold;

}
.problem_message{
    text-align: center;
    margin-top: 5%;
}
.problem_message p{
    line-height: 2.0;
    font-size: 1.4rem;
}
.problem_message p span{
    color: #ff0000;
}
@media screen and (max-width: 1100px){
    .start_problem {
        width: 47%;
        margin: 2% auto 1%;
    }
    .problem_message {
        width: 90%;
        margin: 5% auto;
    }
}
@media screen and (max-width: 900px){
    .center_title h2{
        font-size: 4.5vw!important;
        line-height: 1.4;
        padding-left: 0!important;
    }
    .start_problem {
        width: 90%;
        margin: 6% auto 1%;
    }
    .start {
        background-color: #F7F7F7;
        padding: 5% 0;
        margin-top: 3%;
    } 
    .problem_message p {
        line-height: 2.0;
        font-size: 3.5vw;
    }
    
    
}

@media screen and (max-width: 600px){
    .center_title h2{
        font-size: 5.0vw!important;
        line-height: 1.4;
        padding-left: 0!important;
    }
    .start_problem {
        width: 90%;
        margin: 6% auto 1%;
    }    
}


#omakase{
    margin-top: 100px;
    background: url(../bigoasis/images/youtube_bg.jpg);
    background-size: cover;
    height: 100%;
    padding: 5% 0;

}
.omakase_inner{
    width: 50%;
    margin: 0 auto;
}
.omakase_inner img{
    width: 100%;
}
.omakase_btn{
    width: 300px;
    height: 60px;
    background-color: #fff;
    text-align: center;
    margin: 5% auto 0;
    border-radius: 50px;
    border: 3px solid #B99854;
    transition: 0.3s;
}
.omakase_btn:hover{
    background-color: #003664;
}
.omakase_btn a{
    display: inline-block;
    width: 100%;
    line-height: 60px;
    color: #063664;
    font-family: sans-serif;
    font-weight: bold;
}
.omakase_btn:hover a{
    color: #fff;
}

#contents{
    margin-top: 0px;
    background-color: #EFF3F7;
    padding: 150px 0 50px 0;
    justify-content: space-between;
}
.contents_box{
    margin-top: 5%;
}
.contents_box_content{
    width: 31%;
    background-color: #fff;
    padding: 2%;
    margin-bottom: 6%;
}
.contents_box_content img{
    width: 100%;
    margin-top: 5%;
}
.contents_box_content h3{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.content01,.content02,.content03,.content04,.content05,.content06{
    position: relative;
}
.content01::before{
    content: "01";
    font-family: sans-serif;
    color: #063664;
    font-size: 3.5rem;
    font-weight: bold;
    top: -3rem;
    left: calc(50% - 1.75rem);
    position: absolute;
}
.content02::before{
    content: "02";
    font-family: sans-serif;
    color: #063664;
    font-size: 3.5rem;
    font-weight: bold;
    top: -3rem;
    left: calc(50% - 1.75rem);
    position: absolute;
}
.content03::before{
    content: "03";
    font-family: sans-serif;
    color: #063664;
    font-size: 3.5rem;
    font-weight: bold;
    top: -3rem;
    left: calc(50% - 1.75rem);
    position: absolute;
}
.content04::before{
    content: "04";
    font-family: sans-serif;
    color: #063664;
    font-size: 3.5rem;
    font-weight: bold;
    top: -3rem;
    left: calc(50% - 1.75rem);
    position: absolute;
}
.content05::before{
    content: "05";
    font-family: sans-serif;
    color: #063664;
    font-size: 3.5rem;
    font-weight: bold;
    top: -3rem;
    left: calc(50% - 1.75rem);
    position: absolute;
}
.content06::before{
    content: "06";
    font-family: sans-serif;
    color: #063664;
    font-size: 3.5rem;
    font-weight: bold;
    top: -3rem;
    left: calc(50% - 1.75rem);
    position: absolute;
}

@media screen and (max-width: 1100px){
    #contents {
        padding: 100px 0 50px 0;
    }
    .contents_box_content {
        width: 48%;
        padding: 2%;
        margin-bottom: 6%;
    }
    .contents_box{
        margin-top: 10%;
    }
    
    
}
@media screen and (max-width: 600px){
    #omakase {
        padding: 10% 0;
    }    
    .omakase_inner {
        width: 100%;
        margin: 0 auto;
    }
    .contents_box_content {
        width: 100%;
        padding: 2%;
        margin-bottom: 6%;
    }
    .contents_box_content {
        width: 100%;
        padding: 2% 5% 5%;
        margin-bottom: 10%;
    }
}




#youtube_feature{
    margin-top: 100px;
}
.reason_box_area{
    width: 100%;
    justify-content: space-between;
    margin-top: 5%;
}
.reason_box{
    width: 95%;
    margin: 0 auto 5%;
    justify-content: space-between;
    align-items: center;
}
.reason_box2{
    flex-direction: row-reverse;
}
.reason_box_img{
    width: 40%;
}
.reason_box_img img{
    width: 100%;
}
.reason_box_text{
    width: 50%;
}
.reason_box_text h3{
    font-size: 1.3rem;
    line-height: 2.0;
    margin-bottom: 10px!important;
}
.reason_box_text h3 span{
    font-size: 1.6rem;
    color: #063664;
    padding-right: 30px;
    position: relative;
}
.reason_box_text h3 span::before{
    position: absolute;
    content: "「";
    font-size: 1.5rem;
    color: #003664;
    top: -15px;
    left: -20px;
}
.reason_box_text h3 span::after{
    position: absolute;
    content: "」";
    font-size: 1.5rem;
    color: #003664;
    bottom: -15px;
    right: 10px;
}
.reason_box_text p{
    line-height: 2.5;
}
@media screen and (max-width: 600px){
    .reason_box_img {
        width: 100%;
    }
    .reason_box_text {
        width: 100%;
    }
    .reason_box_area{
        width: 100%;
        justify-content: space-between;
        margin-top: 10%;
    }
    .reason_box{
        width: 95%;
        margin: 0 auto 5%;
    }
    .reason_box_text {
        width: 100%;
        margin-top: 5%;
    }
    .reason_box {
        width: 95%;
        margin: 0 auto 15%;
    }
}

/* プラン紹介 */
#plan{
    margin-top: 100px;
}
.plan_box_area{
    margin-top: 5%;
    justify-content: space-between;
}
.plan_box{
    width: 31%;
    text-align: center;
    background-color: #EFEFEF;
    padding: 2%;
}
.plan_box_red{
    background-color: #FFE5E3;
    border: 2px solid #ff0000;
    position: relative;
}
.plan_box_red::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/osusume.png);
    background-size: cover;
    width: 100px;
    height: 30px;
    left: calc(50% - 50px);
    top: -15px;
}
.plan_box h3{
    margin-bottom: 10px;
    font-family: sans-serif;
    color: #050505;
}
.plan_box_price{
    background-color: #fff;
    padding: 10px 0;
    margin-bottom: 2px;
}
.plan_box_price p{
    font-size: 1.5rem;
    font-family: sans-serif;
    color: #050505;
}
.plan_box_price p span{
    font-size: 2.5rem;
    font-family: sans-serif;
    font-weight: bold;
    color: #050505;
}
.plan_box_about{
    background-color: #fff;
    padding: 10px 0;
    margin-bottom: 2px;
}
.plan_box_about p{
    font-size: 1.5rem;
    font-family: sans-serif;
    color: #050505;
}
.price_hosoku{
    margin-top: 20px;
    width: 100%;
    text-align: left;
}

@media screen and (max-width: 600px){
    .plan_box{
        width: 100%;
        padding: 5%;
        margin-top: 10%;
    }
}

/* ご依頼からサービス開始までの流れ */
#youtube_management_flow{
    padding: 100px 0;
    background: linear-gradient(180deg, rgb(247, 247, 247), rgb(211, 211, 211));
}
.youtube_management_flow_box{
    align-items: center;
    margin-top: 50px;
    background-color: #fff;
    padding: 5%;
    position: relative;
}
.youtube_management_flow_box::after{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_management_flow_arrow.png);
    background-size: cover;
    width: 40px;
    height: 18px;
    left: calc(50% - 9px);
    bottom: -18px;
}
.youtube_management_flow_box.youtube_management_flow_box_last::after{
    display: none;
}

.youtube_management_flow_box_title{
    width: 30%;
}
.youtube_management_flow_box_title h3{
    padding-left: 75px;
}
.youtube_management_flow_box_text{
    width: 65%;
}
.youtube_management_flow_box_title .flow1,.youtube_management_flow_box_title .flow2,.youtube_management_flow_box_title .flow3,.youtube_management_flow_box_title .flow4,.youtube_management_flow_box_title .flow5,.youtube_management_flow_box_title .flow6{
    position: relative;
}
.youtube_management_flow_box_title .flow1::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_flow1.png);
    background-size: cover;
    top: -11.5px;
    left: 0;
    width: 50px;
    height: 43px;
}
.youtube_management_flow_box_title .flow2::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_flow2.png);
    background-size: cover;
    top: calc(50% - 23px);
    left: 0;
    width: 50px;
    height: 46px;
}
.youtube_management_flow_box_title .flow3::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_flow3.png);
    background-size: cover;
    top: calc(50% - 25px);
    left: 0;
    width: 50px;
    height: 50px;
}
.youtube_management_flow_box_title .flow4::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_flow4.png);
    background-size: cover;
    top: calc(50% - 25px);
    left: 0;
    width: 50px;
    height: 50px;
}
.youtube_management_flow_box_title .flow5::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_flow5.png);
    background-size: cover;
    top: calc(50% - 25px);
    left: 0;
    width: 50px;
    height: 50px;
}
.youtube_management_flow_box_title .flow6::before{
    position: absolute;
    content: "";
    background: url(../bigoasis/images/youtube_flow6.png);
    background-size: cover;
    top: calc(50% - 24px);
    left: 0;
    width: 50px;
    height: 48px;
}

@media screen and (max-width: 900px){
    .youtube_management_flow_box_title h3 {
        padding-left: 8vw;
        font-size: 2.0vw;
    }
    .youtube_management_flow_box_title .flow1::before {
        top: calc(50% - 3vw);
        left: 0;
        width: 7vw;
        height: 6vw;
    }
    .youtube_management_flow_box_title .flow2::before {
        top: calc(50% - 3.25vw);
        left: 0;
        width: 7vw;
        height: 6.5vw;
    }
    .youtube_management_flow_box_title .flow3::before {
        top: calc(50% - 3.5vw);
        left: 0;
        width: 7vw;
        height: 7vw;
    }
    .youtube_management_flow_box_title .flow4::before {
        top: calc(50% - 3.5vw);
        left: 0;
        width: 7vw;
        height: 7vw;
    }
    .youtube_management_flow_box_title .flow5::before {
        top: calc(50% - 3.5vw);
        left: 0;
        width: 7vw;
        height: 7vw;
    }
    .youtube_management_flow_box_title .flow6::before {
        top: calc(50% - 3.5vw);
        left: 0;
        width: 7vw;
        height: 7vw;
    }
    .youtube_management_flow_box {
        margin-top: 5vw;
        padding: 5%;
    }
    @media screen and (max-width: 600px){
        .youtube_management_flow_box_title{
            width: 100%;
        }
        .youtube_management_flow_box_title h3{
            padding-left: 75px;
        }
        .youtube_management_flow_box_text{
            margin-top: 5%;
            width: 100%;
        }
        .youtube_management_flow_box_title h3 {
            padding-left: 10vw;
            font-size: 4vw;
        }
    }
    
}

/* よくあるご質問 */
#youtube_qa{
    margin-top: 100px;
}
.youtube_qa_box{
    margin-top: 5%;
}
.youtube_qa_box .faq {
    margin: 0 0 20px;
}
.youtube_qa_box .faq dt {
    font-size: 18px;
    font-weight: bold;
    background: #F7F7F7;
    padding: 25px 75px 25px 42px;
    margin: 0;
    cursor: pointer;
    position: relative;
}
.youtube_qa_box .faq dt::before{
    position: absolute;
    content: "Q";
    font-size: 2.0rem;
    font-family: serif;
    top: calc(50% - 1.5rem);
    left: 10px;
    color: #063664;
}
.youtube_qa_box .faq dd {
    font-size: 15px;
    padding: 15px 25px 15px 42px;
    margin: 0;
    line-height: 1.6;
    display: none;
    position: relative;
}
.youtube_qa_box .faq dd::before{
    position: absolute;
    content: "A";
    font-size: 2.0rem;
    font-family: serif;
    top: calc(50% - 1.5rem);
    left: 10px;
    color: #964C47;
}
.youtube_qa_box .faq-plus {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    color: #063664;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    text-align: center;
}
@media screen and (max-width: 900px){
.youtube_qa_box .faq dt {
    font-size: 15px;
}
}

.lp_service_bn{
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width: 900px){
	.lp_service_bn{
	width: 100%;
	margin: 0 auto;
}
}

/* 採用活動 */
.movie_container{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-top:50px;
	margin-bottom:70px;
}
.movie_container .iframe-wrap_item{
width:24%;
}

.iframe-wrap_item .iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(1920 / 1080 * 100%) 0 0; /* 高さと横幅の数字には単位は入れません。 */
}
 
.iframe-wrap_item .iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 900px){
	.movie_container .iframe-wrap_item{
width:80%;
		margin:30px auto 0;
}
}

/* 採用ページ　スライドショー */
.gallery_container{
	margin:60px auto 0;
	width:70%;
}
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 900px){
	.gallery_container{
	margin:60px auto 0;
	width:100%;
}
}


/* 沿革 */
#history {
    width: 100%;
    margin-top: 300px;
}
@media(max-width:900px) {
	#history {
    margin-top: 200px;
}
}
.history_list_item{
    margin-top: 50px;
}
.history_list_item_content{
    padding-left: 5%;
    padding-bottom: 80px;
    position: relative;
}
.history_list_item_content::before {
    position: absolute;
    z-index: 2000;
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    content: "";
    border-radius: 10px;
    background-color: #2b73ba;
}
.history_list_item_content::after {
    position: absolute;
    top: 3px;
    left: 0;
    width: 2px;
    height: 100%;
    margin-left: 9px;
    content: "";
    background-color: #2b73ba;
}
p.history_day{
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--blue);
}
p.history_list_text{
    font-size: 1.0rem;
}
#history .history_list_item_content:last-child {
    padding-bottom: 0;
}
@media(max-width:900px) {
    .history_list_item_content {
        padding-left: 40px;
    }
    p.history_list_text{
        font-size: 1.1rem;
    }
}


/* お知らせ　ゴールデンウィークの営業について */

.eigyou_sp{
	display:none;
}
.eigyoubi {
  border-collapse: collapse; 
  width: 100%; 
}

.eigyoubi th, .eigyoubi td {
  border: 1px solid rgb(86, 83, 82); 
  padding: 6px; 
  text-align: center;
}
.eigyoubi th {
  font-size:14px;
}
.eigyoubi td {
  border-top:none;
}
.eigyoubi th {
  background-color: #f2f2f2;
}

.eigyoubi td {
  background-color: #ffffff; /* データ行の背景色を設定 */
}

/* 横並びの表示 */
.eigyoubi th,
.eigyoubi td {
  display: inline-block;
  width: calc(100% / 11); /* 11列で均等幅にする */
  box-sizing: border-box;
}
.eigyoubi .kyuugyou {
	color:red;
}

@media(max-width:900px) {
.eigyou_pc{
	display:none;
}
.eigyou_sp{
	display:block;
}
	
	.eigyou_sp .kyuugyou{
		color:red;
	}
	
}


/*フロートボタン*/

#fixedButton {
    position: fixed;
    bottom: 24%;
    right: 0px;
    cursor: pointer;
    z-index: 1000; 
	  display: none; 
}


.fixed_pc_btn_container{
	display:block;
}
.fixed_pc_btn_container .fixed_pc_btn{
	display:block;
	width:70px;
	margin-bottom:20px;
	    filter: drop-shadow(1px 4px 6px rgba(0, 0, 0, .4));
}
@media(max-width:1600px) {
	#fixedButton {
    bottom: 12%;
}
	.fixed_pc_btn_container .fixed_pc_btn{
	display:block;
	width:55px;
	margin-bottom:20px;
}
}

.fixed_sp_btn_container{
	display:none;
}
#fixedButton a{
	transition:0.2s;
}
#fixedButton a:hover{
	opacity:0.7;
	filter:none;
	transform: translatey(2px);
}
@media(max-width:900px) {
	#fixedButton {
    position: fixed;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
    z-index: 1000; 
	  display: none; 
}
	.fixed_sp_btn_container{
	display:flex;
		justify-content:space-between;
		background:#4ab2d0;
		
}
.fixed_sp_btn_container .fixed_sp_btn{
	display:block;
	width:27%;	
}
	.fixed_sp_btn_container .fixed_sp_btn.top_btn{
	display:block;
	width:19%;	
}
	.fixed_pc_btn_container .fixed_pc_btn{
	display:none;
}
	#fixedButton a:hover{
	filter:none;
	transform: none;
}
}


/* 240808_採用ページリニューアル */
.u-desktop {
		display: block;
	}
	.u-mobile {
		display: none;
	}
@media (max-width: 768px) {
	.u-desktop {
		display: none;
	}
	.u-mobile {
		display: block;
	}
}


.recruit-title{
	text-align: center;
}

h2.recruit-title-en{
	display: inline-block;
	 font-family: "Mohave", sans-serif;
	color: #2663A6;
	letter-spacing: 0.1em;
	padding-left: 0 !important;
	padding-bottom: 10px;
	position: relative;
}
h2.recruit-title-en:after{
	content: '';
	width: 110%;
	height: 2px;
	background:#2663A6; 
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
}

h2.recruit-title-en::before{
	display: none;
}

.recruit-title-ja{
	display: block;
	letter-spacing: 0.2em;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
}

/*message*/
.recruit-message{
	margin-top: 150px;
}

.recruit-message__content{
	margin-top: 40px;
	text-align: center;
	margin-inline: auto;
}

.recruit-message__content img{
	width: 100%;
	object-fit: cover;
}

/*feature*/
.recruit-feature{
	margin-top: 100px;
}

.recruit-feature__items{
	font-family: "Noto Sans JP", sans-serif;
	margin-top: 65px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 70px;
}

.recruit-feature__item{
	font-family: "Noto Sans JP", sans-serif;
	padding-left: 70px;
	counter-increment: mycounter;
	position: relative;
}

.recruit-feature__item:before{
	content: counter(mycounter, decimal-leading-zero);
	color: rgb(0 0 0 / .1);
	font-weight: bold;
	letter-spacing: -0.04em;
	font-size: 70px;
	position: absolute;
	top: -45px;
	left: 7px;
}

.recruit-feature__item-title{
font-family: "Noto Sans JP", sans-serif;
	font-size: 20px;
}

.recruit-feature__item-text{
	margin-top: 12px;
	font-size: 16px;
	line-height: 150%; 
		font-family: "Noto Sans JP", sans-serif;
}

@media (max-width: 768px) {
	.recruit-feature__items{
		margin-top: 60px;
		gap: 50px;
	}
.recruit-feature__item{
padding-left: 50px;
}
	.recruit-feature__item:before{
		font-size: 60px;
		top: -35px;
		left: 2px;
	}
}

/*働く魅力*/
.recruit-position{
	margin-top: 100px;
}

.recruit-position__items{
	margin-top: 35px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.recruit-position__item{
	background: #F3F3F3;
	padding: 20px 46px 35px 54px;
	position: relative;
}

.recruit-position__item:before{
	position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background-color: rgb(38 99 166 / 0.16);
    top: -12px;
	left: 10px;
    z-index: 5;
}

.recruit-position__item-block{
	margin-top: 30px;
}

.recruit-position__item-title{
	font-family: "Noto Sans JP", sans-serif;
	padding-left: 30px;
	font-size: 26px;
	font-weight: 400;
}

.recruit-position__item-subtitle{
	position: relative;
  
}

.recruit-position__item-subtitle:before{
	position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #BCBCBC;
}

.recruit-position__item-subtitle span{
	font-family: "Noto Sans JP", sans-serif;
	background: #F3F3F3;
	position: relative;
  padding: 0 1em 0 0;
}

.recruit-position__item-text,
.recruit-position__item-list{
	font-family: "Noto Sans JP", sans-serif;
	margin-top: 22px;
margin-left: 2.5em;
	font-size: 16px;
	line-height: 150% !important;
}

ul.recruit-position__item-list{
	font-family: "Noto Sans JP", sans-serif;
	list-style-type: disc;
	margin-left: 3.5em;
}



@media (max-width: 768px) {
	.recruit-position__item{
		padding: 20px 30px;
	}
	.recruit-position__item-title{
		padding-left: 5px;
		font-size: 20px;
	}
	.recruit-position__item-text{
		margin-left: 0;
	}
	ul.recruit-position__item-list{
		margin-left: 0;
		list-style-position: inside;
	}
	.recruit-position__item-list-item::marker{
	margin-right: 3px;
	}
}

/*募集要項*/
.recruit-description{
	margin-top: 100px;
}

.recruit-description__block{
	margin-top: 30px;
}
.recruit-description__items{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: 15px;
}
.recruit-description__item{
	margin-top: 15px;
	padding: 28px 20px;
	border-radius: 10px;
	border: solid #A8A8A8 1px;
}

.recruit-description__item-title{
	font-family: "Noto Sans JP", sans-serif;
}

.recruit-description__item-text{
	font-family: "Noto Sans JP", sans-serif;
}

.recruit-description__item--big{
	 grid-row: 2 / span 2;
}

.recruit-description__item-text{
	margin-top: 20px;
}
@media (max-width: 768px) {
	.recruit-description__items{
	display: grid;
	grid-template-columns: repeat(1,1fr);
}
.recruit-description__item--big{
	 grid-row: 3;
}
}


/*会社について*/

.recruit-about{
	margin-top: 100px;
}

.recruit-about__block{
	margin-top: 80px;
}

.recruit-about__items{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
}

.card{
	width: 100%;
	border-radius: 20px;
	border: solid #C1C1C1 1px;
	transition-duration: 0.6s;
}

a.card:hover{
	transform: scale(1.05);
	transition-property: all;
	transition-duration: 0.6s;
	opacity: 0.5;
}

.card__body{
	padding: 30px 20px;
	border-top: solid #C1C1C1 1px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	min-height: 228px;
}
.recruit-about__item figure{
	margin: 0;
}
.card__img img{
	width: 100%;
}
.card__text{
	font-size: 26px;
	font-family: "Noto Sans JP", sans-serif;
}
.card__footer{
	text-align: right;
}

@media (max-width: 768px) {
	.recruit-about__block{
		margin-top: 30px;
	}
	.recruit-about__items{
		grid-template-columns: repeat(1,1fr);
	}
	.recruit-about__item .card__body{
		min-height: 180px;
	}
	.card__text{
		font-size: 20px;
	}
}

/*activity*/
.recruit-activity{
	margin-top: 100px;
}

.recruit-activity__text{
	font-family: "Noto Sans JP", sans-serif;
font-size: 22px;
	margin-top:100px;
	padding-left:60px;
}
.recruit-activity__flex{
	margin-top: 35px;
	width: 90%;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-content: center;
	gap: 120px;
}

.recruit-activity__flex a:hover{
	cursor: pointer;
	opacity: 0.4;
	transition-duration: 0.6s;
}

.recruit-activity__flex figure{
	margin-bottom: 0;
}

.recruit-activity__flex img{
	width: 100%;
	vertical-align: bottom;
	object-fit: cover;
}

.recruit-activity__flex img.--small{
	margin-top: 20px;
}

@media (max-width: 768px) {
	.recruit-activity__text{
		font-size: 18px;
		padding-left:30px;
	}
	.recruit-activity__flex{
	flex-direction: column;
	gap: 50px;
}
	.recruit-activity__flex img{
	width: 100%;
	vertical-align: bottom;
	object-fit: cover;
}
	
	
}

.recruit-gallery{
 margin-top: 100px;
}

.recruit-activity_container{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
  margin-top: 50px;
	gap: 30px;
}
.recruit-activity_container{
  width: 92%;
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
	object-fit: cover;
}

.recruit-activity_container-item blockquote {
  padding: 0;
}

.recruit-activity_container-item blockquote:before {
  display: none;
}



@media (max-width: 768px) {
	.recruit-activity_container {
		flex-direction: column;
	}
	
}


.recruit-contact{
 margin-top: 100px;
}

.recruit-contact.contact_type_mail{
	margin-top: 0 !important;
}



/*TOPページ　video埋め込み*/
/* メイン動画のスタイル */

.video-fixed-container{
    position: fixed;
    bottom: 30px;
    left:0px;
    width: 100%;
    height: auto;
    width: 180px;
    margin: 0 auto;
    padding-top: 56.25%;
    z-index: 2;
}

#mainVideo{
padding-bottom: 30px;
}
.video-container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* コンテナ内に収まるように調整 */
    object-position: bottom; /* 動画を下部に配置 */
}
.clickable-video {
    cursor: pointer; /* クリック可能であることを示す */
}

/* モーダル全体 */
.modal {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 半透明の黒い背景 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* モーダルコンテンツ */
.modal-content {
    position: relative;
    width: 100%; /* コンテンツ全体の幅を画面幅の60%に */
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* スライダー全体 */
.slider-wrapper {
    width: 100%; /* スライダーの幅をモーダルコンテンツに合わせる */
    overflow: hidden; /* スライド外の内容を隠す */
}

.slider {
    display: flex; /* スライドを横並びに配置 */
    transition: transform 0.5s ease-in-out;
    width: 100%; /* スライダー全体の幅 */
}

/* 各スライド */
.slide {
    min-width: 100%; /* 各スライドの幅をスライダーの幅に合わせる */
    flex-shrink: 0; /* スライドの幅が縮まないようにする */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* モーダル内の動画スタイル */
.modal-content video {
    width: 100%; /* 動画の幅をスライド幅に合わせる */
    max-width: 20%; /* 動画の最大幅を画面幅の60%に設定 */
    height: auto; /* アスペクト比を維持 */
    display: block;
    margin: 0 auto;
}

/* ナビゲーションボタン */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7); /* 背景を白の半透明に */
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
    z-index: 1001;
    padding: 10px 15px;
    border-radius: 50%;
}

#prevButton {
    left: 20%;
}

#nextButton {
    right: 20%;
}

.nav-button:hover {
    background: rgba(255, 255, 255, 1); /* 背景を完全な白に */
}

/* 閉じるボタン */
.close-button {
    position: absolute;
    top: 3%;
    right: 20%;
    background: rgba(255, 255, 255, 0.9); /* 背景を白の半透明に */
    border: none;
    font-size: 24px; /* ✕印のサイズ */
    font-weight: bold;
    color: black; /* ✕印の色 */
    cursor: pointer;
    z-index: 1001;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* ボタンを丸くする */
    transition: background 0.3s ease, transform 0.3s ease;
}

/* ホバー時のエフェクト */
.close-button:hover {
    background: rgba(255, 255, 255, 1); /* 背景を完全な白に */
    transform: scale(1.1); /* 少し大きくする */
}





/* スマホ用（600px以下） */
@media screen and (max-width: 600px) {
    .video-fixed-container {
        bottom: 11.5%;
    }

    #mainVideo{
        padding-bottom: 24px;
    }
    .video-fixed-container {
        width: 90px;
        padding-top: 56.25%;
    }

    .slide {
        min-width: 100%;
        width: 100%;
    }
    .modal-content video {
        max-width: 100%;
        width: 70%;
    }
    /* ナビゲーションボタン */
.nav-button {
    top: 50%;
    font-size: 16px;
    padding: 7px 11px;
    border-radius: 50%;
}
#prevButton {
    left: 6%;
}
#nextButton {
    right: 6%;
}
/* 閉じるボタン */
.close-button {
    top: 4%;
    right: 18%;
    font-size: 18px; /* ✕印のサイズ */
    width: 32px;
    height: 32px;
}


}





/* タブレット用（769px〜1024px） */
@media screen and (min-width: 601px) and (max-width: 900px) {
    .video-fixed-container {
        bottom: 16%;
    }

    #mainVideo{
        padding-bottom: 24px;
    }
    .video-fixed-container {
        width: 140px;
        padding-top: 56.25%;
    }

    .slide {
        min-width: 100%;
        width: 100%;
    }
    .modal-content video {
        max-width: 100%;
        width: 66%;
    }
    /* ナビゲーションボタン */
    .nav-button {
        top: 50%;
        font-size: 16px;
        padding: 7px 11px;
        border-radius: 50%;
    }
    #prevButton {
        left: 5%;
    }
    #nextButton {
        right: 5%;
    }
	
    /* 閉じるボタン */
    .close-button {
        top: 4%;
        right: 5%;
        font-size: 18px; /* ✕印のサイズ */
        width: 32px;
        height: 32px;
    }
	
}


 /* 広告運用パッケージ　サブメニュー　一時的に非表示 */
#menu-item-393:hover ul.sub-menu{
	display:none !important;
}
 /* recaptchav3 */
.grecaptcha-badge { 
	visibility: hidden;
}
.recaptcha_text p{
	font-size:13px;
}


 /* TOP お客様の声*/
.top-voice{
	position:relative;
	
}
.top-voice:before{
content: "";
    width: 100%;
    height: 60%;
    position: absolute;
   top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background:#E2F4FF;
	z-index:-10;
}
.top-voice-container{
	margin-top:40px;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.top-voice-container .voice-item{
	width:31%;
	padding:20px 20px;
	 border:solid 2px #6D869F;
	    box-shadow: 3px 3px 0px #6D869F;
	background-color:#fff;
	transition:0.3s;
}
.top-voice-container .voice-item:hover{
	background-color:rgba(234, 248, 255,0.7);
}
.top-voice-container .voice-item .voice-item-flex{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.top-voice-container .voice-item {
	width:32%;
	margin-bottom:20px;
}
.top-voice-container .voice-item .top-voice-ttl{
width:64%;
		order:1;
	font-size:1.1rem;
	color:#D02727;
}
.top-voice-container .voice-item .top-voice-img{
width:32%;
	order:0;
}
.top-voice-container .voice-item img{
	max-width:100%;
}
.top-voice-container .voice-item .top-voice-name{
	font-weight:600;
	text-align:right;
	width:100%;
}
.top-voice-container .voice-item .top-voice-txt{
	margin-top:12px;
}
.top-voice-container .voice-item .top-voice-txt span{
	color:#D02727;
}
.top-voice-btn{
	margin: 0 auto;
	background:#063664;
	border:solid 2px #fff;
	width:350px;
	text-align:center;
	padding:20px 0;
	border-radius:40px;
	font-size:18px;
	    filter: drop-shadow(1px 2px 3px #bfbfbf);
	cursor:pointer;
		    transition: 0.2s;
}
.top-voice-btn a{
	color:#fff ;
}
.top-voice-btn:hover{
    filter: none;
    transform: translatey(2px);
    opacity: 0.7;
	
}
@media screen and (max-width: 900px){
	.top-voice:before{
content: "";
    width: 100%;
    height: 86%;
}
	.top-voice-container{
	margin-top:40px;
}
.top-voice-container .voice-item{
	width:100%;
	padding:20px 20px;
}

.top-voice-container .voice-item .top-voice-ttl{
width:100%;
		order:0;
	font-size:1rem;
	text-align:center;
}
.top-voice-container .voice-item .top-voice-img{
width:70%;
	order:1;
	margin:20px auto;
}
.top-voice-container .voice-item .top-voice-name{
	text-align:center;
	width:100%;
}
.top-voice-container .voice-item .top-voice-txt{
	margin-top:12px;
}
.top-voice-btn{
	width:90%;
}
}
.top-voice2{
		margin:60px auto 0px;

}
.top-voice2 .top-voice2_container{
	position:relative;
}
.top-voice2 picture {
	
}
.top-voice2 picture img{
	max-width:100%;
}
.top-voice2 .top-voice2_container:before{
content: "";
    width: 100%;
    height: 230px;
    position: absolute;
	    top: 50%;
    left: 50%;
	    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.7); 
}

.top-voice2 .top-voice2_container .top-voice2_text{
	position:absolute;
	    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* サイズ指定が必要なら追加 */
	font-size:40px;
	text-align:center;
	    font-family: serif;
	font-weight:600;
	width:100%;
}

.top-voice2 .top-voice2_container .top-voice2_text span{
	    color: #D02727;
		font-size:60px;
	    font-family: serif;
}
@media screen and (max-width: 900px){
.top-voice2 .top-voice2_container:before{
    height: 300px;
}

.top-voice2 .top-voice2_container .top-voice2_text{
	font-size:7vw;
}

.top-voice2 .top-voice2_container .top-voice2_text span{
		font-size:10vw;
}
}


.top_service{
	background:#004383;
	padding:40px 0 30px;
	text-align:center;
}
.top_service_ttl{
	color:#fff;
	font-size:28px;
	text-align:center;
	font-family: serif;
	font-weight:600;
	position:relative;
	margin:0 auto 20px;
	border-bottom:2px solid #fff;
	display:inline-block;
	padding:0 10px 12px;
}
.top_service_ttl:before{
content: "▼";
    position: absolute;
    left: 0px;
	right:0;
	margin:0 auto;
    bottom: -24px;
	font-size:22px;
}
.top_service_flex{
	display:flex;
	align-items: flex-end;
	flex-wrap:wrap;
    justify-content: space-between;
}
.top_service_flex a{
	display:block;
	width:18%;

}
.top_service_flex a.lp-btn-diet{
	width:20%;
}
.top_service_flex a picture img{
	max-width:100%;
		transition-duration: 0.3s;
}

.top_service_flex a picture img:hover{
transform: scale(1.1, 1.1);
	opacity:0.8;
}


@media screen and (max-width: 900px){

.top_service_ttl{
	font-size:23px;
	margin:0 auto 20px;
	border-bottom:2px solid #fff;
	padding:0 8px 10px;
}
.top_service_ttl:before{
content: "▼";
    position: absolute;
    left: 0px;
	right:0;
    bottom: -21px;
	font-size:18px;
}
.top_service_flex a{
	width:100%;
}
.top_service_flex a.lp-btn-diet{
	order:0;
	margin:0 auto 12px;
		width:100%;
}
	.top_service_flex a{
	order:1;
		margin-top:6px;
}
}


/*閉じるボタン*/
.toggle-button {
  position: absolute;
	top:auto;
	bottom:320px;
  right: 10px;
  width: 20px;
  height: 20px;
  font-size: 14px;
  font-weight: bold;
  background-color: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.toggle-button:hover {
  background-color: rgba(0,0,0,0.9);
}
@media screen and (max-width: 900px){
		/*閉じるボタン*/
.toggle-button {
	bottom:245px;
  right: 10px;
  width: 17px;
  height: 17px;
  font-size: 13px;
}

}
@media screen and (max-width: 600px){
		/*閉じるボタン*/
.toggle-button {
	bottom:166px;
  right: 6px;
  width: 16px;
  height: 16px;
  font-size: 12px;
}

}




/*FVのサービスボタン*/
.fv_top_service_container{
    position: absolute;
    top: 50%;
    left: 0px;
    z-index: 3;
}
.fv_top_service_container .top_service_flex a {
   
}

@media screen and (max-width: 820px){
    .fv_top_service_container{
        position: absolute;
        bottom: 10%;
        top:auto;
    }
    .fv_top_service_container .top_service_flex a.lp-btn-diet {
        margin-left:26%;
        margin-right:26%;
    }
    .fv_top_service_container .top_service_flex a{
        width: 48%;
    }
}


@media screen and (max-width: 600px){
    .fv_top_service_container{
        position: absolute;
        top:auto;
        bottom: 10%;
    }
}


/*実績のご紹介一覧のページネーションボタン非表示*/
#works .archive-works-pagination_box{
	display:none;
}