/* ==========================================================================
   Base Styles and Bootstrap Modifications
   ========================================================================== */

html,
input,
select,
textarea {
    color: #595757;
    /*    scroll-behavior: smooth;*/
}

body {
    font-size: 1em;
    line-height: 1.4;
    /* グラデーション20250913 */
    margin: 0;
    min-height: 100vh;
    /* ベースの縦方向グラデーション */
    background: linear-gradient(to bottom, #f8ffff 0%, #dff7f3 40%, #a7d8e9 100%);

    /* にじみを重ねる */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(173, 216, 230, 0.35) 0%, transparent 70%),
        radial-gradient(circle at 40% 70%, rgba(0, 191, 255, 0.25) 0%, transparent 65%),
        radial-gradient(circle at 70% 80%, rgba(64, 224, 208, 0.25) 0%, transparent 60%);
    background-blend-mode: screen;
    background-attachment: fixed; /* PCで奥行きを感じさせる場合 */
    background-repeat: no-repeat;
    background-size: cover;
    }

p{
    line-height: 1.6;
}
/* 余白リセット */

* {
    margin: 0px;
    padding: 0px;
}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #f2c2c9;
    color: #a4003a;
    text-shadow: none;
}

::selection {
    background: #e8d2be;
    color: #232323;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

li {
    list-style-type: none;
}


/* ==========================================================================
   General styles"Avenir Next", Verdana, 
   ========================================================================== */

html,
body {
    height: 100%;
}

body {
    font-family: "ryo-gothic-plusn", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #231815;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.wf-hannari {
    font-family: "Hannari";
}


/*
.col-md-4 {
    padding-bottom: 20px;
}
*/

.row {
    margin-right: -15px;
    /*margin-left: -15px;*/
}

.modal-header {
    background: #151A59;
}

.modal-header h4 {
    color: white;
}

.modal-footer {
    background: #2b2b2b;
}

.navbar-default {
    border-color: transparent;
    background-color: #dadada;
}

.navbar-toggle {
    border-color: transparent;
    border: 0px solid transparent;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    background-color: #16a085;
    color: white;
}

p {
    font-feature-settings: "palt";
}

hr {
    position: relative;
    border: none;
}

hr:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #ccc;
}

a img {
    /*    background: white;*/
}

.odd a img {
    background: #f5f5f5;
}


/* Titles */

h1,
h2,
h3,
h4,
h5,
h6 {
    /*    font-family: "Raleway";*/
    font-weight: 300;
    color: #333;
}

h1.mainTl {
    display: block;
    margin-top: 40px;
}

h2.mainTl {
    display: block;
    margin-top: 40px;
}


/* Paragraph & Typographic */

p {
    line-height: 28px;
    /*    margin-bottom: 25px;*/
}

.centered {
    text-align: center;
}

.paragraph-lead {
    font-size: 20px;
    color: #3498db;
}

strong {
    font-weight: 700;
}

em {
    font-weight: 300;
}

pre {
    background: #ebebeb;
    border: none;
    font-family: "Monaco";
    font-size: 16px;
    color: #666;
    padding: 20px;
    line-height: 28px;
}

small {
    font-size: 12px;
}

blockquote,
blockquote p {
    line-height: 28px;
    color: #999;
    font-weight: 300;
    font-style: italic;
}

blockquote {
    position: relative;
    margin: 0 0 40px -30px;
    padding-left: 30px;
    border-left: 5px solid #3498db;
}

blockquote cite {
    position: absolute;
    bottom: -25px;
    right: 0;
    font-size: 12px;
    font-style: italic;
    color: #333;
    font-weight: 300;
}

blockquote cite:before {
    content: "-- "
}


/* Images */

.overflow-image {
    margin-top: -65px;
}


/* Links */

a {
    color: #3498db;
    word-wrap: break-word;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #c0392b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    font-size: 77%;
}

#page-top a {
    text-decoration: none;
    /*    padding: 10px 0;*/
    text-align: center;
    display: block;
}

#page-top a:hover {
    opacity: 0.7;
}

.mb150 {
    margin-bottom: 150px!important;
}

.mb100 {
    margin-bottom: 100px!important;
}
.mb60 {
    margin-bottom: 60px!important;
}
.mb50 {
    margin-bottom: 50px!important;
}
.mb40 {
    margin-bottom: 40px!important;
}

.mb30 {
    margin-bottom: 30px!important;
}

.pb0 {
    padding-bottom: 0px!important;
}

.pb020 {
    padding-bottom: -20px!important;
}

.mb0 {
    margin-bottom: 0px!important;
}

.mb30 {
    margin-bottom: 30px!important;
}

.ml30 {
    margin-left: 30px!important;
}

.ml40 {
    margin-left: 40px!important;
}

.ml45 {
    margin-left: 45px!important;
}

.ml50 {
    margin-left: 50px!important;
}

.ml60 {
    margin-left: 60px!important;
}

.ml65 {
    margin-left: 65px!important;
}

.pt10 {
    padding-top: 10px!important;
}

.pt30 {
    padding-top: 30px!important;
}

.pt40 {
    padding-top: 40px!important;
}

.mt10 {
    margin-top: 10px!important;
}

.mt20 {
    margin-top: 20px!important;
}

.mt30 {
    margin-top: 30px!important;
}

.mt40 {
    margin-top: 40px!important;
}

.mt50 {
    margin-top: 50px!important;
}

.mt80 {
    margin-top: 80px!important;
}

.mt100 {
    margin-top: 100px!important;
}

.mt150 {
    margin-top: 150px!important;
}


/* =========================================================================
 hide：非表示
------------------------------------------------------------------------- */

.hide {
    display: none;
}

.PChide {
    display: none!important;
}

.PChide2 {
    display: none!important;
}

#MBheader {
    display: none;
}

@media screen and (max-width: 900px) {
    .PCshow {
        display: block;
        display: none;
    }
    .PChide {
        display: block!important;
        display: visible;
    }
    .PChide2 {
        display: visible!important;
    }
}


/* ==========================================================================
   header
   ========================================================================== */

header {
}

#headerwrap {
    display: block;
    margin-top: 0px;
    width: 100%;
}




.logoArea {
    display: flex;
    width: 100%;
    padding-left: 30px;
    margin-bottom: 10px;
    padding-top: 10px;
}

.logoArea p.logoimg {
}

.logoArea p.logoimg img {
    width: 225px;
}

.header_menu_left {
    padding-top: 5px;
}

.header_menu_right ul {
    display: inline-block;
}

.header_menu_left ul li {
    float: left;
    margin-right: 50px;
    font-size: 15px;
}

.header_menu_left ul li a img {
    /*  width: 100%;*/
}

.header_menu_right {
    position: absolute;
    right: 30px;
    display: inline-block;
}

.header_menu_right ul {
    display: flex;
    justify-content:center;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 10px;
}

.header_menu_right ul li {
    margin-left: 20px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    vertical-align: middle;
}

.header_menu_right ul li a {
    color: #231815;
    text-decoration: none;
    display: block;
    transition: 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

.header_menu_right ul li a:hover {
    color: #00a5a8;
}

/* お問い合わせボタンのスタイル */
li.navi-contact a {
    display: inline-block;
    padding: 10px 30px;
    color: #fff !important;
    text-decoration: none;
    transition: background 0.5s ease, color 0.5s ease;
    border-radius: 30px;

    /* 自然なグラデーション（左→右へ滑らかに） */
    background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%);
}

/* hover時：背景だけ暗色にして文字を白へ */
li.navi-contact a:hover {
    background: #231815;
    color: #fff !important;
}


/* 途中から現れるヘッダーメニュー */

#lowMenuwrap,
#lowpageheader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    display: block;
    background: #fff;
    height: 80px;
    z-index: 9999999999;
}

#lowMenuwrap .logoArea,
#lowpageheader .logoArea {
    display: flex;
    width: 100%;
    padding-left: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 10px;
}


.menu-reserve-sp{
    margin-top: 5px;
    margin-right: 10px;
}

.menu-reserve-sp img {
    width: 80%;
}

#lowMenuwrap .header_menu_right ul li a,
#lowpageheader .header_menu_right ul li a {
    color: #231815;
}

#lowMenuwrap .header_menu_right ul li a:hover,
#lowpageheader .header_menu_right ul li a:hover {
    color: #00dc4b;
}







/* ==========================================================================
   Menu Sections
   ========================================================================== */

#menuwrap {
    margin: 40px auto 0px;
    width: 100%;
}

.menuContainer {
    display: block;
    width: 1000px;
    margin: 0 auto;
}

#menutile {
    width: 100%;
}

.item {
    /*  padding: 10px;*/
}

.item:hover {
    opacity: 0.7;
}

#photoMenu {
    max-width: 900px;
}

.photoMenuBtn {
    margin-top: 30px;
}

.photoMenuBtn div {
    display: block;
    margin-bottom: 20px;
}

#photoMenu a:hover {
    opacity: 0.7;
}

.menu01 {
    width: 418px;
    height: 434px;
    margin-right: 3px;
    margin-bottom: 3px;
}

.menu02 {
    width: 147px;
    height: 230px;
    margin-right: 3px;
    margin-bottom: 3px;
}

.menu03 {
    width: 220px;
    height: 230px;
    margin-bottom: 3px;
}

.menu04 {
    width: 207px;
    height: 138px;
    margin-right: 3px;
}

.menu05 {
    width: 297px;
    height: 322px;
    margin-right: 3px;
}

.menu06 {
    width: 220px;
    height: 230px;
}

.menu07 {
    width: 221px;
    height: 136px;
    margin-bottom: 3px;
}

div.menuItem {
    float: left;
    padding: 20px 5px;
}

.btnArea2 {
    display: block;
    float: right;
    margin-top: 18px;
    right: 0;
    width: 160px;
    z-index: 999;
}

.btnArea2 a img {
    width: 160px;
    z-index: 99999999;
}


@media screen and (max-width:9900px) {
    .btnArea2 {
        margin-top: 50px;
    }
}

@media screen and (max-width: 1484px) {
    .btnArea2 {
        margin-top: 50px;
    }
}

@media screen and (min-width:1301px) and ( max-width:1410px) {
    .btnArea2 {
        margin-top: 24px;
    }
}


@media screen and (min-width:1201px) and ( max-width:1300px) {
    .btnArea2 {
        margin-top: 14px;
    }
    @media screen and (max-width: 1158px) {
        .btnArea2 {
            margin-top: 24px;
        }
    }
    ul.topNews {
        display: inline-block;
        margin-top: 20px;
        text-align: left;
        width: 850px;
        /*  height: 90px;*/
        overflow: auto;
    }
    ul.topNews li {
        margin-bottom: 5px;
    }
    ul.topNews li a {
        color: #3498DB;
    }
    span.icon {
        background-repeat: no-repeat;
        background-position: middle;
        vertical-align: middle;
        padding-right: 17px;
    }
    span.iconTel {
        background-image: url('../img/lp/telIcon.svg');
    }
    span.iconFax {
        background-image: url('../img/lp/faxIcon.svg');
    }
    span.iconMail {
        background-image: url('../img/lp/mailIcon.svg');
    }
    /* ==========================================================================
   Image Mask
   ========================================================================== */
    .grid figure {
        text-align: center;
        position: relative;
    }
    .grid figure img {
        /*	width: 100%;*/
        display: block;
        position: relative;
        text-align: center;
    }
    .grid figcaption {
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        color: #fff;
        background: #151A59;
    }
    .grid figcaption h5 {
        margin: 0;
        padding-top: 0px;
        padding-left: 20px;
        padding-bottom: 5px;
        color: #fff;
        font-weight: 700;
        text-align: left;
        letter-spacing: 2px;
    }
    .grid figcaption a {
        text-align: left;
        padding: 5px 10px;
        margin-left: 20px;
        display: inline-block;
        background: #fff;
        color: #151A59;
        font-size: 13px;
    }
    /* Caption Style */
    .mask figure {
        overflow: hidden;
        text-align: center;
    }
    .mask figure img {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
    }
    .no-touch .mask figure:hover img,
    .mask figure.cs-hover img {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    .mask figcaption {
        height: 50px;
        width: 100%;
        top: auto;
        bottom: 0;
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
        -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
        transition: transform 0.4s, opacity 0.1s 0.3s;
    }
    .no-touch .mask figure:hover figcaption,
    .mask figure.cs-hover figcaption {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
        -moz-transition: -moz-transform 0.4s, opacity 0.1s;
        transition: transform 0.4s, opacity 0.1s;
    }
    .mask figcaption a {
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 30px;
    }
    /* ==========================================================================
   Blog Section
   ========================================================================== */
    .blog-bg {
        background: #2b2b2b;
        padding-right: 0px;
        padding-left: 0px;
    }
    .blog-bg h4 {
        color: #333;
        padding-top: 0px;
    }
    .blog-bg h5 {
        color: #333;
        font-size: 13px;
    }
    .blog-content {
        padding-top: 10px;
        background: #f2f2f2;
    }
    /* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
    @media screen and (max-width:900px),
    screen and (max-device-width:900px) {



        div.galleryMenuItem {
            float: left;
            padding: 20px 0px 60px 0px;
            height: 350px;
        }
    }
    /*ノートPC用*/
    @media screen and (max-width: 1380px) {

    }



    /*タブレット用*/
    @media screen and (max-width: 900px) {
        .PCshow {
            display: block;
            display: none;
        }
        .PChide {
            display: block!important;
            display: visible;
        }
        .PChide2 {
            display: visible!important;
        }
        .logoArea {
            display: block;
            text-align: left!important;
            width: 100%;
            margin: 0;
            padding: 0;
            padding-left: 10px;
        }
    }
}

#carouselcarousel-item {
    z-index: 1!important;
}

.carousel-item .img-fluid {
    width: 100%;
    height: auto;
    z-index: 1!important;
}

.carousel-item {
    height: auto;
}

.carousel-item a {
    display: block;
    width: 100%;
}

.carousel-item a:hover {
    /*  opacity: 0.7;*/
}

.carousel-item .show-image {
    display: block;
    width: 100%;
}





/* その他 */


div.aboutMenu {
    margin: 40px 20px 20px 20px;
    background: #00a5a8;
    width: 100%;
    padding: 20px 0px 0px;
    border-radius: 5px;
}

ul.ul_aboutMenu {
    text-align: center;
    display: inline-block;
    padding-inline-start: 0px;
}

ul.ul_aboutMenu li {
    float: left;
    margin: 0;
    vertical-align: middle;
}

ul.ul_aboutMenu li a:hover {
    opacity: 0.7;
}

ul.ul_aboutMenu li img {
    padding: 20px;
}

section#store_gallery {
    margin-top: 100px;
}

section#access_oliva {
    margin-top: 0px;
}

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

        .menu-wrapper-logoarea p.logoimg {
        }

        .menu-wrapper-logoarea p.logoimg img {
            width: 50vw;
        }


    .aboutMenuItem {
        margin-bottom: 20px;
    }
    .aboutMenuItem a img {
        width: 100%;
    }
    div.aboutMenu {
        width: 100%;
        padding: 20px 0px;
        border-radius: 0px;
    }
    ul.ul_aboutMenu {
        text-align: center;
        display: inline-block;
        margin: 0!important;
        padding: 0!important;
    }
    ul.ul_aboutMenu li {
        float: left;
        margin: 0;
        margin-right: 30px;
        vertical-align: middle;
    }
    ul.ul_aboutMenu li img {
        padding: 30px 0;
    }
    ul.ul_aboutMenu li+li {
        border-left: 1px dotted #fff;
        padding-left: 30px;
    }
    ul.ul_aboutMenu li:last-child {
        margin: 0;
        margin-right: 0px;
    }
    p.access_map {
        margin-top: 30px;
    }
    section#access_oliva {
        margin-top: 0px;
        padding-bottom: 10px;
    }
    section#store_gallery {
        margin-top: 60px;
        padding-bottom: 60px;
    }
}


/* =========================================================================
 タブレット用スタイル
------------------------------------------------------------------------- */

@media screen and (max-width:900px) {
    .PCshow {
        display: block;
        display: none!important;
    }
    .PCshow2 {
        display: none!important;
    }
    .PChide {
        display: block;
        display: visible;
    }
    .PChide2 {
        display: visible!important;
    }
    h1.mainTl {
        margin-top: 0px;
    }
    h2.mainTl {
        margin-top: 0px;
    }
    h1.mainTl img {
        width: 85%;
    }
    .logoArea {
        text-align: left;
        width: 100%;
        padding-top: 0px;
        margin-top: 0px;
        padding-bottom: 0px!important;
    }
    #headerwrap {
        display: block;
        margin-top: 0px;
        text-align: left;
        width: 100%;
        overflow: hidden;
    }
    .logoArea p.logoimg {
        position: absolute;
        left: 20px;
        padding-bottom: 10px;
        margin-top: 10px;
    }
    #headerwrap p.logoimg img {
        width: 130px;
    }
    .ul li {
        margin: 0!important;
        margin-right: 5px!important;
        padding-top: 7px!important;
    }
    .socialIcon2 {
        display: none;
    }
    #menuwrap {
        margin: 20px auto 0px;
    }
    .menuContainer {
        width: 100%;
        margin: 0 auto;
    }
    .itemS {}
    #photoMenu {
        text-align: center;
        width: 100%;
        padding: 0 30px;
    }
    #menutile {
        overflow: hidden;
    }
    #menutile div {
        display: inline-block;
        overflow: visible;
    }
    div.menuItem {
        float: left;
        padding: 20px 5px;
    }
    .menuContainer {
        width: 100%;
        margin: 0 auto;
    }
    ul.topNews {
        display: inline-block;
        margin-top: 20px;
        text-align: left;
        width: 100%;
        /*    height: 150px;*/
        overflow: auto;
        padding-right: 35px;
    }
    #information {
        margin-top: 20px;
    }
    #information .row .twitter_area img {
        margin-top: 8px;
        width: 95%;
    }
    h1.infoFlag img {
        width: 166%;
        overflow: hidden;
        text-align: center;
    }
    h1.mainTl img {
        width: 40%;
    }
    ul.side_menu {
        margin-top: 50px;
        margin-left: 0px!important;
    }
    .news-list {
        text-align: left;
        margin-bottom: 40px;
        margin-left: 0px;
    }
    .news_carender {
        margin-top: 0px;
    }
    #page-top {
        position: fixed;
        bottom: 25px;
        right: 10px;
        font-size: 77%;
    }
    #page-top img {
        width: 70%;
    }
    .about_about {
        margin-top: 10px;
    }
    .about_tel {
        margin-top: 20px;
    }
}

@media screen and (min-width:641px) and ( max-width:899px) {
    #sp_fixed_footer {
        display: none!important;
    }
}


/* スマホ用 */

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


    div.footMenu1,
    div.footMenu2 {
        margin-left: 0;
        padding-left: 0;
        text-align: center;
    }
    #information .row .twitter_area img {
        margin-top: 0px;
        width: 95%;
    }
    .gallery_title img {
        width: 70%;
    }
    section#access_oliva .about_ill img {
        width: 70%;
    }
    section#access_oliva .about_ill {
        text-align: center;
        margin-top: -70px;
    }
    .about_img img {
        width: 100%;
    }
    .access_text img {
        width: 100%;
    }
    span.about_ill2 {
        left: 85%;
        top: 0px;
    }
    span.about_ill2 img {
        width: 80%;
    }
    section#about_oliva {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    #sp_fixed_footer {
        background-color: #00a5a8;
        padding: 0 0 0 10px;
        width: 100%;
        z-index: 9999999;
    }
    /*    #sp_fixed_footer{
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999999999;
    }
*/
    p.floatUl {
        display: inline-block;
        margin: 0!important;
        padding: 3px!important;
    }
    p.floatUl a {
        float: left!important;
    }
    a img.float_footer_tel_sp {
        width: 260px;
        margin-right: 10px!important;
    }
    a img.float_footer_contact_sp {
        width: 70px;
    }
    .access_text {
        margin-top: 20px;
    }
}



/* ==========================================================================
     FLOW
     ========================================================================== */

#flow h2.yoyakuBtn {
    display: block;
    margin-bottom: 30px;
}

#flow .col {
    width: 100%;
    padding: 20px 20px 0 20px;
    margin-top: 0;
}

#flow .col dl {
    width: 100%;
}

#flow .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 5px;
    text-align: center!important;
    font-weight: bold!important;
    padding-top: 20px;
}

#flow .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#flow h1.infoFlag {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}


/* ==========================================================================
     PRICE
     ========================================================================== */

#price .col {
    width: 100%;
    padding: 20px 20px 0 20px;
    margin-top: 0;
}

#price .col dl {
    width: 100%;
}

#price .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 25px;
    text-align: center!important;
    font-weight: bold!important;
    padding-top: 20px;
}

#price .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#price h1.infoFlag {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

#price .col dt.plan_753 {
    height: 140px;
}

#price .col dt.plan_option {
    height: 140px;
}

#price .col dt.plan_basic2018 {
    height: 140px;
}

div.otoku {
    display: inline-block;
}

div.otoku img {
    position: relative;
    left: 80%;
    top: 0px;
}

div.otoku2 {
    display: block;
}

div.otoku2 img {
    display: inline-block;
    position: relative;
    left: 33%;
    top: 50px;
}

.newoption {
    position: relative;
}

.newoption img {
    display: inline-block;
    position: absolute;
    top: -115px;
    right: -30px;
}

.sp_mt100 {
    margin-top: 100px;
}

#price .col dl dd dl dt {
    width: 100%;
    clear: both;
    /*  padding-bottom:20px;*/
    text-align: left!important;
    font-weight: normal!important;
    vertical-align: middle;
    line-height: 200%;
}

#price .col dl dd dl dd {
    clear: both;
    width: 100%;
}

#price .col dl dd dl dd img {
    width: 100%;
}

#price .col dl dd dl dd.prImg img {
    width: 100%;
    clear: both;
}

#price .col dd span.prPrice {
    font-weight: bold;
    font-size: 20px;
    line-height: 165%;
}


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

#faq .col {
    width: 100%;
    padding: 20px 20px 0 20px;
    margin-top: 0;
}

#faq .col dl {
    width: 100%;
    margin-bottom: 0!important;
}

#faq .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 0px!important;
    text-align: center!important;
    font-weight: bold!important;
    margin: 0!important;
}

#faq .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#faq h1.infoFlag {
    margin: 0;
}

div.menu label {
    background: #FFF;
    color: #595757;
    padding: 20px 10px;
    display: block;
    margin: 0;
}

div.menu label:hover {
    cursor: pointer;
    /*    background: #f2f2f2;*/
}

div.menu label span.left {
    padding-left: 1.2em;
}

input[type="checkbox"].on-off {
    display: none;
}

.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px dotted;
}

.menu ul:last-child {
    border-bottom: none!important;
}

.menu ul li {
    padding-left: 10px;
    font-size: 14px;
}

.menu ul li span {
    padding-right: 7px;
}

input[type="checkbox"].on-off+ul {
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked+ul {
    height: 100px;
}

input[type="checkbox"].on-off:checked+ul.small {
    height: 150px;
}

input[type="checkbox"].on-off:checked+ul.medium {
    height: 230px;
}

input[type="checkbox"].on-off:checked+ul.large {
    height: 370px;
}


/* ==========================================================================
     ACCESS
     ========================================================================== */

#access {
    padding-right: 20px;
    padding-left: 20px;
}

#access .aboutText {
    padding-right: 20px;
    padding-left: 20px;
}

#access {
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

#access .col {
    width: 100%;
    padding: 20px 30px 0 30px!important;
    margin-top: 0;
}

#access h1.mainTl img {
    width: 100%;
}

#access .col dl {
    width: 100%;
}

#access .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 25px;
    text-align: center!important;
    font-weight: bold!important;
    padding-top: 20px;
}

#access .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#access .col dt.plan_access {
    height: 125px;
}

#access .col dd.ddPrice {
    border-radius: 10px;
    padding: 20px;
}

#access .col dd.ddPrice dl {
    display: inline-block;
    padding-bottom: 20px!important;
}

#access .col dd.ddPrice dl:last-child {
    border-bottom: none;
    margin-bottom: 0px!important;
    padding-bottom: 10px!important;
}

#access .col dd span.prTl {
    font-size: 16px;
    font-weight: bold;
    color: #F2B900;
}

#access .col dd span.kome {
    display: block;
    font-size: 13px;
    line-height: 1.5em!important;
}

#access .col dd span.kome2 {
    display: block;
    font-size: 13px;
    line-height: 2em!important;
}

#access .col dd span.prBold {
    font-size: 16px;
    font-weight: bold;
}

#access .col dd span.bold {
    font-size: 16px;
    font-weight: bold;
}

#access h3.infoFlag {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

span.star img {
    padding-bottom: 5px;
}

#access .col dt.plan_option {
    height: 125px;
}

#access .col dl dd dl dt {
    width: 100%;
    clear: both;
    /*  padding-bottom:20px;*/
    text-align: left!important;
    font-weight: normal!important;
    vertical-align: middle;
    line-height: 200%;
}

#access .col dl dd dl dd {
    clear: both;
    width: 100%;
}

#access .col dl dd dl dd img {
    width: 100%;
}

#access .col dl dd dl dd.prImg {
    margin: 0!important;
    padding: 0!important;
}

#access .col dd span.prPrice {
    font-weight: bold;
    font-size: 20px;
    line-height: 165%;
}

#access .accessMap {
    padding: 0 20px;
    margin-top: 30px!important;
    margin-bottom: 0px!important;
    height: 300px!important;
}


/* ==========================================================================
     CIRCLE
     ========================================================================== */

#circle {
    padding-right: 20px;
    padding-left: 20px;
}

#circle h2.mainTl img {
    width: 85%;
}

#circle h1.infoFlag {
    margin-top: 0px!important;
    margin-bottom: 20px!important;
}

#access .col {
    width: 100%;
    margin: 0;
}

#circle .circleText {
    margin-top: 60px;
    padding-right: 20px;
    padding-left: 20px;
}


/* ==========================================================================
     RESERVATION
     ========================================================================== */

#reservation {
    padding-right: 20px;
    padding-left: 20px;
}

#reservation h1.mainTl img {
    width: 85%;
}

#reservation .col {
    width: 100%;
}

#reservation div.reservationText {
    width: 100%;
    border: 1px dotted;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px!important;
    text-align: center;
}

/*iPhone5用*/
@media screen and (max-width:321px) {
    .PChide2 {
        display: visible!important;
    }
    
    .PChide {
        display: block;
        display: visible!important;
    }
    
    #lowMenuwrap {
        text-align: center;
        padding-top: 30px;
        margin: 0 auto;
    }
    
    #lowMenuwrap ul.lowMenu {
        text-align: center;
        display: inline-block;
        padding-left: 27px!important;
    }
    
    #lowMenuwrap ul.lowMenu a img {
        width: 80%;
    }
    
    #lowMenuwrap ul.lowMenu a:hover {
        opacity: 0.5;
    }
    
    #lowMenuwrap ul.lowMenu li {
        width: 90px;
        float: left;
        margin-right: -5px;
        margin-bottom: 20px;
    }
    
    #lowMenuwrap ul.lowMenu li span.PChide {}
    
    #lowMenuwrap ul.lowMenu li span {
        display: inline-block;
        padding-left: 7px;
    }
    
    #lowMenuwrap ul.lowMenu li:last-child {
        margin-right: 0px;
    }
    
    #lowMenuwrap ul.lowMenu li span.leftTate {
        padding-right: 5px;
    }
    
    .socialIcon2 ul {
        margin-left: 0px;
    }
}
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1100px;
    }
}
.container-fluid {
    padding-left: 0!important;
    padding-right: 0!important;
}
@media screen and (max-width:900px) {

    #navArea {
        display: inline-block;
        z-index: 999999;
    }
    
    h1.lower_mainTl {
        margin-top: -60px;
    }
    
    h1.lower_mainTl img {
        width: 35%;
    }
    
    h1.bringinTl {
        margin-top: 100px;
        margin-bottom: 50px;
    }
    
    h1.bringinTl img {
        width: 35%;
    }
    
    p.lower_text {
        text-align: left;
        font-size: 16px;
        line-height: 2;
        margin: 0px 0 40px;
    }
    
    p.lower_text br {
        display: none;
    }
    
    .lower_plan {
        background-size: 25%;
        margin-top: -20px;
        padding-bottom: 300px;
        margin-bottom: 120px;
    }
    
    .lower_bringin {
        margin-top: -150px;
        padding-bottom: 0px;
        margin-bottom: 50px;
        z-index: 3;
    }
    
    .lower_plan_text {
        margin-top: 20px;
        z-index: 333;
    }
    
    .lower_plan_plan img {
        width: 25%;
    }
    
    .lower_plan_text img {
        width: 100%;
    }
    
    .lower_plan .plan_title {
        display: inline-block;
        margin-top: 50px;
    }
    
    .lower_plan .plan_title img {
        width: 204px;
    }
    
    #lower_gallery {
        margin-top: 0px;
        padding: 0 0 30px 0;
    }
    
    #lower_gallery .gallery_title {
        margin-top: 30px;
    }
    
    #lower_gallery .gallery_title img {
        width: 204px;
    }
    
    .lower_plan_plan {
        margin-top: 20px;
    }
    
    #lower_schedule {
        margin-top: -30px;
    }
    
    #lower_schedule .schedule_title {
        margin-top: 60px;
    }
    
    #lower_schedule .schedule_title img {
        width: 274px;
    }
    
    .gallery_img {
        padding: 20px 0 20px;
    }
    
    .gallery_btn img {
        width: 50%;
    }
    
    h1.about_origin_title {
        margin-top: 50px;
    }
    
    h1.about_origin_title img {
        width: 50%;
    }
    
    .about_origin {
        margin-top: 30px;
    }
    
    .about_origin img {
        width: 100%;
    }
    
    .about_origin_text {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    .about_origin_text img {
        width: 100%;
    }
    
    .smileshuttle_btn {
        margin-top: 30px;
    }
    
    .googlemapArea {
        margin-top: 10px;
    }
    
    .store_access_text img {
        width: 100%;
    }
    
    .store_access {
        margin-top: 50px;
    }
    
    .store_access_text {
        margin-top: 20px;
    }
    
    #navArea {
        z-index: 999999!important;
    }
    
    .toggle_btn {
        z-index: 888888!important;
    }
    
    .carousel {
        z-index: 1!important;
    }
    /* MENU */
    
    section#menu_top .menu_ill {
        text-align: center;
        margin-top: -105px;
    }
    
    section#menu_top .menu_ill img {
        width: 80%;
    }
    
    span.menu_ill3 {
        position: relative;
        display: inline-block;
        left: 90%;
        top: -20px;
    }
    
    span.menu_ill3 img {
        width: 70%;
    }
    
    section#menu_top .menu_catch {
        text-align: center;
        padding-top: 10px;
    }
    
    section#menu_top .menu_catch img {
        width: 70%;
    }
    
    section#menu_top .menu_txt {
        padding-top: 30px;
        padding-left: 0px;
        padding-bottom: 0px;
        font-size: 1em;
        line-height: 2;
        letter-spacing: 2px;
    }
    /* ドライマッサージ */
    
    section#dry_massage {
        margin-top: 40px;
        padding-bottom: 0px;
    }
    
    section#dry_massage .about_ill {
        text-align: center;
        margin-top: -120px;
    }
    
    section#dry_massage .about_ill img {
        width: 90%;
    }
    
    span.menu_ill {
        display: none;
    }
    
    section#dry_massage .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
        text-align: left;
    }
    
    section#dry_massage .menu_img {
        margin-top: 40px;
    }
    /* オイルマッサージ */
    
    section#oil_massage {
        padding-bottom: 0px;
    }
    
    section#oil_massage .about_ill {
        text-align: center;
        margin-top: -120px;
    }
    
    section#oil_massage .about_ill img {
        width: 90%;
    }
    
    section#oil_massage .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
        text-align: left;
    }
    
    section#oil_massage .menu_img {
        margin-top: 40px;
    }
    /* オイルフット */
    
    section#oil_foot {
        padding-bottom: 0px;
    }
    
    section#oil_foot .about_ill {
        text-align: center;
        margin-top: -120px;
    }
    
    section#oil_foot .about_ill img {
        width: 90%;
    }
    
    section#oil_foot .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
        text-align: left;
    }
    
    section#oil_foot .menu_img {
        margin-top: 40px;
    }
    
    .set_200_off {
        margin-top: 0;
    }
    
    .set_200_off img {
        width: 100%;
    }
    /* 鍼灸施術 */
    
    section#acupuncture {
        padding-bottom: 0px;
    }
    
    section#acupuncture .about_ill {
        text-align: center;
        margin-top: -120px;
        margin-left: 0;
    }
    
    section#acupuncture .about_ill img {
        width: 90%;
    }
    
    span.menu_ill {
        display: none;
    }
    
    section#acupuncture .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
        text-align: left;
    }
    
    section#acupuncture .menu_img {
        margin-top: 40px;
    }
    /* エステ */
    
    section#esthetic {
        padding-bottom: 0px;
    }
    
    section#esthetic .about_ill {
        text-align: center;
        margin-top: -120px;
    }
    
    section#esthetic .about_ill img {
        width: 90%;
    }
    
    section#esthetic .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
        text-align: left;
    }
    
    section#esthetic .menu_txt span {
        letter-spacing: 2px;
    }
    
    section#esthetic .menu_img {
        margin-top: 40px;
    }
    /* ヘッドスパ */
    
    section#headspa {
        padding-bottom: 0px;
    }
    
    section#headspa .about_ill {
        text-align: center;
        margin-top: -120px;
    }
    
    section#headspa .about_ill img {
        width: 90%;
    }
    
    section#headspa .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
        text-align: left;
    }
    
    section#headspa .menu_img {
        margin-top: 40px;
    }
    
    section#staff_top .menu_txt br,
    section#menu_top .menu_txt br,
    section#dry_massage .menu_txt br,
    section#oil_massage .menu_txt br,
    section#oil_foot .menu_txt br,
    section#acupuncture .menu_txt br,
    section#esthetic .menu_txt br,
    section#headspa .menu_txt br {
        display: none;
    }
    
    section#dry_massage .menu_img,
    section#oil_massage .menu_img,
    section#oil_foot .menu_img,
    section#acupuncture .menu_img,
    section#esthetic .menu_img,
    section#headspa .menu_img {
        margin-top: 10px;
    }
    
    section#menu_top .menu_points {
        padding-top: 20px;
    }
    /* staff_top*/
    
    section#staff_top {
        display: block;
    }
    
    section#staff_top .staff_ill {
        text-align: center;
        margin-top: -105px;
    }
    
    section#staff_top .staff_ill img {
        width: 80%;
    }
    
    span.menu_ill3 {
        position: relative;
        display: inline-block;
        left: 85%;
        top: -20px;
    }
    
    span.menu_ill3 img {
        width: 70%;
    }
    
    section#staff_top .staff_catch {
        text-align: center;
        padding-top: 10px;
    }
    
    section#staff_top .staff_catch img {
        width: 70%;
    }
    
    section#staff_top .staff_catch2 {
        padding-top: 0px;
    }
    
    section#staff_top .staff_catch2,
    section#staff_top .staff_catch3,
    section#staff_top .staff_catch4 {
        padding-top: 0px;
        text-align: center;
    }
    
    section#staff_top .staff_catch3 img,
    section#staff_top .staff_catch4 img {
        height: 22px;
    }
    
    section#staff_top .staff_txt {
        padding-top: 30px;
        padding-left: 0px;
        padding-bottom: 0px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 2px;
    }
    
    .staff_area {
        margin-top: 20px;
    }
    
    .staff_area2 {
        margin-top: 0px;
        padding: 0;
    }
    
    .staff_message {
        font-size: 1em;
        line-height: 2;
        letter-spacing: 0.5px;
        margin-bottom: 20px;
    }
    
    .staff_area2 .staff_instagram {
        color: #006934;
        font-size: 1em;
        font-weight: bold;
        border-top: #006934 1px solid;
        padding-top: 15px;
    }
    
    .staff_area2 .staff_instagram a {
        color: #006934;
        font-size: 1em;
    }
    
    .staff_area2 .staff_instagram br {
        display: block;
    }
    
    .mt40sp {
        margin-top: 40px;
    }
    
    span.staff_ill1 {
        position: relative;
        display: inline-block;
        left: 3%;
        top: 0px;
    }
    
    span.staff_ill2 {
        position: relative;
        display: inline-block;
        left: 85%;
        top: 0px;
    }
    
    span.staff_ill1 img,
    span.staff_ill2 img {
        width: 70%;
    }
    
    .staff_welcome {
        text-align: center;
        margin-top: 100px;
        margin-bottom: 30px;
    }
    
    .staff_welcome img {
        width: 100%;
    }
}

/* ナビ固定 */
.is-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    width: 100%;
}

/*------------------------------

  ここから下がハンバーガーメニュー
  に関するCSS

------------------------------*/
.menu-wrapper {
    position: fixed;
    top: 15px;
    left: 20px;
    z-index: 999999999;

}
.menu-wrapper-logoarea {
    display: flex;
}

.menu-wrapper-logoarea h1 img {
    width: 80%;
}

/* =========================================================
   ハンバーガーメニュー（スマホ版）
   - 円なし
   - 閉：横線2本 + 下に「MENU」
   - 開：×（MENUは残す）
   ========================================================= */

.menu-wrapper {
}
/* トグル本体 */
.menu-wrapper .btn {
  position: fixed;
  top: 10px;           /* 上位置（ロゴとバランス見て調整可） */
  right: 15px;         /* 右位置 */
  width: 44px;         /* タップ領域 */
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 10000000;     /* navより上にして常に前面に表示 */
  transition: background-color 0.3s ease-in-out;
}

/* 共通リセット（閉・開どちらも） */
.menu-wrapper .btn.close {
  top: 10px;
  right: 15px;
  z-index: 100000;     /* 念のため再指定 */
}

/* ===== 線（2本） ===== */
.menu-wrapper .btn .bar {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 1px;
  background-color: #666;
  transform: translateX(-50%);
  transform-origin: center;
  transition: transform .25s ease, top .25s ease, width .25s ease, background-color .25s ease;
}

/* 上線・下線の位置 */
.menu-wrapper .btn .bar-top { top: 12px; }
.menu-wrapper .btn .bar-bottom { top: 20px; }

/* ===== MENUラベル ===== */
.menu-wrapper .btn .menu-label {
  position: absolute;
  top: 30px;               /* 下線のすぐ下に */
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #666;
  pointer-events: none;    /* クリックを邪魔しない */
}

/* ===== 開いた状態（×に変形） ===== */
.menu-wrapper .btn.close .bar-top {
  top: 40%;
  width: 26px;
  transform: translate(-50%, -50%) rotate(30deg);
}

.menu-wrapper .btn.close .bar-bottom {
  top: 40%;
  width: 26px;
  transform: translate(-50%, -50%) rotate(-30deg);
}

/* ===== メニュー本体の重なり順 ===== */
.menu-wrapper .menu-lists {
  position: fixed;
  inset: 0;
  z-index: 99990;          /* ボタンより下にする */
}

/* 背景マスクがある場合 */
#mask {
  z-index: 99980;
}

/* 安全策：親にtransformがある場合の対策 */
.menu-wrapper {
  position: relative;
  z-index: 0;
}





.menu-lists ul {
    display: flex;
}
.menu-lists ul li {
    padding: 10px;
}
.menu-lists ul li.menu-lists-icons {
    margin-top: 15px;
}
.menu-lists ul li.menu-lists-icons a img {
    width: 35px;
}
.menu-lists ul li.menu-lists-icons a.header2_instagram {
    margin-left: 20px;
}


.main {
    padding-top: 80px;
    /*追記*/
    
    height: 1000px;
    /*メインコンテンツを入れた後で消す*/
    
    background: rgb(214, 189, 238);
    /*メインコンテンツを入れた後で消す*/
    
    text-align: center;
    /*メインコンテンツを入れた後で消す*/
    
    z-index: -999;
    /*一番下*/
}
@media (max-width:900px) {
    .btn {
        width: 100%;
        display: block;
        width: 39px;
        height: 42px;
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 9999999994;
        /*追記：いつも一番上*/
    }
    
    
    .bar {
        width: 32px;
        height: 1px;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
    }
    
    #lowMenuwrap .bar {
        background-color: #fff;
    }

    .menu-lists .menu-wrapper-logoarea {
        border-bottom: 1px solid #dbdbdb;
    }

    .menu-lists .menu-wrapper-logoarea .logoimg{
        padding-top: 15px;
        padding-left: 20px;
    }




    .bar-top {
        top: 10px;
    }
    
    .bar-middle {
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    .bar-bottom {
        bottom: 10px;
    }
    
    
    .menu-lists {
        display: none;
        background: #fff;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        text-align: left;
        z-index: 999999999;
    }
    
    

    .set_200_off img {
        width: 65%;
    }
}

/* Newページのスタイリング*/
#hareginonews {
    margin-top: 40px;
    margin-bottom: 300px;
}
.article-content h1 {
    font-size: 2em;
}
.article-content p {
    font-size: 1.2em;
}
.entry-content p.text404 {
    margin-top: 40px;
    font-size: 1.5em;
}
@media (max-width:900px) {
    #hareginonews {
        margin-top: 40px;
        margin-bottom: 150px;
    }
    
    h1.title {
        font-size: 2em;
        font-weight: bold;
    }
    
}



/* iPad対策 */
@media screen and (max-width: 999px) {
}
/* 20210329 */
div.aboutMenu {
    padding: 40px 70px 0 70px;
}
ul.ul_aboutMenu li {}
ul.ul_aboutMenu {}
ul.ul_aboutMenu li img {
    padding: 15px 0;
}
ul.ul_aboutMenu li img.about_about {
    padding: 15px 0 0px 0;
    width: 250px;
    margin-right: 30px;
}
ul.ul_aboutMenu li img.about_tel {
    padding: 15px 0 0px 0;
    width: 290px;
    margin-right: 30px;
}
ul.ul_aboutMenu li img.about_mail {
    width: 190px;
}
ul.ul_aboutMenu li+li {}
@media screen and (max-width:1200px) {
    ul.ul_aboutMenu li img.about_about {
        padding: 15px 0 0px 0;
        width: 250px;
        margin-right: 15px;
    }
    
    ul.ul_aboutMenu li img.about_tel {
        padding: 15px 0 0px 0;
        width: 260px;
        margin-right: 15px;
    }
    
    ul.ul_aboutMenu li img.about_mail {
        width: 190px;
    }
    
    div.aboutMenu {
        padding: 40px 40px 0 40px;
    }
    
    section#menu_top .menu_txt {
        padding-left: 30px;
        padding-bottom: 0px;
        font-size: 1.3em;
        line-height: 2.5;
        letter-spacing: 1.5px;
    }
}
@media screen and (max-width:640px) {
    div.aboutMenu {
        padding: 15px!important;
        text-align: center;
    }
    
    img.about_about {
        padding: 15px 0 0px 0;
        width: 100%!important;
    }
    
    img.about_tel {
        padding: 0px 0 0px 0;
        width: 100%!important;
    }
    
    img.about_mail {
        padding: 15px 0 0px 0;
        width: 50%!important;
    }
    
    section#menu_top .menu_txt {
        padding-left: 0px;
        padding-bottom: 0px;
        font-size: 1em;
        line-height: 2;
        letter-spacing: 2px;
    }
    
    section#oil_massage .about_ill,
    section#oil_foot .about_ill,
    section#dry_massage .about_ill,
    section#acupuncture .about_ill,
    section#esthetic .about_ill,
    section#headspa .about_ill {
        text-align: center;
        margin-top: -60px;
        margin-left: 0;
    }
    
    section#oil_foot .about_ill img {
        width: 70%;
    }
    
    section#esthetic .about_ill img {
        width: 60%;
    }
    
    section#headspa .about_ill img {
        width: 80%;
    }
    
    section#oil_foot .menu_txt,
    section#oil_massage .menu_txt,
    section#staff_top .staff_txt,
    section#dry_massage .menu_txt,
    section#acupuncture .menu_txt,
    section#esthetic .menu_txt,
    section#headspa .menu_txt {
        padding-bottom: 0px;
        padding-top: 15px;
        font-size: 1em;
        line-height: 2;
        letter-spacing: 2px;
        text-align: left;
    }
    
    p.club_btn a img {
        width: 60%;
    }
}

/*　画面サイズが768pxから1024pxまではここを読み込む　*/
@media screen and (min-width:901px) and ( max-width:1283px) {
    .logoArea h1 img {
        /*    width: 95px;*/
    }
    
    .header_menu_left {}
    
    .header_menu_left ul {}
    
    .header_menu_left ul li {
        margin-right: 30px;
    }
    
}
@media screen and (max-width:640px) {
    #headerwrap h1 img {
        width: 130px;
    }
    
    .menu-lists ul li a img.about_sp {
        width: 90px!important;
    }
    
    .menu-lists ul li a img.contact_sp {
        width: 85px!important;
    }
}
@media screen and (max-width:320px) {
    ol.carousel-indicators {
        bottom: -10px;
    }
    
    
    .menu-lists ul li a img.contact_sp {
        width: 80px!important;
    }
        .menu-lists ul {
        margin-top: 40px;
        padding: 25% 0 45px 30%;
        text-align: left;
        display: block;
    }
    
    .menu-lists ul li {
        margin-bottom: 20px;
        font-family: 'Marcellus', serif;
        letter-spacing: 5px;
    }
    
    .menu-lists ul li a {
        color: #0e0000;
        font-size: 18px;
    }
    
    .menu-lists ul li.menu-lists-sns {
        display: inline-block;
    }

    .menu-lists ul li.menu-lists-sns a {
        float: left;
        margin-right: 5px;
    }

    .menu-lists ul li.menu-lists-sns a img{
        height: 20px;
    }

}

/*　パララックス効果　*/
body {
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
    animation: fadeIn 4s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    
    100% {
        opacity: 1
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    
    100% {
        opacity: 1
    }
}

/* ドロップダウンメニュー作成 */
ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.menu>li:hover {
    /*  background: #072A24;*/
    
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* ハンバーガー内調整 */
@media screen and (max-width:375px) {
    nav.menu-lists ul {
        /*  padding-top: 0px;*/
    }
    
    .menu-lists ul li.menu-lists-icons {
        /*    margin-top: 0px;*/
    }
    
    .menu-lists ul li.menu-lists-icons a img {
        width: 30px;
    }
}

/* ハンバーガー内調整 */
@media screen and (max-width:320px) {
    nav.menu-lists ul {
        padding-top: 0px;
    }
    
    .menu-lists ul li a {
        font-size: 16px;
    }

    .menu-lists ul li a img {
        width: 120px;
    }
    
    ul.sp_menu_menu {
        padding: 0px 15px!important;
    }
    
    .menu-lists ul li {
        padding: 12px 0 5px 0;
    }
    
    .menu-lists ul li.menu-lists-icons {
        margin-top: 0px;
    }
    .menu-lists ul li.instaIcon a img {
        width: 70px;
    }}

.close {
    opacity: 1;
}



/* ===== Merged from lp.css ===== */


/* ==========================================================================
   Base Styles and Bootstrap Modifications
   ========================================================================== */

html,
input,
select,
textarea {
    color: #595757;
    /*    scroll-behavior: smooth;*/
    font-feature-settings: "palt";
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    font-size: 1em;
    line-height: 1.4;
    overflow-x: visible!important;
}

/* 余白リセット */

* {
    margin: 0px;
    padding: 0px;
}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #f2c2c9;
    color: #a4003a;
    text-shadow: none;
}

::selection {
    background: #e8d2be;
    color: #232323;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

li {
    list-style-type: none;
}


/* ==========================================================================
   General styles"Avenir Next", Verdana, 
   ========================================================================== */

html,
body {
    height: 100%;
}

html body {
    font-family: "ryo-gothic-plusn", sans-serif;
    font-weight: 400;
    font-size: 13px;
}

body {
    font-family: "ryo-gothic-plusn", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #231815;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.wf-hannari {
    font-family: "Hannari";
}


/*
.col-md-4 {
    padding-bottom: 20px;
}
*/

.row {
    margin-right: -15px;
    /*margin-left: -15px;*/
}

.modal-header {
    background: #151A59;
}

.modal-header h4 {
    color: white;
}

.modal-footer {
    background: #2b2b2b;
}

.navbar-default {
    border-color: transparent;
    background-color: #dadada;
}

.navbar-toggle {
    border-color: transparent;
    border: 0px solid transparent;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    background-color: #16a085;
    color: white;
}

p {
    font-feature-settings: "palt";
}

hr {
    position: relative;
    border: none;
}

hr:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #ccc;
}


a img {
    /*    background: white;*/
}

.odd a img {
    background: #f5f5f5;
}


/* Titles */

h1,
h2,
h3,
h4,
h5,
h6 {
    /*    font-family: "Raleway";*/
    font-weight: 300;
    color: #231f20;
}

h1.mainTl {
    display: block;
    margin-top: 40px;
}

h2.mainTl {
    display: block;
    margin-top: 40px;
}


/* Paragraph & Typographic */

p {
    line-height: 28px;
    /*    margin-bottom: 25px;*/
}

.centered {
    text-align: center;
}

.paragraph-lead {
    font-size: 20px;
    color: #3498db;
}

strong {
    font-weight: 700;
}

em {
    font-weight: 300;
}

pre {
    background: #ebebeb;
    border: none;
    font-family: "Monaco";
    font-size: 16px;
    color: #666;
    padding: 20px;
    line-height: 28px;
}

small {
    font-size: 12px;
}

blockquote,
blockquote p {
    line-height: 28px;
    color: #999;
    font-weight: 300;
    font-style: italic;
}

blockquote {
    position: relative;
    margin: 0 0 40px -30px;
    padding-left: 30px;
    border-left: 5px solid #3498db;
}

blockquote cite {
    position: absolute;
    bottom: -25px;
    right: 0;
    font-size: 12px;
    font-style: italic;
    color: #333;
    font-weight: 300;
}

blockquote cite:before {
    content: "-- "
}


/* Images */

.overflow-image {
    margin-top: -65px;
}


/* Links */

a {
    color: #3498db;
    word-wrap: break-word;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #c0392b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    font-size: 77%;
}

#page-top a {
    text-decoration: none;
    /*    padding: 10px 0;*/
    text-align: center;
    display: block;
}

#page-top a:hover {
    opacity: 0.7;
}

.mb50 {
    margin-bottom: 50px!important;
}

.mb30 {
    margin-bottom: 30px!important;
}

.pb0 {
    padding-bottom: 0px!important;
}

.pb020 {
    padding-bottom: -20px!important;
}

.mb0 {
    margin-bottom: 0px!important;
}

.mb30 {
    margin-bottom: 30px!important;
}

.ml30 {
    margin-left: 30px!important;
}

.ml40 {
    margin-left: 40px!important;
}

.ml45 {
    margin-left: 45px!important;
}

.ml50 {
    margin-left: 50px!important;
}

.ml60 {
    margin-left: 60px!important;
}

.ml65 {
    margin-left: 65px!important;
}

.pt10 {
    padding-top: 10px!important;
}

.pt30 {
    padding-top: 30px!important;
}

.pt40 {
    padding-top: 40px!important;
}

.mt10 {
    margin-top: 10px!important;
}

.mt20 {
    margin-top: 20px!important;
}

.mt30 {
    margin-top: 30px!important;
}

.mt40 {
    margin-top: 40px!important;
}

.mt50 {
    margin-top: 50px!important;
}

.mt80 {
    margin-top: 80px!important;
}

.mt100 {
    margin-top: 100px!important;
}

.mt150 {
    margin-top: 150px!important;
}


/* =========================================================================
 hide：非表示
------------------------------------------------------------------------- */

.hide {
    display: none;
}

.PChide {
    display: none!important;
}

.PChide2 {
    display: none!important;
}

#MBheader {
    display: none;
}

@media screen and (max-width: 900px) {
    .PCshow {
        display: block;
        display: none;
    }
    .PChide {
        display: block!important;
        display: visible;
    }
    .PChide2 {
        display: visible!important;
    }
}






/* ==========================================================================
   Menu Sections
   ========================================================================== */

#menuwrap {
    margin: 40px auto 0px;
    width: 100%;
}

.menuContainer {
    display: block;
    width: 1000px;
    margin: 0 auto;
}

#menutile {
    width: 100%;
}

.item {
    /*  padding: 10px;*/
}

.item:hover {
    opacity: 0.7;
}

#photoMenu {
    max-width: 900px;
}

.photoMenuBtn {
    margin-top: 30px;
}

.photoMenuBtn div {
    display: block;
    margin-bottom: 20px;
}

#photoMenu a:hover {
    opacity: 0.7;
}

.menu01 {
    width: 418px;
    height: 434px;
    margin-right: 3px;
    margin-bottom: 3px;
}

.menu02 {
    width: 147px;
    height: 230px;
    margin-right: 3px;
    margin-bottom: 3px;
}

.menu03 {
    width: 220px;
    height: 230px;
    margin-bottom: 3px;
}

.menu04 {
    width: 207px;
    height: 138px;
    margin-right: 3px;
}

.menu05 {
    width: 297px;
    height: 322px;
    margin-right: 3px;
}

.menu06 {
    width: 220px;
    height: 230px;
}

.menu07 {
    width: 221px;
    height: 136px;
    margin-bottom: 3px;
}

div.menuItem {
    float: left;
    padding: 20px 5px;
}

.btnArea2 {
    display: block;
    float: right;
    margin-top: 18px;
    right: 0;
    width: 160px;
    z-index: 999;
}

.btnArea2 a img {
    width: 160px;
    z-index: 99999999;
}


@media screen and (max-width:9900px) {
    .btnArea2 {
        margin-top: 50px;
    }
}

@media screen and (max-width: 1484px) {
    .btnArea2 {
        margin-top: 50px;
    }
}

@media screen and (min-width:1301px) and ( max-width:1410px) {
    .btnArea2 {
        margin-top: 24px;
    }
}

@media screen and (max-width: 1300px) {
    #lowMenuwrap ul.lowMenu a img {
        width: 70%;
    }
    #lowMenuwrap ul.lowMenu a:hover {}
    #lowMenuwrap ul.lowMenu ul {
        float: left;
        margin-right: 0px;
    }
    #lowMenuwrap ul.lowMenu li {
        float: left;
        margin-right: 10px;
    }
    #lowMenuwrap ul.lowMenu2 li {
        margin-right: 10px;
    }
    .btnArea2 {
        margin-top: 20px;
    }
    #lowMenuwrap ul.lowMenu2 li a.header2_tel img {
        width: 60%;
    }
}

@media screen and (min-width:1201px) and ( max-width:1300px) {
    .btnArea2 {
        margin-top: 14px;
    }
    @media screen and (max-width: 1158px) {
        .btnArea2 {
            margin-top: 24px;
        }
    }
    @media screen and (max-width: 1308px) {
        #lowMenuwrap ul.lowMenu a img {
            width: 90%;
        }
        #lowMenuwrap ul.lowMenu2 li:last-child {
            width: 19%;
        }
        #lowMenuwrap ul.lowMenu2 li a.header2_tel img {
            width: 70%;
        }
    }
    @media screen and (max-width: 1200px) {
        #lowMenuwrap ul.lowMenu li {
            float: left;
            margin-right: 15px;
        }
        #lowMenuwrap ul.lowMenu2 li:last-child {
            width: 10%;
        }
        #lowMenuwrap ul.lowMenu2 li a.header2_tel img {
            width: 100%;
        }
    }
    @media screen and (max-width: 1000px) {
        #lowMenuwrap ul.lowMenu {
            margin-left: 10px!important;
        }
        #lowMenuwrap ul.lowMenu a img {
            width: 80%;
        }
        #lowMenuwrap ul.lowMenu li {
            margin-right: 0px;
        }
        #lowMenuwrap ul.lowMenu2 li a.header2_tel img {
            width: 100%;
        }
        #lowMenuwrap ul.lowMenu2 li {
            margin-right: 0px;
            display: inline-block;
        }
        #lowMenuwrap ul.lowMenu2 li a.header2_instagram img,
        #lowMenuwrap ul.lowMenu2 li a.header2_twitter img {
            margin: 0;
            width: 70%;
        }
        #lowMenuwrap ul.lowMenu2 li:last-child {
            width: 15%;
        }
    }
    ul.topNews {
        display: inline-block;
        margin-top: 20px;
        text-align: left;
        width: 850px;
        /*  height: 90px;*/
        overflow: auto;
    }
    ul.topNews li {
        margin-bottom: 5px;
    }
    ul.topNews li a {
        color: #3498DB;
    }
    span.icon {
        background-repeat: no-repeat;
        background-position: middle;
        vertical-align: middle;
        padding-right: 17px;
    }
    span.iconTel {
        background-image: url('../img/lp/telIcon.svg');
    }
    span.iconFax {
        background-image: url('../img/lp/faxIcon.svg');
    }
    span.iconMail {
        background-image: url('../img/lp/mailIcon.svg');
    }
    /* ==========================================================================
   Image Mask
   ========================================================================== */
    .grid figure {
        text-align: center;
        position: relative;
    }
    .grid figure img {
        /*	width: 100%;*/
        display: block;
        position: relative;
        text-align: center;
    }
    .grid figcaption {
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        color: #fff;
        background: #151A59;
    }
    .grid figcaption h5 {
        margin: 0;
        padding-top: 0px;
        padding-left: 20px;
        padding-bottom: 5px;
        color: #fff;
        font-weight: 700;
        text-align: left;
        letter-spacing: 2px;
    }
    .grid figcaption a {
        text-align: left;
        padding: 5px 10px;
        margin-left: 20px;
        display: inline-block;
        background: #fff;
        color: #151A59;
        font-size: 13px;
    }
    /* Caption Style */
    .mask figure {
        overflow: hidden;
        text-align: center;
    }
    .mask figure img {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
    }
    .no-touch .mask figure:hover img,
    .mask figure.cs-hover img {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    .mask figcaption {
        height: 50px;
        width: 100%;
        top: auto;
        bottom: 0;
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
        -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
        transition: transform 0.4s, opacity 0.1s 0.3s;
    }
    .no-touch .mask figure:hover figcaption,
    .mask figure.cs-hover figcaption {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
        -moz-transition: -moz-transform 0.4s, opacity 0.1s;
        transition: transform 0.4s, opacity 0.1s;
    }
    .mask figcaption a {
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 30px;
    }
    /* ==========================================================================
   Blog Section
   ========================================================================== */
    .blog-bg {
        background: #2b2b2b;
        padding-right: 0px;
        padding-left: 0px;
    }
    .blog-bg h4 {
        color: #333;
        padding-top: 0px;
    }
    .blog-bg h5 {
        color: #333;
        font-size: 13px;
    }
    .blog-content {
        padding-top: 10px;
        background: #f2f2f2;
    }
    /* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
    @media screen and (max-width:900px),
    screen and (max-device-width:900px) {
        div.galleryMenuItem {
            float: left;
            padding: 20px 0px 60px 0px;
            height: 350px;
        }
    }
    /*ノートPC用*/
    @media screen and (max-width: 1380px) {


    }



    /*タブレット用*/
    @media screen and (max-width: 900px) {
        .PCshow {
            display: block;
            display: none;
        }
        .PChide {
            display: block!important;
            display: visible;
        }
        .PChide2 {
            display: visible!important;
        }
        .logoArea {
            display: block;
            text-align: left!important;
            width: 100%;
            margin: 0;
            padding: 0;
            padding-left: 10px;
        }
    }
}

#carouselcarousel-item {
    z-index: 1!important;
}

.carousel-item .img-fluid {
    width: 100%;
    height: auto;
    z-index: 1!important;
}

.carousel-item {
    height: auto;
}

.carousel-item a {
    display: block;
    width: 100%;
}

.carousel-item a:hover {
    /*  opacity: 0.7;*/
}

.carousel-item .show-image {
    display: block;
    width: 100%;
}


@media screen and (max-width:320px) {
    .menu-reserve-sp{
        margin-top: 5px;
        margin-right: 30px;
    }

    a img.float_footer_tel_sp320 {
        width: 210px!important;
        margin-right: 10px!important;
    }
    a img.float_footer_contact_sp320 {
        width: 70px!important;
    }
}



/* =========================================================================
 タブレット用スタイル
------------------------------------------------------------------------- */

@media screen and (max-width:900px) {
    .PCshow {
        display: block;
        display: none!important;
    }
    .PCshow2 {
        display: none!important;
    }
    .PChide {
        display: block;
        display: visible;
    }
    .PChide2 {
        display: visible!important;
    }
    h1.mainTl {
        margin-top: 0px;
    }
    h2.mainTl {
        margin-top: 0px;
    }
    h1.mainTl img {
        width: 85%;
    }
    .logoArea {
        text-align: left;
        width: 100%;
        padding-top: 0px;
        margin-top: 0px;
        padding-bottom: 0px!important;
    }
    body.home header {
        padding-bottom: 0px;
        overflow: hidden;
        z-index: 8888;
        height: 75px;
    }
    header {
        padding-bottom: 0px;
        overflow: hidden;
        height: 0px;
    }
    #headerwrap {
        display: block;
        margin-top: 0px;
        text-align: left;
        width: 100%;
        overflow: hidden;
    }

    #lowMenuwrap,
    #lowpageheader {
        height: 65px;
    }



    .logoArea p.logoimg {
        position: absolute;
        left: 20px;
        padding-bottom: 10px;
        margin-top: 10px;
    }
    #headerwrap p.logoimg img {
        width: 130px;
    }
    .ul li {
        margin: 0!important;
        margin-right: 5px!important;
        padding-top: 7px!important;
    }
    .socialIcon2 {
        display: none;
    }
    #menuwrap {
        margin: 20px auto 0px;
    }
    .menuContainer {
        width: 100%;
        margin: 0 auto;
    }
    .itemS {}
    #photoMenu {
        text-align: center;
        width: 100%;
        padding: 0 30px;
    }
    #menutile {
        overflow: hidden;
    }
    #menutile div {
        display: inline-block;
        overflow: visible;
    }
    div.menuItem {
        float: left;
        padding: 20px 5px;
    }
    .menuContainer {
        width: 100%;
        margin: 0 auto;
    }
    ul.topNews {
        display: inline-block;
        margin-top: 20px;
        text-align: left;
        width: 100%;
        /*    height: 150px;*/
        overflow: auto;
        padding-right: 35px;
    }
    #information {
        margin-top: 20px;
    }
    #information .row .twitter_area img {
        margin-top: 8px;
        width: 95%;
    }
    h1.infoFlag img {
        width: 166%;
        overflow: hidden;
        text-align: center;
    }
    h1.mainTl img {
        width: 40%;
    }
    ul.side_menu {
        margin-top: 50px;
        margin-left: 0px!important;
    }
    .news-list {
        text-align: left;
        margin-bottom: 40px;
        margin-left: 0px;
    }
    .news_carender {
        margin-top: 0px;
    }
}

@media screen and (min-width:641px) and ( max-width:899px) {
    #sp_fixed_footer {
        display: none!important;
    }
}


/* スマホ用 */

@media screen and (max-width:640px) {
    #sp_fixed_footer {
        background-color: #00a5a8;
        padding: 0 0 0 10px;
        width: 100%;
        z-index: 9999999;
    }
    /*    #sp_fixed_footer{
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999999999;
    }
*/
    p.floatUl {
        display: inline-block;
        margin: 0!important;
        padding: 3px!important;
    }
    p.floatUl a {
        float: left!important;
    }
    a img.float_footer_tel_sp {
        width: 260px;
        margin-right: 10px!important;
    }
    a img.float_footer_contact_sp {
        width: 70px;
    }
    .access_text {
        margin-top: 20px;
    }
}



/* ==========================================================================
     FLOW
     ========================================================================== */

#flow h2.yoyakuBtn {
    display: block;
    margin-bottom: 30px;
}

#flow .col {
    width: 100%;
    padding: 20px 20px 0 20px;
    margin-top: 0;
}

#flow .col dl {
    width: 100%;
}

#flow .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 5px;
    text-align: center!important;
    font-weight: bold!important;
    padding-top: 20px;
}

#flow .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#flow h1.infoFlag {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}


/* ==========================================================================
     PRICE
     ========================================================================== */

#price .col {
    width: 100%;
    padding: 20px 20px 0 20px;
    margin-top: 0;
}

#price .col dl {
    width: 100%;
}

#price .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 25px;
    text-align: center!important;
    font-weight: bold!important;
    padding-top: 20px;
}

#price .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#price h1.infoFlag {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

#price .col dt.plan_753 {
    height: 140px;
}

#price .col dt.plan_option {
    height: 140px;
}

#price .col dt.plan_basic2018 {
    height: 140px;
}

div.otoku {
    display: inline-block;
}

div.otoku img {
    position: relative;
    left: 80%;
    top: 0px;
}

div.otoku2 {
    display: block;
}

div.otoku2 img {
    display: inline-block;
    position: relative;
    left: 33%;
    top: 50px;
}

.newoption {
    position: relative;
}

.newoption img {
    display: inline-block;
    position: absolute;
    top: -115px;
    right: -30px;
}

.sp_mt100 {
    margin-top: 100px;
}

#price .col dl dd dl dt {
    width: 100%;
    clear: both;
    /*  padding-bottom:20px;*/
    text-align: left!important;
    font-weight: normal!important;
    vertical-align: middle;
    line-height: 200%;
}

#price .col dl dd dl dd {
    clear: both;
    width: 100%;
}

#price .col dl dd dl dd img {
    width: 100%;
}

#price .col dl dd dl dd.prImg img {
    width: 100%;
    clear: both;
}

#price .col dd span.prPrice {
    font-weight: bold;
    font-size: 20px;
    line-height: 165%;
}


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

#faq .col {
    width: 100%;
    padding: 20px 20px 0 20px;
    margin-top: 0;
}

#faq .col dl {
    width: 100%;
    margin-bottom: 0!important;
}

#faq .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 0px!important;
    text-align: center!important;
    font-weight: bold!important;
    margin: 0!important;
}

#faq .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#faq h1.infoFlag {
    margin: 0;
}

div.menu label {
    background: #FFF;
    color: #595757;
    padding: 20px 10px;
    display: block;
    margin: 0;
}

div.menu label:hover {
    cursor: pointer;
    /*    background: #f2f2f2;*/
}

div.menu label span.left {
    padding-left: 1.2em;
}

input[type="checkbox"].on-off {
    display: none;
}

.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px dotted;
}

.menu ul:last-child {
    border-bottom: none!important;
}

.menu ul li {
    padding-left: 10px;
    font-size: 14px;
}

.menu ul li span {
    padding-right: 7px;
}

input[type="checkbox"].on-off+ul {
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked+ul {
    height: 100px;
}

input[type="checkbox"].on-off:checked+ul.small {
    height: 150px;
}

input[type="checkbox"].on-off:checked+ul.medium {
    height: 230px;
}

input[type="checkbox"].on-off:checked+ul.large {
    height: 370px;
}


/* ==========================================================================
     ACCESS
     ========================================================================== */

#access {
    padding-right: 20px;
    padding-left: 20px;
}

#access .aboutText {
    padding-right: 20px;
    padding-left: 20px;
}

#access {
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

#access .col {
    width: 100%;
    padding: 20px 30px 0 30px!important;
    margin-top: 0;
}

#access h1.mainTl img {
    width: 100%;
}

#access .col dl {
    width: 100%;
}

#access .col dt {
    width: 100%;
    clear: both;
    padding-bottom: 25px;
    text-align: center!important;
    font-weight: bold!important;
    padding-top: 20px;
}

#access .col dd {
    width: 100%;
    clear: both;
    text-align: left!important;
    padding-bottom: 5px;
}

#access .col dt.plan_access {
    height: 125px;
}

#access .col dd.ddPrice {
    border-radius: 10px;
    padding: 20px;
}

#access .col dd.ddPrice dl {
    display: inline-block;
    padding-bottom: 20px!important;
}

#access .col dd.ddPrice dl:last-child {
    border-bottom: none;
    margin-bottom: 0px!important;
    padding-bottom: 10px!important;
}

#access .col dd span.prTl {
    font-size: 16px;
    font-weight: bold;
    color: #F2B900;
}

#access .col dd span.kome {
    display: block;
    font-size: 13px;
    line-height: 1.5em!important;
}

#access .col dd span.kome2 {
    display: block;
    font-size: 13px;
    line-height: 2em!important;
}

#access .col dd span.prBold {
    font-size: 16px;
    font-weight: bold;
}

#access .col dd span.bold {
    font-size: 16px;
    font-weight: bold;
}

#access h3.infoFlag {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

span.star img {
    padding-bottom: 5px;
}

#access .col dt.plan_option {
    height: 125px;
}

#access .col dl dd dl dt {
    width: 100%;
    clear: both;
    /*  padding-bottom:20px;*/
    text-align: left!important;
    font-weight: normal!important;
    vertical-align: middle;
    line-height: 200%;
}

#access .col dl dd dl dd {
    clear: both;
    width: 100%;
}

#access .col dl dd dl dd img {
    width: 100%;
}

#access .col dl dd dl dd.prImg {
    margin: 0!important;
    padding: 0!important;
}

#access .col dd span.prPrice {
    font-weight: bold;
    font-size: 20px;
    line-height: 165%;
}

#access .accessMap {
    padding: 0 20px;
    margin-top: 30px!important;
    margin-bottom: 0px!important;
    height: 300px!important;
}


/* ==========================================================================
     CIRCLE
     ========================================================================== */

#circle {
    padding-right: 20px;
    padding-left: 20px;
}

#circle h2.mainTl img {
    width: 85%;
}

#circle h1.infoFlag {
    margin-top: 0px!important;
    margin-bottom: 20px!important;
}

#access .col {
    width: 100%;
    margin: 0;
}

#circle .circleText {
    margin-top: 60px;
    padding-right: 20px;
    padding-left: 20px;
}


/* ==========================================================================
     RESERVATION
     ========================================================================== */

#reservation {
    padding-right: 20px;
    padding-left: 20px;
}

#reservation h1.mainTl img {
    width: 85%;
}

#reservation .col {
    width: 100%;
}

#reservation div.reservationText {
    width: 100%;
    border: 1px dotted;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px!important;
    text-align: center;
}

/* PC版 */
@media screen and (min-width: 901px) {
    #lowMenuwrap {
        display: flex; /* PC版用 */
        justify-content: space-between;
    }
}

/* SP版 */
@media screen and (max-width: 900px) {
    #lowMenuwrap {
        display: block; /* SP版用 */
    }
}


/*iPhone5用*/
@media screen and (max-width:321px) {
    .PChide2 {
        display: visible!important;
    }
    
    .PChide {
        display: block;
        display: visible!important;
    }
    
    #lowMenuwrap {
        text-align: center;
        padding-top: 30px;
        margin: 0 auto;
    }
    
    #lowMenuwrap ul.lowMenu {
        text-align: center;
        display: inline-block;
        padding-left: 27px!important;
    }
    
    #lowMenuwrap ul.lowMenu a img {
        width: 80%;
    }
    
    #lowMenuwrap ul.lowMenu a:hover {
        opacity: 0.5;
    }
    
    #lowMenuwrap ul.lowMenu li {
        width: 90px;
        float: left;
        margin-right: -5px;
        margin-bottom: 20px;
    }
    
    #lowMenuwrap ul.lowMenu li span.PChide {}
    
    #lowMenuwrap ul.lowMenu li span {
        display: inline-block;
        padding-left: 7px;
    }
    
    #lowMenuwrap ul.lowMenu li:last-child {
        margin-right: 0px;
    }
    
    #lowMenuwrap ul.lowMenu li span.leftTate {
        padding-right: 5px;
    }
    
    .socialIcon2 ul {
        margin-left: 0px;
    }
}
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1040px!important;
    }
}
.container-fluid {
    padding-left: 0!important;
    padding-right: 0!important;
}
@media screen and (max-width:900px) {
    #navArea {
        display: inline-block;
        z-index: 999999;
    }
    
    h1.lower_mainTl {
        margin-top: -60px;
    }
    
    h1.lower_mainTl img {
        width: 35%;
    }
    
    h1.bringinTl {
        margin-top: 100px;
        margin-bottom: 50px;
    }
    
    h1.bringinTl img {
        width: 35%;
    }
    
    p.lower_text {
        text-align: left;
        font-size: 16px;
        line-height: 2;
        margin: 0px 0 40px;
    }
    
    p.lower_text br {
        display: none;
    }
    
    .lower_plan {
        background-size: 25%;
        margin-top: -20px;
        padding-bottom: 300px;
        margin-bottom: 120px;
    }
    
    .lower_bringin {
        margin-top: -150px;
        padding-bottom: 0px;
        margin-bottom: 50px;
        z-index: 3;
    }
    
    .lower_plan_text {
        margin-top: 20px;
        z-index: 333;
    }
    
    .lower_plan_plan img {
        width: 25%;
    }
    
    .lower_plan_text img {
        width: 100%;
    }
    
    .lower_plan .plan_title {
        display: inline-block;
        margin-top: 50px;
    }
    
    .lower_plan .plan_title img {
        width: 204px;
    }
    
    #lower_gallery {
        margin-top: 0px;
        padding: 0 0 30px 0;
    }
    
    #lower_gallery .gallery_title {
        margin-top: 30px;
    }
    
    #lower_gallery .gallery_title img {
        width: 204px;
    }
    
    .lower_plan_plan {
        margin-top: 20px;
    }
    
    #lower_schedule {
        margin-top: -30px;
    }
    
    #lower_schedule .schedule_title {
        margin-top: 60px;
    }
    
    #lower_schedule .schedule_title img {
        width: 274px;
    }
    
    .gallery_img {
        padding: 20px 0 20px;
    }
    
    .gallery_btn img {
        width: 50%;
    }
        
    .smileshuttle_btn {
        margin-top: 30px;
    }
    
    .googlemapArea {
        margin-top: 10px;
    }
    
    .store_access_text img {
        width: 100%;
    }
    
    .store_access {
        margin-top: 50px;
    }
    
    .store_access_text {
        margin-top: 20px;
    }
    
    #navArea {
        z-index: 999999!important;
    }
    
    .toggle_btn {
        z-index: 888888!important;
    }
    
    .carousel {
        z-index: 1!important;
    }
}

/* ナビ固定 */
.is-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    width: 100%;
}

/*------------------------------

  ここから下がハンバーガーメニュー
  に関するCSS

------------------------------*/
.menu-wrapper-logoarea {
    display: flex;
}

.menu-wrapper-logoarea h1 img {
    width: 80%;
}

.menu-lists ul {
    display: flex;
}
.menu-lists ul li {
    padding: 10px;
}
.menu-lists ul li.menu-lists-icons {
    margin-top: 15px;
}
.menu-lists ul li.menu-lists-icons a img {
    width: 35px;
}
.menu-lists ul li.menu-lists-icons a.header2_instagram {
    margin-left: 20px;
}



.main {
    padding-top: 80px;
    /*追記*/
    
    height: 1000px;
    /*メインコンテンツを入れた後で消す*/
    
    background: rgb(214, 189, 238);
    /*メインコンテンツを入れた後で消す*/
    
    text-align: center;
    /*メインコンテンツを入れた後で消す*/
    
    z-index: -999;
    /*一番下*/
}

/* 20241117 */
@media (max-width:900px) {



  .menu-wrapper {
    position: fixed !important;
  }


    .menu-lists ul {
        padding: 5px 25px 25px;
        text-align: left;
        display: block;
    }

    .menu-lists ul li {
        margin-bottom: 0px;
        font-weight: 500;
        border-bottom: 1px solid #dbdbdb;
        letter-spacing: 1px;
        padding: 15px 0;
    }
    
    .menu-lists ul li a {
        font-size:17px;
        color: #231815;
    }
    
    .menu-lists ul li a span {
        font-size:11px;
    }

    .menu-lists ul.navi-support {
        text-align: left;
        list-style: disc; /* ・を有効にする */
        list-style-position: outside; /* デフォルト位置を指定 */
        margin: 0; /* 余白をリセット */
        padding: 0;
        padding-left: 20px;
        padding-top: 10px;
    }

    .menu-lists ul.navi-support li {
        padding: 0px;
        padding-bottom: 5px;
        list-style: inherit; /* 親のリストスタイルを継承 */
        border-bottom: none;

    }
    
    .menu-lists ul li.navi-support-sp a {
        font-size: 14px;
        font-weight: normal;
    }

    .menu-lists ul li.navi-last{
        padding: 15px 0px;
        padding-bottom: 5px;
        border: none;
    }

    .menu-lists ul li p.navi-support-tel a {
        font-size: 28.5px;
        font-family: "acumin-variable", sans-serif;
        font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
        padding-top: 5px;
        margin-bottom: 0!important;
    }
    .menu-lists ul li p.navi-support-tel a span {
        font-size: 16.5px;
    }

    .menu-lists ul li.navi-last p.navi-contact{
        display: flex;
        justify-content: space-between; /* 左右に分ける */
        align-items: center; /* 垂直方向の揃え方 */
    }

    .menu-lists ul li.navi-last p.navi-contact a.navi-contact-btn{
        display: inline-block; /* ボタンのように表示 */
        padding: 10px 15px; /* 内側の余白を調整 */
        background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%) !important; /* 横方向グラデーション */
        color: #ffffff!important; /* 文字色は白のまま */
        text-decoration: none; /* 下線を削除 */
        border-radius: 30px;
    }
    .menu-lists ul li.navi-last p.navi-contact a.navi-youtube{
        margin-left: auto;
    }

    .menu-lists ul li.navi-last p.navi-contact a.navi-youtube img{
        width: 50px;;
    }



}



/* ドロップダウンメニュー作成 */
ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.menu>li:hover {
    /*  background: #072A24;*/
    
    -webkit-transition: all .5s;
    transition: all .5s;
}
/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}
.menu:after {
    clear: both;
}
.menu {
    *zoom: 1;
}

/* メガメニューの基本スタイル */
li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 70px;
    left: 30px;
    box-sizing: border-box;
    width: 360px; /* 横幅をメニューに合わせて調整 */
    padding: 15px 30px 10px;
    transition: all 0.2s ease;
    z-index: 9999;
    background: #00dc4b;
    visibility: hidden;
    opacity: 0;
    display: inline-block;
}

/* メニューがホバーされたときの表示 */
li.menu__mega:hover ul.menu__second-level {
    visibility: visible;
    opacity: 1;
}

/* 縦線を設定 */
li.menu__mega ul.menu__second-level:before {
    content: "";
    position: absolute;
    top: -20px; /* 縦線の開始位置を調整 */
    left: 170px; /* 縦線の位置を調整 */
    width: 2px; /* 縦線の太さ */
    height: 30px; /* 縦線の長さ。必要に応じて調整 */
    background-color: #00dc4b; /* 縦線の色をメニューと同じに */
}

/* リストアイテムをフレックスボックスで配置 */
li.menu__mega ul.menu__second-level li {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 10px 0 10px;
    margin-left: 0;
    border-bottom: 1px solid #cdffb7; 
    font-weight: 500;
    font-size: 14px;
}

li.menu__mega ul.menu__second-level li:last-child{
    border-bottom: none; 
}

/* リンクのスタイル */
li.menu__mega ul.menu__second-level li a {
    flex-grow: 1; /* リンクが残りのスペースを埋めるように設定 */
    color: #231815;
    text-decoration: none;
}

/* リンクのスタイル */
ul.menu__second-level li a:hover {
    flex-grow: 1; /* リンクが残りのスペースを埋めるように設定 */
    color: #fff!important;
    text-decoration: none;
}

/* 矢印の追加 */
li.menu__mega ul.menu__second-level li::after {
    content: "";
    background: url(../img/particlelabs/read_more_arrow.svg) no-repeat center / 12px 9px;
    margin-left: 10px; /* リンクとの間隔を調整 */
    width: 12px;
    height: 9px;


}

/* メニューのアクティブおよびホバー時のリンクスタイル */
li.menu__mega ul.menu__second-level li a:hover {
    color: #ffffff;
}





@media screen and (max-width:900px) {
    .menu-lists ul.sp_menu_menu li a img {
        /*        width: 100%;*/
    }
    
    ul.sp_menu_menu {
        padding: 15px;
    }
    
    ul.sp_menu_menu li {
        float: left;
        width: 46%;
        margin-left: 10px;
    }
    
    ul.sp_menu_menu li a img {
        width: 100%;
    }
    
    ul.sp_menu_menu li.menu-contact-icons a {
        float: left!important;
    }
    
    li.menu-contact-icons a img {
        width: 40%!important;
    }
    
    .menu-lists ul li a img {
        height: 70%
    }
    
    .menu-lists ul.sp_menu_menu li.menu-contact-icons a img {
        width: 100%;
    }
    


}

/* ハンバーガー内調整 */
@media screen and (max-width:375px) {
    nav.menu-lists ul {
        /*  padding-top: 0px;*/
    }
    
    .menu-lists ul li.menu-lists-icons {
        /*    margin-top: 0px;*/
    }
    
    .menu-lists ul li.menu-lists-icons a img {
        width: 30px;
    }
}

/* ハンバーガー内調整 */
@media screen and (max-width:320px) {
    nav.menu-lists ul {
        padding-top: 0px;
    }
    
    .menu-lists ul li a {
        font-size: 16px;
    }

    .menu-lists ul li a img {
        width: 120px;
    }
    
    ul.sp_menu_menu {
        padding: 0px 15px!important;
    }
    
    .menu-lists ul li {
        padding: 12px 0 5px 0;
    }
    
    .menu-lists ul li.menu-lists-icons {
        margin-top: 0px;
    }
    .menu-lists ul li.instaIcon a img {
        width: 70px;
    }}

.close {
    opacity: 1;
}



    
/* ----------------------------------------ここよりカスタムCSS 20191216---------------------------------------- */
html{
    overflow: auto;
}
body {
    font-size: 1em;
    line-height: 1.4;
    background-size: cover;
    scroll-behavior: smooth;
}

.bodywrap {
     overflow: hidden;
 }

img {
    max-width: 100%;
    vertical-align: middle;
}

a {
    color: #000;
    text-decoration: none;
}

p {
    letter-spacing: 1px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
}

@media screen and (max-width: 800px) {
    select {
        width: 100%;
    }
}

em {
    font-style: normal;
}


/*Webフォント*/

@font-face {
    font-family: 'hannari';
    src: url(../font/hannari.eot) format('embedded-opentype'), url(../font/hannari.otf) format('opentype');
}

.hannari {
    font-family: 'hannari';
    font-feature-settings: "palt";
    letter-spacing: -2px;
}


/* --------------------------------------------------
   responsive
-------------------------------------------------- */

@media screen and (max-width: 800px) {
    body {
        font-size: 1em;
        line-height: 1.4;
        background-size: cover;
        scroll-behavior: smooth;
    }
    .pc-show {
        display: none;
    }
    .sp-show {
        display: block;
    }
}

@media screen and (min-width: 801px) {
    .pc-show {
        display: block;
    }
    .sp-show {
        display: none;
    }
}


/* --------------------------------------------------
   margin&padding
-------------------------------------------------- */

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt60 {
    margin-top: 60px;
}

.mt70 {
    margin-top: 70px;
}

.mt80 {
    margin-top: 80px;
}

.mt100 {
    margin-top: 100px;
}

.mt120 {
    margin-top: 120px;
}

.mt150 {
    margin-top: 150px;
}


/* --------------------------------------------------
   Header
-------------------------------------------------- */
header {
    position: fixed; /* 固定することでスクロールしてもヘッダーが表示される */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* 高いz-indexを設定して動画の上に表示 */
}

header.entry-header {
    position: initial; /* 固定することでスクロールしてもヘッダーが表示される */
    z-index: 10; /* 高いz-indexを設定して動画の上に表示 */
}




.firstview {
    position: relative;
    margin: 0 auto 0;
    width: 100%;
    overflow: hidden;
}

.firstview-img {
    position: relative;
    width: 100%;
    line-height: 0;
    margin: 0 auto;
    z-index: 1;
}

.firstview-img img {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.site-branding-text {
    top: 20px;
    left: 0;
    padding: 20px;
    height: auto;
    position: absolute;
    width: 100%;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    z-index: 9999;
}

h1.oliver-logo {
    float: left;
    display: inline-block;
}

p.oliver-tel {
    float: right;
    margin-right: 40px;
}

@media screen and (max-width: 800px) {
    .firstview-img {
        max-width: auto;
        margin: 0 auto;
    }
    .firstview-img img {
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }
    .site-branding-text {
        top: 0px;
    }
    h1.oliver-logo {
        float: right;
        margin-right: 40px;
        width: 160px;
    }
}


/* --------------------------------------------------
   contents
-------------------------------------------------- */

.contents {}

.contents .sec-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.dummy {
    text-align: center;
}

.container {
    position: relative;
    margin: 0 auto;
}

.container-carousel {
    margin: 0 auto;
}

.container-fluid {
    margin: 0 auto;
}

h2.leadtext {
    font-size: 20px;
    text-align: center;
    font-weight: normal;
    font-feature-settings: "palt";
    line-height: 1.5;
}

.fullimg {
    margin: -30px auto 0;
    width: 100%;
    overflow: hidden;
    z-index: 1!important;
}

.full-img {
    position: relative;
    width: 100%;
    line-height: 0;
    margin: 0 auto;
    z-index: 1!important;
}

.full-img img {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

p.message {
    margin-top: 20px;
    z-index: 9999!important;
    text-align: center;
}

p.message img {
    position: relative;
    z-index: 8888!important;
    width: 400px;
}

div.message1 {
    margin-top: 100px;
    text-align-last: left;
}

div.message2 {
    margin-top: 60px;
    text-align: right;
}

div.movie {
    margin-top: 60px;
    background-image: url("../img/lp/movie-img.png");
    background-repeat: no-repeat;
    background-size: contain;
}

p.movie-mp4 {
    width: 320px;
    height: 500px;
    position: relative;
    top: 90px;
    left: 130px;
}

div.watsoliva {
    margin-top: 100px;
    margin-bottom: 40px;
}

p.point5 {
    margin-bottom: 150px;
    text-align: center;
}

p.point5 img {
    position: relative;
    z-index: 8888!important;
}

p.recruit {
    margin-top: 20px;
    z-index: 9999!important;
    text-align: center;
}

p.recruit-img {
    position: relative;
    z-index: 8888!important;
    text-align: center;
    margin-top: -100px;
    margin-bottom: 0px;
}

p.recruit-img img {
    width: 420px;
}

div.entry-img {
    background-image: url("../img/lp/recruit4.png");
    background-repeat: no-repeat;
    margin-bottom: 100px;
    background-size: contain;
}

div.entry-text {
    width: 350px;
    height: 500px;
    position: relative;
    top: 100px;
    left: 490px;
}

p.entry-text1 {
    margin-top: 20px;
}

p.entry-text2 {
    margin-top: 20px;
}

p.entry-text3 {
    margin-top: 10px;
}

p.footerTxt a:hover,
p.entry-text3 a:hover,
p.entry-text3b a:hover {
    opacity: 0.6;
}

div.access-area {
    margin-top: 40px;
    width: 100%;
    height: 370px;
}

div.access-map {
    float: left;
    background: ccc;
}

p.access-text {
    letter-spacing: 0;
}

p.access-text a {
    color: #212529;
}

p.access-logo img {
    width: 80%;
}

p.access-title {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
}

p.access-info {
    margin-top: 40px;
    font-size: 15px;
    line-height: 1.8;
    font-feature-settings: "palt";
}

div.entry-img2 {
    background-image: url("../img/lp/recruit5.png");
    background-repeat: no-repeat;
    margin-bottom: 100px;
    background-size: contain;
}

div.entry-textb {
    width: 350px;
    height: 500px;
    position: relative;
    top: 170px;
    left: 50px;
}

p.entry-text1b {
    margin-top: 20px;
}

p.entry-text2b {
    margin-top: 20px;
}

p.entry-text3b {
    margin-top: 10px;
}



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

    p.access-text {
        padding-top: 30px;
        letter-spacing: 0;
    }

    p.access-text a {
        color: #212529;
    }
}


@media screen and (max-width: 800px) {
    .cv-area {
        margin-top: 60px;
    }
    body {
        width: 100%;
    }
    .contents {
        width: 100%;
    }
    .contents .sec-inner {
        width: 100%;
        margin: 0 auto;
    }
    h2.leadtext {
        font-size: 16px;
        text-align: left;
        font-weight: normal;
        font-feature-settings: "palt";
        line-height: 1.5;
    }
    h2.leadtext br {
        display: none;
    }
    .fullimg {
        margin: -50px auto 0;
    }
    div.message {
        text-align: center;
        z-index: 9999!important;
    }
    div.message img {
        text-align: center;
        position: relative;
        z-index: 9999!important;
        width: 90%;
    }
    div.point5 {
        margin-bottom: 150px;
    }
    div.point5 img {
        width: 100%;
    }
    div.movie {
        margin-top: 60px;
        background-image: url("../img/lp/movie-img-sp.svg");
        background-repeat: no-repeat;
        background-size: contain;
    }
    p.movie-mp4 {
        width: 90%;
        height: 500px;
        position: relative;
        top: 320px;
        left: 20px;
        margin-bottom: 100px;
    }
    div.entry-img {
        background-image: url("../img/lp/recruit4-sp.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        margin-bottom: 100px;
        width: 350px;
    }
    div.entry-text {
        width: 220px;
        height: 400px;
        position: relative;
        top: 40px;
        left: 40px;
    }
    p.entry-text1 {
        margin-top: 10px;
    }
    p.entry-text2 {
        margin-top: 10px;
    }
    p.entry-text3 {
        margin-top: 10px;
    }
    p.message1 {
        margin-top: 0px;
        z-index: 9998!important;
        text-align: center;
    }
    p.message img {
        position: relative;
        z-index: 8888!important;
    }
    div.access-area {
        margin-top: 10px;
        width: 100%;
        height: 65%;
        text-align: center;
    }
    p.access-logo img {
        width: 60%;
    }
    p.access-title {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.6;
        font-feature-settings: "palt";
    }
    p.access-info {
        margin-top: 20px;
        font-size: 11px;
        line-height: 1.8;
        font-feature-settings: "palt";
    }
    div.access-map-sp {
        margin-top: 20px;
    }
    div.entry-img2 {
        background-image: url("../img/lp/recruit5-sp.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        margin-bottom: 100px;
        width: 350px;
    }
    p.recruit-img {
        position: relative;
        z-index: 8888!important;
        text-align: center;
        margin-top: -100px;
        margin-bottom: 0px;
    }
    p.recruit-img img {
        width: 80%;
    }
    p.entry-img img {
        width: 80%;
    }
    div.message1 {
        margin-top: 50px;
        text-align-last: left;
    }
}


/* Back to top button */

.back-to-top {
    position: fixed;
    display: none;
    background: #006934;
    color: #fff;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 50%;
    right: 15px;
    bottom: 70px;
    transition: background 0.5s;
    z-index: 999999;
}

.back-to-top i {
    padding-top: 12px;
    color: #fff;
}




p.entry-img {
    position: relative;
    z-index: 8888!important;
    text-align: center;
    margin-top: -130px;
    margin-bottom: 60px;
}

form.form-horizontal {
    padding: 30px 0 0;
}

form.form-horizontal .row {
    border-bottom: #956134 1px solid;
    margin-bottom: 60px;
}

h2.form-text {
    font-size: 17px;
    letter-spacing: 0.1px;
    font-feature-settings: "palt";
    line-height: 2em;
}

h2.form-text span {
    font-size: 28px;
    color: #006934;
    font-weight: bold;
}

p.form-hissu {
    font-size: 13px;
    margin-bottom: 20px;
}

p.form-hissu span {
    color: #e60012;
}

.hissu {
    color: #e60012;
}

.form-area {
    padding-top: 0px;
    margin-top: 0px;
}

.fotm-title {
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: 10px;
    border-right: #956134 1px solid;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.25rem;
    font-size: 16px;
    color: #231815;
    background-color: #ffffff;
    background-clip: padding-box;
    border: none!important;
    border-radius: none!important;
}

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f3f3f3;
    padding: 0.3rem 0.75rem;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 15px;
}

textarea.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 0.5rem 0.75rem;
    font-size: 16px;
    line-height: 1.5;
}

button.entry-btn {
    margin-top: 0px;
    padding: 10px 40px;
    border: #956134 1px solid!important;
    font-size: 16px;
    color: #231815;
    border: none;
    background: none!important;
}

button.entry-btn:hover {
    border: #956134 1px solid!important;
    background: #e8d2be!important;
    outline: none;
}

input[type="back-btn"] {
    margin-top: 30px;
    margin-bottom: 60px;
    padding: 10px 30px;
    background: none;
    font-size: 14px;
    color: #333;
    border: none!important;
    text-align: center;
    cursor: pointer;
    outline: none;
}

input[type="back-btn"]:link,
input[type="back-btn"]:visited,
input[type="back-btn"]:active,
input[type="back-btn"]:hover {
    color: #956134;
    border: none!important;
    outline: none;
}

.error_messe {
    font-size: 16px;
}

.table-striped tbody tr:nth-of-type(even),
.table-striped tbody tr:nth-of-type(odd) {
    background: none;
}

table.kakunin {
    margin-bottom: 60px;
}

table.kakunin th {
    width: 40%;
    padding: 2.5rem 0.75rem;
    vertical-align: top;
    border-bottom: #956134 1px solid;
    font-weight: normal;
    font-size: 16px;
}

table.kakunin td {
    width: 60%;
    padding: 2.5rem 0.75rem;
    vertical-align: top;
    border-bottom: #956134 1px solid;
    font-size: 18px;
}

table.kakunin th,
table.kakunin td {
    border-top: #956134 1px solid;
}

.thanks-text-area {
    padding: 10% 0 12%;
}

h2.thanks-text {
    font-weight: bold;
}

.thanks-textA {
    font-size: 24px;
    line-height: 2;
}

.thanks-textB {
    font-size: 16px;
}

@media screen and (max-width:640px) {
    p.entry-img {
        position: relative;
        z-index: 8888!important;
        text-align: center;
        margin-top: -30px;
        margin-bottom: 40px;
    }
    h2.form-text {
        font-size: 16px;
        letter-spacing: 0.1px;
        font-feature-settings: "palt";
        line-height: 2em;
    }
    h2.form-text span {
        font-size: 21px;
        color: #006934;
        font-weight: bold;
    }
    p.form-hissu {
        font-size: 13px;
    }
    .form-control {
        padding: 1rem 0.75rem;
    }
    form.form-horizontal {
        padding: 20px;
    }
    .fotm-title {
        font-size: 20px;
        margin-top: 0px;
        padding-bottom: 0px;
    }
    button.entry-btn {
        margin-top: 0px;
        padding: 10px 20px;
        background: #006934;
        font-size: 18px;
        color: #fff;
        border: none;
    }
    table.kakunin tr {
        border-top: 1px solid #dee2e6;
    }
    table.kakunin th {
        width: 100%;
        padding: 0.7rem 0.75rem 0.1rem;
        vertical-align: top;
        border-top: none;
        border-bottom: none;
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
    }
    table.kakunin td {
        width: 100%;
        padding: 0.1rem 0.75rem 0.4rem;
        vertical-align: top;
        border-top: none;
        border-bottom: none;
        font-size: 18px;
        display: inline-block;
    }
    table.kakunin th {
        border-top: #956134 1px solid;
    }
    select.form-control {
        margin-top: 0px;
    }
    .thanks-text-area {
        padding: 0px 0 60px;
    }
    .thanks-textA {
        font-size: 14px;
        line-height: 2;
    }
    .thanks-textB {
        font-size: 13px;
        line-height: 1.5;
    }
}


/* カルーセル関係 */

.carousel {
    padding: 0 50px 150px;
    position: relative;
}

.carousel-item img {
    width: 100%;
}

.fluid2 {
    padding: 0;
}


/* ABOUT */
section.about {
    margin: -300px auto 0px;
    padding: 300px 0 0px;
    background: #000;
}

picture.about-img img{
    width: 268px;
}



@media screen and (max-width:1180px) {
    section p {
        font-weight: normal;
    }

}

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

    section.about {
        margin: 0px auto 0px;
        padding: 60px 20px 60px;
    }

    picture.about-img img{
        width: 50vw;
    }

    section p {
        font-weight: normal;
        line-height: 2.0;
        letter-spacing: 1px;
        padding-bottom: 20px;
        text-align: justify;
    }




}

/* SUPPORT */

section.support {
    margin: 400px auto 0;
    padding: 150px 0 200px;
    /*max-width: 1920px;*/
    background-image: linear-gradient(180deg, rgba(255, 217, 0, 1), rgba(242, 135, 31, 1));

}

.support_img_area {
    z-index: 5555!important;
    position: relative;
    margin-top: -30vh;

}

.support_img_area img {
    width: 55%;
    z-index: 5555!important;

}

.support_img_area2 {
    z-index: 5555!important;
    position: relative;
    margin-top: -17%;
    width: 100%;
    margin-bottom: 200px;
}

.support_img_area2 p.support_img02 {
    width: 100%;
}

.support_img_area2 p.support_img02 img {
    width: 30%;
    margin-left: 50%;
}

picture.support-img img{
    width: 348px;
}


/* 就労継続支援A型 */
div.in-facility-work{
    margin-top: 80px;
    background: url('../img/02-support-img-04.jpg') ;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 70%;
    height: 40vh;
}

.w-area1{
    text-align: center;
    position: relative;
    top: 25%;
    left: 0%;
    padding: 60px 20px 50px;
    background: #fff;
    height: 270px;
    margin-top: 80px;
}

.w-area1 p{
    font-size: 17px;
    font-weight: normal;
    margin: 0;
    padding-bottom: 0px;
}

.w-area1 h3 {
    font-size: 35px;
    font-weight: bold;
    line-height: 1.5;
    padding-bottom: 10px;
    letter-spacing: 7px;
}

/* 就労継続支援B型 */
div.off-site-work{
    margin-top: 10%;
    background: url('../img/02-support-img-04B.webp') ;
    background-repeat: no-repeat;
    background-position: left top 50px;
    background-size: 70%;
    height: 40vh;
}

.w-area2{
    text-align: center;
    position: relative;
    top: 0%;
    right: 0%;
    padding: 60px 20px 50px;
    background: #fff;
    height: 270px;
}

.w-area2 p{
    font-size: 17px;
    font-weight: normal;
    margin: 0;
    padding-bottom: 00px;
}

.w-area2 h3 {
    font-size: 35px;
    font-weight: bold;
    line-height: 1.5;
    padding-bottom: 10px;
    letter-spacing: 7px;
}


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

    section.support {
        margin:200px 0px 0px;
        padding: 55px 0 100px;
    }

    .support_img_area {
        z-index: 5555!important;
        position: relative;
    }

    .support_img_area {
        clear: both!important;
        width: 100%;
    }
    .support_img_area p {
        margin-top: -135px;
        text-align: left;
    }
    .support_img_area p img {
        /* width: 275px;*/
    }

    .support_img_area img {
        width: 85%;
        z-index: 5555!important;
    }

    .support_img_area2 p.support_img02 {
        width: 100%;
    }

    .support_img_area2 p.support_img02 img {
        width: 50%;
        margin-left: 40%;
        margin-top: -5px;
    }

    picture.support-img img{
        width: 60vw;
    }

    .support_img_area2 {
        z-index: 5555!important;
        position: relative;
        margin-top: -16%;
        width: 100%;
        margin-bottom: 50px;
    }


    div.top-text-area {
        padding: 0px 20px 0px;
    }

    div.lo-text-area {
        padding: 0px 30px 0px;
    }

    div.lo-text-area4 {
        padding: 0px 40px 0px;
    }

    .single-post div.lo-text-area4 {
        padding: 30px 20px 0px;
    }

    .single-post div.lo-text-area4 picture img{
        padding: 0px 15px 0px;
    }

    .single-post div.lo-text-area4 h2{
        padding: 20px 15px 0px;
        font-size: 17px;
        font-weight: bold;
        letter-spacing: 2px;
    }


    div.in-facility-work{
        margin: 30px 0px 0;
        background: url('../img/02-support-img-04-sp.webp') ;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
        height: 50vh;
    }
    .w-area1{
        text-align: center;
        position: inherit;
        padding: 0 30px 0px;
        background: none;
        height: 55vh;
        top: 13%;
    }

    .w-area1 p{
        font-size: 15px;
        font-weight: normal;
        margin: 0;
        padding-top: 25%;
        padding-bottom: 0px;
        text-align: center;
    }

    .w-area1 h3 {
        text-align: center;
        font-size: 30px;
        padding-top: 10px;
    }

    /* 施設外就労 */
    div.off-site-work{
        margin: 30px 0px 0;
        background-color: #ffff;
        background-image: url('../img/02-support-img-04B-sp.webp') ;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
        height: 50vh;
    }

    .w-area2{
        text-align: center;
        position: inherit;
        padding: 0 30px 0px;
        background: none;
        height: 55vh;
        top: 35%;
    }

    .w-area2 p{
        font-size: 15px;
        font-weight: normal;
        margin: 0;
        padding-top: 25%;
        padding-bottom: 0px;
        text-align: center;
    }

    .w-area2 h3 {
        text-align: center;
        font-size: 30px;
        padding-top: 10px;
    }


}

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

    div.in-facility-work{
        height: 60vh;
    }

    div.off-site-work {
        height: 60vh;
    }
}


/* 03_GROUP */
section.group {
    margin: 0px auto 250px;
    padding: 150px 0 150px;
    /*max-width: 1920px;*/
    background: url('../img/03-group-img.jpg') ;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 40%;
    height: 900px;

}

section.group h3 {
    margin-top: 60px;
}


picture.group-img{
    padding-top: 300px;
}

picture.group-img img{
    width: 270px;
}

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

    /* 03_GROUP */
    section.group {
        margin: 0px auto 0px;
        padding: 75vh 0 100px;
        background: url('../img/03-group-img.jpg') ;
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 70%;
        height: initial;

    }

    picture.group-img{
        padding-top: 0px;
    }

    picture.group-img img{
        width: 49vw;
    }
    section.group h3 {
        margin-top: 10px;
    }

}

@media screen and (max-width:375px) {
    /* 03_GROUP */
    section.group {
        padding: 80vh 0 100px;
    }
}

/* 04_COMPANY */
section.company {
    margin: 0px auto 200px;
    padding: 250px 0 150px;
    /*max-width: 1920px;*/
    background: url('../img/04-company-img.jpg') ;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    height: 850px;
}

picture.company-img{
    padding-top: 300px;
}

picture.company-img img{
    width: 386px;
}

section.company h2 {
    color: #fff;
}

section.company h3 {
    color: #fff;
}

section.company p {
    color: #fff;
}

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

    /* 04_COMPANY */
    section.company {
        margin: 0px auto 0px;
        padding: 60px 0 60px;
        background: url('../img/04-company-img.jpg') ;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
        height: 90vh;
    }

    picture.company-img{
        padding-top: 0px;
    }

    picture.company-img img{
        width: 65vw;
    }
}
@media screen and (max-width:375px) {
    section.company {
        margin: 0px auto 0px;
        padding: 60px 0 60px;
        background: url('../img/04-company-img.jpg') ;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
        height: 115vh;
    }
}



/* TOP NEWS 20250915 */

section.news {
    padding: 70px 0 50px;
    max-width: 100%!important;
    background: #fff;
}

section.news .container {
    padding: 50px 50px;
}

/* タイトル（SVG画像） */
.news-title{ margin:20px 0 .25rem; line-height:1; }
.news-title img{ display:block; max-width: 240px; height:auto; }

/* 小見出し（“お知らせ”） */
.news-eyebrow{
  margin:.4rem 0 1.2rem;
  font-size:15px;
  letter-spacing:.2em;
  color:#00a5a8;   /* デザインのシアン */
  font-weight:700;
}

/* 左のカテゴリ */
.news-filter{ list-style:none; padding:0; 
    margin: 50px 0 50px; 
}
.news-filter li{ margin: .35rem 0; }
.news-filter button{
  appearance:none; border:0; cursor:pointer;
  background:#fff; 
  padding:.35rem .5rem .35rem 0;
  letter-spacing:.06em;
  transition:.2s ease;
    font-weight: 300;
  font-size:15px;
}
.news-filter button:hover{ color:#00a5a8; }
.news-filter button.is-active{
    color:#00a5a8;
    font-weight: bold;
}

/* ================================
   共通（PC／SP共通）
   ================================ */
.news-filter {
  list-style: none;
  padding: 0;
  margin: 50px 0 50px;
}

.news-filter li {
  margin: .35rem 0;
}

.news-filter button {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: #fff;
  padding: .35rem .5rem .35rem 0;
  letter-spacing: .06em;
  transition: .2s ease;
  font-weight: 300;
  font-size: 15px;
}

.news-filter button:hover {
  color: #00a5a8;
}

.news-filter button.is-active {
  color: #00a5a8;
  font-weight: bold;
}

/* ================================
   SP版（左寄せ・自動幅・縦線付き）
   ================================ */
@media (max-width: 767px) {

  .news-filter {
    display: flex;
    flex-wrap: wrap;              /* 折り返しON */
    justify-content: flex-start;  /* ← 左寄せ */
    align-items: center;
    margin: 30px auto;
    width: 100%;
    gap: 12px 10px;               /* 行間・列間を均等に */
  }

  .news-filter li {
    position: relative;
    padding-right: 30px;          /* 縦線との距離 */
  }

  /* 縦線を「隙間」として配置（3,5除外） */
  .news-filter li:not(:nth-child(3)):not(:nth-child(5))::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #ccc;
  }

  /* 2行目（4・5）は上マージン少し */
  .news-filter li:nth-child(4),
  .news-filter li:nth-child(5) {
    margin-top: 6px;
  }

  .news-filter button {
    background: transparent;
    padding: 0;
    font-size: 14px;
    display: inline-block;
  }

  /* 小見出し（“お知らせ”） */
.news-eyebrow{
  font-size:16px;
  font-weight:500;
}

}


/* 右：リスト */
.news-list{ list-style:none; padding:0; margin:0; }
.news-item{ border-bottom:1px solid #e6e9ee; }
.news-item:last-child{ border-bottom:none; }

/* 1行をグリッドで：左 160px / 右 フリー */
.news-link{
  display:grid;
  grid-template-columns: 160px 1fr auto;
  gap: 30px;
  /*align-items:center;*/
  padding: 30px 6px 25px;
  text-decoration:none;
  color:#2b2b2b;
}
.news-link:hover{ text-decoration:none; }

/* サムネイル */
.news-thumb{
  width:180px; height:105px; 
  overflow:hidden; margin:0;
  background:#f4f7f9;
}
.news-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 本文側 */
.news-content{ display:flex; flex-direction:column; gap:.4rem; }

/* メタ（バッジ + 日付） */
.news-meta{ display:flex; align-items:center; gap:10px; }

.news-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5fbfad 0%, #00aaeb 100%); /* ← グラデーション */
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  width: 125px;
  text-align: center;
}
.news-date{ font-size:16px; color:#55606b; }

/* タイトル */
.news-heading{
  margin:10px 0 0; 
  font-size:17px; 
  color:#231f20; 
  line-height:1.7;
}
.news-link:hover .news-heading{ color:#00a5a8; }

/* 右端の > 丸 */
.news-arrow{
  margin-left:8px;
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#5fbfad 0%,#00aaeb 100%);
  color:#fff; font-weight:700; line-height:1; font-size:16px;
}

/* 一覧ボタン（既セクション共通の分割ボタン流用） */
.news-more{ margin-top: clamp(20px, 4vw, 28px); }
.btn-more.is-split{ display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; }
.btn-more.is-split .btn-label{
  color:#00a5a8; padding-bottom:.5rem; 
  /*border-bottom:1px solid rgba(0,165,168,.45);*/
  font-weight:700;
  font-size: 17px;
}
.btn-more.is-split .btn-label:hover{ border-bottom-color:#00a5a8; }
.btn-circle{
  width:50px; height:50px; border-radius:999px;
  background: linear-gradient(135deg,#5fbfad 0%,#00aaeb 100%);
  position:relative; flex:0 0 auto;
}
.btn-circle::before{
  content: ">"; color:#fff; font-weight:700; font-size:18px;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}

/* レスポンシブ */
@media (max-width: 991.98px){
  .news-link{
    grid-template-columns: 140px 1fr auto;
    gap:14px; padding:18px 4px;
  }
  .news-thumb{ width:140px; height:92px; }
    .news-more.sp-show{
        text-align: right!important;
    }

}
@media (max-width: 575.98px){
  .news-link{
    grid-template-columns: 120px 1fr auto;
    gap:12px; padding:16px 0;
  }
  .news-thumb{ width:120px; height:80px; }
  .news-badge{ font-size:12px; }
  .news-heading{ font-size:15px;margin-top: 0px; }
  .pc-show{ display:none !important; }
}
@media (min-width: 576px){
  .sp-show{ display:none !important; }
}



/* CONTACT　20241027 */
section.contact {
    background-color: #121e64;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 520px; /* 固定の高さ */
    display: flex;
    align-items: center;
    color: white;
}

.contact-title-area .row {
    margin-top: 100px;
}

p.contact-title{
    font-size: 90px;
    font-weight: bold;
    line-height: 0.85;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #fff;
    letter-spacing: 0px;
}
p.contact-title img{
    margin-right: 5px;
}

p.contact-title span{
    color: #00dc4b;
}

p.jp-title{
    color: #fff;
    font-size: 18px;
    margin-left: 55px;
    font-family: "ryo-gothic-plusn", sans-serif;
    font-weight: 700;
}

.contact-text {
    font-size: 17px;
    line-height: 2;
    margin-top: 10px;
}

p.contact-btn {
    margin-top: 18px;
}

.contact-btn a {
    display: inline-block;
    width: 220px;
    padding: 10px 30px;
    border: 1px #fff solid;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s;
    position: relative; /* 矢印をボタン内に配置するため */
    padding-right: 35px; /* 矢印分のスペースを確保 */
    font-size: 17px;
    font-weight: bold;
}

.contact-btn a:hover {
    background-color: #00dc4b;
    border: 1px #00dc4b solid;
    color: white;
    text-decoration: none;
}

.contact-btn a::after {
    content: '→'; /* 矢印の文字 */
    position: absolute;
    right: 15px; /* ボタンの右端から適切な位置に配置 */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s; /* ホバー時のアニメーション用 */
    font-size: 27px;
}

.contact-btn a:hover::after {
    transform: translateY(-50%) translateX(5px); /* ホバー時に矢印を右に動かす */
}

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

    section.contact {
        margin: 50px auto 0;
        padding: 50px 20px 10px!important;
    }

    section.contact p.contact-title {
        text-align: center;
    }

    section.contact p.contact-title img {
        width: 60vw;
    }

    section.contact ul {
        margin-top: 30px;
        display: flex;
    }

    section p.contact-tel-btn{
        text-align: center;
    }

    section.contact ul li {
        width:100%;
    }

    section.contact ul li img {
    }

    section.contact ul li:nth-child(1),
    section.contact ul li:nth-child(2),
    section.contact ul li:nth-child(3),
    section.contact ul li:nth-child(4),
    section.contact ul li:nth-child(5),
    section.contact ul li:nth-child(6){
        border-bottom: 1px solid #F37021;
        margin-bottom: 40px;
    }

}


/* ================================
   Footer 20250915
   ================================ */
.footer-section {
  background: linear-gradient(to bottom, #00aaeb 0%, #5fbfad 100%);
  color: #fff;
  padding: 150px 0 0;
  font-size: 15px;
}
.footer-section .section-eyebrow{ 
    color:#fff; 
    font-size: 20px;
}
/* フッター内の見出しラインだけ白にする */
#footer {
  --line1:#fff;
  --line2:#fff;
  --line3:#fff;
  --line4:#fff;
  --line5:#fff;
  --line6:#fff;
}

/* --- ロゴ --- */
#footer-logoarea{
    margin-left: 30px;
}

.footer_logo {
  margin-bottom: 24px;
}
.footer_logo img {
  width: 360px;
  height: auto;
}

/* --- 住所 --- */
.footer-address {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* --- ナビ --- */
#footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 0px;
}
#footer-nav ul li {
  margin-bottom: 8px;
}
#footer-nav ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}
#footer-nav ul li a:hover {
  color: #231815;
}

/* --- SNSアイコン 縦並び --- */
.footer-sns {
  display: flex;
  flex-direction: column;   /* ← ここを column に変更 */
  gap: 12px;                /* アイコンの間隔 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-sns li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-sns img {
  width: 28px;
  height: 28px;
  transition: opacity 0.3s;
}

.footer-sns img:hover {
  opacity: 0.8;
}

/* --- コピーライト --- */
.footer-section .copyright {
  margin-top: 24px;
  margin-left: 0px;
  font-size: 13px;
  opacity: 0.9;
}

.footer-main{
    padding-bottom: 40px;
}

/* === フッター最下部：白背景＋段々広がるライン === */
.footer-tail {
  background: #fff;
  padding: 10px 0 0; /* 上下余白は不要なら調整 */
}

.tail-lines {
  width: 100%;
  margin: 0;
  padding: 0;
}

.tail-lines span {
  display: block;
  width: 100%;
  height: var(--line-thick);
  background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%);
}

/* 下に行くほど間隔を広げる（スクショ参考値） */
.tail-lines span:nth-child(1) { margin-top: 0px; }
.tail-lines span:nth-child(2) { margin-top: 8px; }
.tail-lines span:nth-child(3) { margin-top: 10px; }
.tail-lines span:nth-child(4) { margin-top: 15px; }
.tail-lines span:nth-child(5) { margin-top: 20px; }


/* 連絡カード全体 */
.contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;            /* カード間の余白 */
  margin: 70px 0 70px;
}

/* カード本体 */
.contact-card {
  flex: 1 1 300px;      /* 幅300px以上で自動調整 */
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 25px 30px 25px 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* アイコン */
.contact-card__icon {
  flex: 0 0 72px;
  margin-right: 1.5rem;
}
.contact-card__icon img {
  max-width: 100%;
  height: auto;
}

/* 本文 */
.contact-card__body {
  flex: 1;
}

.contact-card__label {
  font-size: 20px;
  font-weight: bold;
    margin-top: 20px;
  margin-bottom: 15px;
  color: #231f20;
}

.contact-card__tel a img {
  max-width: 100%;
  height: auto;
}

.contact-card__tel a {
    transition: 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

.contact-card__tel a:hover {
  opacity: 0.8;
}

.contact-card__note {
  font-size: 15px;
  color: #231f20;
  margin-top: 0px;
}

.contact-card__action .btn-cta {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(to right, #5fbfad, #00aaeb);
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  font-weight: 700;
    transition: 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.contact-card__action a.btn-cta:hover {
  background: #000;
  text-decoration: none;
  color: #fff;
}


.contact-card__action .btn-cta__circle {
  margin-left: .6rem;
}

/* --- レスポンシブ --- */
@media (max-width: 767px) {
    /* 連絡カード全体 */
    .contact-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;            /* カード間の余白 */
    margin: 40px 0 40px;
    }

    .footer-main{
        padding-bottom: 0px;
    }

  .footer_logo img {
    width: 180px;
  }
  .contact-card {
    flex-direction: row;
    text-align: center;
    padding: 15px 25px 15px 25px;
    gap: 10px;
  }

  p.contact-card__note{
    margin-bottom: 0;
  }
  p.contact-card__label{
    margin: 0;
    line-height: 1.5;
  }
  .contact-card__icon {
    margin: 0 0 0;
  }
  .contact-card__icon img {
    width: 50px;
  }

section p.contact-card__action{
    margin-bottom: 0!important;
}
section p.contact-card__action .btn-cta{
    font-size: 14px;
    padding: 5px 15px;
    margin-top: 10px;
}

  .contact-card__tel {
    margin: 0;
  }

  .contact-card__tel a {
    font-size: 20px;
  }
  .footer-sns {
    flex-direction: row;  /* ← ここを row に変更 */
    /*justify-content: center;
    margin-top: 16px;*/
  }
  .footer-section .copyright {
    text-align: center;
  }

    /* 下に行くほど間隔を広げる（スクショ参考値） */
/*    .tail-lines span:nth-child(1) { margin-top: 0px; }
    .tail-lines span:nth-child(2) { margin-top: 5px; }
    .tail-lines span:nth-child(3) { margin-top: 7px; }
    .tail-lines span:nth-child(4) { margin-top: 12px; }
    .tail-lines span:nth-child(5) { margin-top: 17px; }

}*/
    #footer-nav ul li a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    }

.pc-show {
    display: block;
}

.sp-show {
    display: none;
}

.pc-first-view {
    display: block;
}

.sp-first-view {
    display: none;
}

}

@media (max-width: 768px) {
    .pc-show {
        display: none;
    }

    .sp-show {
        display: block;
        text-align: center;
        margin-top: 20px;
    }

    .pc-first-view {
        display: none;
    }

    .sp-first-view {
        display: block;
    }

}


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


    /* footer */
    #footer {
        padding: 60px 20px 0px;
        text-align: center;
    }
    .footer_logo {
        text-align: center;
    }
    .footer_logo a img {
        width: 250px;
    }
    #footer-nav {
        padding: 20px 20px 0px;
    }

    #footer p.copyright {
        width: 100%;
        margin-top: 20px;
    }

    .copyright {
        text-align: center;
        font-size: 13px;
        margin-top: 10px;
    }
    #footer p {
        font-size: 14px;
        line-height: 1.8;
        padding-bottom: 0;
    }

    #footer p.footer-address {
        letter-spacing: 0px;
        line-height: 2.2;
    }
    #footer p.title-link-small {
        padding-left: 0.8em;
    }

}

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

    #footer p.title-link a {
        letter-spacing: 0px;
    }

}


/* 下層ページのスタイル */

.page-wrap {
    position: relative;
    width: 100%;
    height: calc(66vh + 0px); /* ヘッダー高さ分 */
    margin-top: 80px;
    padding: 0 50px;
    z-index: 1;
}

.page-fv-area {
    position: absolute;
    bottom: 14%;
    left: 8%;
    z-index: 2;
}

/* 角丸を適用するラッパー */
.page-fv-wrapper {
    position: relative;
    width: 100%;
    height: 62vh;
    border-radius: 10px;
    overflow: hidden;  /* ← これで内側を切り抜く */
}


.page-fv-area p{
    padding-left: 5px;
}

.page-fv-area p.activity-title{
    margin-bottom: -1rem;
}

.page-fv-area p img{
    width: 100%;
    height: auto;
}

.page-fv-area h1{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1.4;
}


section.page-basic-section {
    margin: 50px auto 0px;
    padding: 50px 0 50px;
}

section.page-basic-section h2 {
    text-align: center;
    font-size: 40px;
    letter-spacing: 15px;
    line-height: 1.7;
}

section.page-basic-section h2 span{
    color: #00a5a8;
}

section.page-basic-section h2.activityH2 {
    margin: 30px 0 80px;
    text-align: left;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 2;
}

section.page-basic-section p.page-text{
    text-align: center;
    font-size: 18px;
    line-height: 2.5;
    letter-spacing: 3px;
    padding: 30px 0 80px;
    font-weight: 400;
}

p.page_basic_img{
    text-align: center;
    margin: 100px 0 0px;
}


@media screen and (max-width:900px) {
    .page-wrap {
        padding: 0px;
        margin-top: 70px;
        height: 100%;
    }

    .page-fv-wrapper {
        height: 60vh;
        border-radius: 0;

    }

    .page-fv-area {
        position: absolute;
        left: 5%;
        bottom: 15%;
        z-index: 2;
    }

    .page-fv-area p{
        padding-left: 5px;
    }

    .page-fv-area p img{
        width: 50vw;
        height: auto;
    }

    .page-fv-area h1{
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 5px;
        line-height: 1.4;
    }


    section.page-basic-section {
        margin: 0px auto 0px;
        padding: 0px 0 0px;
    }

    section.page-basic-section h2 {
        text-align: center;
        font-size: 28px;
        letter-spacing: 10px;
        line-height: 1.7;
    }


    section.page-basic-section h2.activityH2 {
        font-size: 16px;
        margin-top: 0px;
    }

    section.page-basic-section h2 span{
        color: #00a5a8;
    }

    section.page-basic-section  p.page-text{
        text-align: justify;
        font-size: 15px;
        line-height: 2;
        letter-spacing: 2px;
        padding: 30px 0 80px;
        font-weight: 400;
    }


    p.page_basic_img{
        text-align: center;
        margin: 100px 0 60px;
    }

}

/* Role / 音楽の役割 */

/* グリッド（2列→SP1列） */
.role-grid{
  display:flex; flex-wrap:wrap;
  gap: 36px 44px;
  margin-top: clamp(24px, 4vw, 40px);
}

.role-grid h3{
    padding: 30px 0 10px;
    font-size: 18px;
    line-height:2;
    letter-spacing: 3px;
}


.role-grid .role-card{
  flex: 1 1 calc((100% - 44px) / 2);
  max-width: calc((100% - 44px) / 2);
  min-width: 0;
}

/* カード */
.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0px;
  justify-content: space-between;
  padding: 28px 0px 28px 40px; /* ←余白を大きめに */
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border: 1px solid rgba(0,0,0,.06);
}

/* 数字＋タイトルの横並び */
.role-card__head {
  display: flex;
  align-items: center;   /* ←天地の中央に揃える */
  gap: 12px;             /* 数字とタイトルの間隔 */
  margin-bottom: 12px;   /* 下に本文との余白 */
}

.role-num img {
  width: 32px;  
  height: auto;
  display: block;
}

.role-title {
    margin: 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
}

/* 本文：テキスト7割 + アイコン3割 */
.role-card__body{
  display:flex; align-items:flex-start; gap: 20px;
}
.role-text{
  flex: 0 0 65%;
  max-width: 65%;
}
.role-illust{
  flex: 0 0 35%;
  max-width: 35%;
  display:flex; align-items:center; justify-content:start;
}
.role-illust img{
  width: clamp(80px, 11vw, 80px);
  height:auto; display:block;
}

/* 箇条書き（◎を本文に直接記述する） */
.role-list{
  margin:.2rem 0 0;
  padding:0;
  list-style:none; 
  font-size: 15px;
  line-height:1.9;
}

/* ハンギングインデント：2行目以降を左に戻す */
.role-list li{
  margin:.15rem 0;
}


/* ===== Responsive ===== */
@media (max-width: 767px){
  .role-grid{ gap: 20px 0; }
  .role-grid .role-card{ flex: 1 1 100%; max-width:100%; }
  .role-card {
    padding: 20px; /* ←余白を大きめに */
}

.role-list {
    margin: .2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.6;
}

.role-card__head {
    }

  /* 数字＋タイトルは横並びのまま */
  .role-card__body{ flex-direction: column; gap: 0px; }
  .role-text{ flex: 1 1 auto; max-width: 100%; }

  /* ★ イラストを左右センターに */
  .role-illust{
    flex: none;
    max-width: none;
    display: flex;
    justify-content: center;   /* 中央寄せ */
    align-items: center;       /* 縦位置も中央（余白対策） */
    width: 100%;
  }
  .role-illust img{
    width: 80px;
    height: auto;
    display: block;
    margin: 10px auto 0;            /* 念のため中央に */
  }

  .role-grid h3{
    padding: 20px 0 10px;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 3px;
  }
  .role-title{
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
  }
}

/* Message / メッセージ */
.message-section{
    padding-bottom: 200px;
}

.message-section-eyebrow{
  margin: -1.5rem 0 0rem 1rem;
  font-size: 20px;
  letter-spacing: 0em;
  color: #00a5a8;
}

.message-section p.message-text{
    font-size: 18px;
    line-height: 2;
    letter-spacing: 3px;
    padding: 0px 0 50px 30px;
    font-weight: 500;
    margin-bottom: 0;
}

.message-area{
    padding-top: 50px;
    margin: 50px 0 150px;
}

.message-area:last-child{
    padding-top: 50px;
    margin: 50px 0 250px;
}

p.message-katagaki{
    font-size: 18px;
    font-weight: 400;
    padding-top: 10px;
}

p.message-katagaki img{
    width: 212px;
}

p.message-name{
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 4px;
}

p.message-name span{
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0px;
}

.message-profile{
    padding: 30px;
    background: #ffffff;
    border-radius: 10px;
}

.message-profile p{
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.message-profile p:first-child{
    font-weight: bold;
    color: #00a5a8;
    font-size: 18px;
}

.message-profile p:last-child{
    font-size: 16px;
    margin-top: 10px;
}


@media (max-width: 767px){


    .message-section-eyebrow{
    margin: -0.5rem 0 0rem 1rem;
    font-size: 16px;
    font-weight: 500;
    }

    .message-section p.message-text{
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: 1px;
        padding: 0px 0 30px 0px;
        font-weight: 500;
    }

    .message-area{
        padding-top: 50px;
        margin: 50px 0 150px;
    }


    .message-area-2 div.col-md-4,
    .message-area-2 div.col-md-8,
    .message-area-2 div.col-md-12{
        padding: 0!important;
    }

    p.message-photo{
        padding: 0 30px;
    }

    p.message-katagaki{
        font-size: 15px;
        padding-top: 10px;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    p.message-katagaki img{
        width: 150px;
    }

    p.message-name{
        font-size: 24px;
        font-weight: bold;
    }

    p.message-name span{
        font-size: 13px;
        font-weight: normal;
    }

    .message-profile{
        padding: 20px;
        background: #ffffff;
        border-radius: 10px;
    }

    .message-profile p{
        margin: 0;
        padding: 0;
        line-height: 1.5;
    }

    .message-profile p:first-child{
        font-weight: bold;
        color: #00a5a8;
        font-size: 18px;
    }

    .message-profile p:last-child{
        font-size: 16px;
        margin-top: 10px;
    }

    .message-area:last-child{
        padding-top: 0px;
        margin: 50px 0 100px;
    }



}

/* Activity 活動内容 ページ */
/* ===== CTA Buttons（6つ） ===== */
:root{
  --grad-start:#5fbfad;          /* 既存の緑 */
  --grad-end:#00aaeb;            /* 既存の青 */
  --grad-start-strong:#49b5a1;   /* hover時 少し濃い緑 */
  --grad-end-strong:#00b8ff;     /* hover時 少し明るい青 */
}

.jamm-cta-grid{ 
  margin-top:50px !important;  /* 上余白（優先度確保） */
  margin-bottom:50px !important;  /* 上余白（優先度確保） */
  row-gap:18px;                 /* 上下の間隔 */
}

.cta-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5em;
  width:100%;
  min-height:52px;
  padding:10px 22px;
  border-radius:9999px;
  background:linear-gradient(90deg,var(--grad-start) 0%,var(--grad-end) 100%);
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:400;
  letter-spacing:.02em;
  transition: background .28s ease;
  margin-bottom: 20px;
}

.cta-pill__label{ line-height:1; }
.cta-pill__caret{ font-size:.9rem; line-height:1; opacity:.9; }

/* hover/focus：色のみ切り替え（移動・影なし） */
.cta-pill:hover,
.cta-pill:focus{
  background:#000;
  color:#fff;
  text-decoration:none;
}

.cta-pill__caret{
  display:inline-block;
  width:8px;
  height:8px;
  border-right:2px solid #fff;   /* 白い線 */
  border-bottom:2px solid #fff;  /* 白い線 */
  transform: rotate(45deg);      /* 斜めに回転させてV字に */
  margin-left:8px;               /* 文字との間隔 */
  flex-shrink:0;
}

/* キーボード操作用のフォーカス枠 */
.cta-pill:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:2px;
}




/* ================================
   共通セクション（Session, Workshop, Event, Cafe, Online, Qualification）
   英字見出しを上げて段々ラインと縦位置を揃える
   ================================ */

/* 行の寄せを上寄せに */
.cta-section .section-heading {
  align-items: flex-start; /* 下寄せ → 上寄せ */
}

/* 見出しを上に持ち上げ（調整用） */
.cta-section .section-title-wrap {
  margin-top: -24px; /* 以前 -14px → -24px に強め */
}

.cta-section .section-title {
  margin: 0;
  line-height: 1;
}

.cta-section .section-title img {
  display: block;
  height: auto;
  max-height: 92px; /* ラインとバランス（必要なら調整） */
  margin-bottom: 40px;
}

.cta-section .section-titleL img {
  display: block;
  height: auto;
  max-height: 92px; /* ラインとバランス（必要なら調整） */
  margin-bottom: 40px;
}

/* SPは過上げを少し弱める */
@media (max-width: 575.98px){
  .cta-section .section-title-wrap {
    margin-top: -10px;
  }
}

/* ================================
   Workshop / Qualification 個別調整
   ================================ */
#workshop .section-title img,
#qualification .section-title img {
  margin-bottom: 22px !important;
}

/* ================================
   見出し直下：アイコン＋和文タイトル
   ================================ */
.svc-lead{
  display:flex;
  align-items:flex-start;
  gap: 30px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.svc-icons{
  display:flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
.svc-icons img{
  width: 110px;
  height:auto;
  display:block;
}
.svc-title{
  margin: 0;
  font-weight:500;
  font-size: 40px;
  line-height: 1.7;
  letter-spacing: 0.3em; /* デザインのゆったり感 */
}

.svc-link{
    margin-top: 80px;
}
/* ================================
   本文 2カラム：左テキスト / 右画像
   ================================ */
.svc-body{
  display:flex;
  align-items:flex-start;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(8px, 1.6vw, 16px);
}
.svc-text{ flex: 1 1 60%; min-width: 0; }

.svc-figure{ flex: 1 1 40%; min-width: 260px; }

.svc-figure img{
  width:100%; height:auto; display:block;
}

.svc-price1,
.svc-price2 {
  flex: 0 0 50%;
  max-width: 50%;
}

/* ------------------------------
   セッション価格カード（左右）
------------------------------ */

/* 外側：角丸だけ持つ */
.svc-card {
  position: relative;
  border-radius: 16px;
  padding: 30px 30px 10px;
  background: none; 
  z-index: 1;
}

/* 内側のグラデ線を疑似要素で描く */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* → 線の太さ */
  border-radius: 16px; /* ここで角丸を適用 */
  background: linear-gradient(90deg, #5fbfad 0%, #00aaeb 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.svc-card__title {
  display: block;          /* ブロックにする */
  width: fit-content;      /* 幅は中身だけ → これ重要 */
  margin-left: auto;       /* 左右 auto で中央寄せ */
  margin-right: auto;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(16px, 1.6vw, 20px);
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  color: #00a5a8;
}

/* テキストブロック */
.svc-card__block {
  margin-bottom: 20px;
}

/* 金額／項目タイトル */
.svc-card__heading {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: #00a5a8;
}

/* セッション時間 */
.svc-card__time {
  margin-bottom: 12px;
  color: #444;
  font-size: 15px;
}

/* 本文 */
.svc-card__text {
  font-size: 16px;
  line-height: 1.7;
}

.svc-card__text span {
  font-size: 14px;
  line-height: 1.7;
}

.svc-card__divider {
  border: none;
  border-top: 2px solid #00aaeb;
  margin: 16px 0;
  width: 100%;     /* ← これだけでOK */
}


.svc-text h4{
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 2.5;
  text-indent: 0; 
  color: #00a5a8;
}

.svc-text p{
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 2.5;
  text-indent: 0; 
}

/* ================================
   実施施設例（白カード）
   ================================ */
.svc-note-card{
  margin-top: clamp(18px, 2.5vw, 26px);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 24px);
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
}
.svc-note-title{
  margin:0 0 .4rem;
  font-weight: 700;
  color: #00a5a8;
  font-size: 18px;
}
.svc-note-title span{
  font-weight: 300;
  color: #333;
  font-size: 16px;
}

.svc-note-text{
  margin:0;
  font-size: 16px;
  line-height: 2;
  color:#231f20;
}

/* 768〜991px：余白だけ少し詰める */
@media (max-width: 991.98px){
  .svc-body{ gap: 28px; }
}

/* SP：縦積み。画像は中央寄せ＆最大幅制御 */
@media (max-width: 575.98px){
  .svc-lead{ gap: 14px; }
  .svc-title{ letter-spacing: .08em; }

  .svc-body{
    flex-direction: column;
    gap: 16px;
  }
  .svc-figure{
    align-self: center;
    width: 100%;
    max-width: 520px;   /* 写真が大きすぎないよう上限 */
  }
}

/* ================================
   SP版 共通調整（767px以下）
   ================================ */
@media (max-width: 767.98px){

  /* 行の下寄せユーティリティ(.align-items-end)を打ち消す */
  .cta-section .section-heading.align-items-end{
    align-items: center !important;
  }

  /* 見出しボックスを上に寄せる＆高さ固定 */
  .cta-section .section-title-wrap{
    margin-top: 10px !important;
  }
  .cta-section .section-title{
    margin: 0 !important;
    line-height: 1 !important;
    height: 60px !important;           /* 固定高 */
    display: flex !important;
    align-items: flex-start !important; /* ボックス内で上寄せ */
  }
  .cta-section .section-title img{
    height: 47px !important;            /* 高さフィット */
    width: auto !important;             /* 横は可変 */
    max-width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
    margin-left: 20px;
  }

  .cta-section .section-titleL img{
    height: 60px !important;            /* 高さフィット */
    width: auto !important;             /* 横は可変 */
    max-width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
    margin-left: 20px;
  }

  /* Workshop / Qualification の余白を統一 */
  #workshop .section-title img,
  #qualification .section-title img{
    margin-bottom: 0 !important;
  }

  /* 親はflexのまま維持して横並び */
  .svc-lead {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;             /* 子要素が折り返せるように */
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  /* アイコン部分 */
  .svc-icons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .svc-icons img {
    width: 64px;
    height: auto;
    margin: 0;
  }

  /* タイトル部分 */
  .svc-title {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .08em;
  }

  /* 「詳しく見る」だけ折り返して下に独立 */
  .svc-link {
    flex-basis: 100%;            /* 1行使って下に出す */
    width: 100%;
    margin-top: 10px;
    text-align: right;
  }

  .svc-link .btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  /* 本文 → 1カラム */
  .svc-body{ flex-direction: column; gap: 16px; margin-top: 16px; }
  .svc-text{ flex: 1 1 auto; width: 100%; }
  .svc-text p{ font-size: 16px; line-height: 2; }
  .svc-text h4{font-size: 18px;}

  .svc-figure{ flex: 1 1 auto; width: 100%; max-width: 480px; align-self: center; }

  /* 実施施設カード */
  .svc-note-card{ 
    margin-top: 20px; 
    padding: 14px 16px; 
    font-size: 15px; 
}
  section p.svc-note-title{ 
    font-size: 16px;
    margin-bottom: 0px!important;
    padding-bottom: 0!important;
}
section p.svc-note-text{ 
    font-size: 15px; 
    line-height: 1.6; 
    margin-bottom: 0!important;
    padding-bottom: 0!important;
}

}

/* 青枠（左右いっぱい） */
.svc-ukulele-box {
  border: 2px solid #00a5a8;
  border-radius: 10px;
  padding: 24px 30px;
  margin: 0 0 40px 0;
  background: none; /* 背景なし */
}

/* 上の1行（参加費）は左右いっぱいでOK */
.svc-ukulele-heading {
  font-weight: 700;
  color: #00a5a8;
  margin-bottom: 20px;
  font-size: 18px;
}

.svc-ukulele-heading span {
  color: #333;
}


/* 下段の2カラム */
.svc-ukulele-body {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* 左：丸 */
.svc-ukulele-circle {
  border: 2px solid #00a5a8;
  color: #00a5a8;
  border-radius: 999px;
  width: 120px;
  height: 120px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 右：文章部分 */
.svc-ukulele-content {
  flex: 1;
}

/* 箇条書き */
.svc-ukulele-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 10px 0;
  line-height: 1.8;
  font-size: 16px;
}

/* オススメ文章 */
p.svc-ukulele-note {
  margin-top: 0;
  font-size: 16px!important;
}













/* Outline 協会概要ページ */
.section-title2 {
    color: #00a5a8;
    font-size: 40px;
    letter-spacing: 15px;
    padding-left: 15px;
    padding-bottom: 1em;
    font-weight: 400;
}

/* ================================
   Company Overview（法人概要）
   ================================ */
#company-overview .overview-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(18px, 3vw, 28px);
}

#company-overview .ov-dl{ margin:0; }

#company-overview .ov-row{
  display:flex;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(12px, 1.6vw, 16px) 0;
  border-bottom: 1px solid #00a5a8;
}

/* 最後の行だけボーダー無し */
#company-overview .ov-row:last-child {
  border-bottom: none;
}

#company-overview dt{
  flex: 0 0 6.5em;               /* ラベル幅 */
  max-width: 7.5em;
  font-weight: 700;
  color: #00a5a8;
  line-height: 1.8;
}

#company-overview dd{
  margin:0; 
  line-height: 1.9;
  color:#231f20;
  word-break: break-word;
}

#company-overview dt,
#company-overview dd{
    font-size: 18px;
}

#company-overview .ov-en{
  display:block;
  margin-top: .35em;
  font-size: .92em;
  color: rgba(0,0,0,.7);
}

#company-overview .ov-note{
  display:block;
  color: rgba(0,0,0,.7);
  line-height: 1.8;
}

#company-overview .ov-tel{
  color:#231f20; 
  text-decoration:none;
  border-bottom: 1px dotted rgba(0,0,0,.35);
}
#company-overview .ov-tel:hover{ border-bottom-color: #00a5a8; }

/* 事業内容リスト（■） */
#company-overview .ov-services{
  margin:0; padding:0; list-style:none;
}
#company-overview .ov-services li{
  position:relative; 
  padding-left: 1em;
  letter-spacing: inherit;
}

#company-overview .ov-services li::before{
  content:"■";
  position:absolute; left:0; top:.45em;
  font-size: .7em; color:#231f20;
}

/* 地図 */
#company-overview .overview-map{
  margin-top: clamp(24px, 4vw, 40px);
}
#company-overview .map-embed{
  position:relative;
  width:100%;
  padding-top: 43%; /* 16:9 */
  overflow:hidden;
  background: rgba(255,255,255,.9);
}
#company-overview .map-embed iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  #company-overview .overview-grid{
    margin-top: 0;
    grid-template-columns: 1fr;   /* 1カラム */
  }
  #company-overview dt{ flex-basis: 6.2em; }

#company-overview .align-items-end{
    margin-bottom: 0;
}



}
@media (max-width: 575.98px){
  #company-overview .ov-row{
    flex-direction: row;        /* ラベル → 内容の縦並び */
    gap: .3rem;
  }
  #company-overview dt{
    flex: none; 
    color:#00a5a8;
    line-height:1.6;
    font-size: 15px;
    width: 25%;
  }

  #company-overview dd{
    font-size: 15px;
  }

  #company-overview .map-embed{ padding-top: 62%; } /* 少し縦長に */
}

/* =========================================================
   協会メンバー セクション
   対応HTML：<section id="association-member">（完全版）
   ========================================================= */


/* ================================
   Association Member 追加/上書きCSS
   （このブロックを既存CSSの末尾へ）
   ================================ */

#association-member{
    margin-top: 100px;
  padding-bottom: 150px;
}

#association-member .member-grid{
  /* 下段のグループ（理事/監事/名誉顧問/顧問）をグリッドで2列に */
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0px 80px;
  margin-top: 80px;
}

/* 上段：代表理事＆代表副理事の2枚を横並びに（グリッド全幅で扱う） */
#association-member .member-groups{
  grid-column: 1 / -1;           /* グリッドの2列をまたぐ */
  display:flex;
  gap: 80px;
  align-items: stretch;
  margin-bottom: 8px;
}
#association-member .member-groups .member-group{
  flex: 1 1 0; 
  min-width: 0;
}

/* 各グループ見出し（丸いバッジ風）は、行の先頭で全幅に */
#association-member .member-group-badge{
  grid-column: 1 / -1;
  margin: 0px 0 20px;
}
#association-member .member-group-badge .member-badge{
  display:inline-block;
  padding: 8px 18px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #5fbfad 0%, #00aaeb 100%);
  color:#fff;
  font-weight:700;
  font-size: 18px;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  width: 200px;
  text-align: center;
}

/* カードの骨格（左右：テキスト／写真） */
#association-member .member-card{
  display:flex;
  gap: 30px;
  align-items:flex-start;
  padding: 10px 0px 70px 0px;
}

#association-member .member-text{
  flex: 1 1 auto;
  min-width: 0;
}
#association-member .member-name{
  margin: 0 0 6px;
  font-weight: 500;
  font-size: 27px;
  width: 100%;
  letter-spacing: .08em;
  color: #00a5a8;
  border-bottom: 1px solid #00a5a8;
  padding-bottom: 5px;
}

#association-member .member-role{
  margin: 10px 0 15px;
  line-height: 1.5;
  font-size: 16px;
}
#association-member .member-links{
  list-style:none; margin: 6px 0 0; padding:0;
  display:grid; gap: 6px;
  font-size: 18px;
}
#association-member .member-links a{
  text-decoration:none; font-weight:700; color:#00a5a8;
}
/* 「▶」をテキスト表示で固定（emoji化を防ぐ） */
#association-member .member-links .tri::before{
  content: "\25B6\FE0E";  /* ▶ + FE0E = テキスト版を強制 */
  margin-right: .35em;
  display: inline-block;
  line-height: 1;
}
/* 写真枠 */
#association-member .member-photo{
  flex: 0 0 190px;
  max-width: 190px;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  overflow:hidden;
}
#association-member .member-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* 画像未定のとき */
#association-member .member-photo.is-empty{
  background: rgba(0,0,0,.06);
}
#association-member .member-photo.is-empty::before{
  content:"No Photo"; display:flex; align-items:center; justify-content:center;
  height:100%; color:#7f8c8d; font-size:12px; letter-spacing:.08em;
}

/* -------------------------------
   レスポンシブ
   ------------------------------- */
@media (max-width: 1199.98px){
  #association-member .member-photo{ flex-basis: 220px; max-width: 220px; }
}
@media (max-width: 991.98px){
    #association-member{
        padding-bottom: 100px;
    }

  /* グリッドは1列に、上段の2枚も縦積み */
  #association-member .member-grid{
    grid-template-columns: 1fr; gap: 0px;
    margin-top: 0;
 }
  #association-member .member-groups{ flex-direction: column; gap: 24px; }
  #association-member .member-card{ padding: 0px; }
  #association-member .member-photo{ flex-basis: 200px; max-width: 200px; }
}
@media (max-width: 575.98px){
  #association-member .member-card{
    flex-direction: row; gap: 12px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  #association-member .member-photo{
    flex: none; width: 150px; 
    height: 150px; 
    aspect-ratio: 4 / 3;             /* 写真の比率を安定させる */
  }
  #association-member .member-name{ font-size: 20px; }

  #association-member .member-group-badge{
    margin-bottom: 0;
    margin-top: 30px;
  }

  #association-member .member-group-badge1{
    margin-bottom: 0;
    margin-top: 0px;
  }


    #association-member .member-role{
    margin: 10px 0 0px;
    line-height: 1.5;
    font-size: 15px;
    padding-bottom: 0;
    letter-spacing: 0;
    }
    #association-member .member-links a{
    font-weight:500; 
    }
    #association-member .member-links {
        font-size: 15px;
    }
}








/* COMPANYページ */
section.page-company-fv {
    margin: 0px auto 0px;
    padding: 150px 0 87vh;
    background: url('../img/company-img.webp') ;
    background-repeat: no-repeat;
    background-position: right 15vw top 680px;
    background-size: 100%;
}

picture.page-company-title {
}

picture.page-company-title img{
    width: 518px;
    margin-top: 20px;
}

.page-company-fv h3{
    font-size: 37px;
    margin-top: 3px;
}

@media screen and (max-width:900px) {
    section.page-company-fv {
        margin: 0px auto 0px;
        padding: 100px 0 200px;
        background: url('../img/company-img.webp') ;
        background-repeat: no-repeat;
        background-position: right 30px bottom;
        background-size: 100%;
    }

    .page-company-fv h3 {
        font-size: 34px;
    }
    picture.page-company-title img {
        width: 70vw;
        margin-top: 0px;
    }
}

/* 01_MESSAGE */
section.page-company-message {
    margin: 0px auto 0px;
    padding: 240px 0 100px;
}

section.page-company-message h3 {
    margin-top: 60px;
    font-size: 37px;
}


picture.page-company-message-title{
    padding-top: 0px;
}

picture.page-company-message-title img{
    width: 356px;
}

picture.ppage-company-representative{
    margin-top: 40px;
}

picture.page-company-representative img{
    margin-top: 40px;
    width: 356px;
}

p.representative{
    text-align: right;
    line-height: 1.5;
}

p.representative b{
    font-size: 25px;
}

}

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

    /* 01_MESSAGE */
    section.page-company-message {
        margin: 0px auto 0px;
        padding: 100px 0 0px;
    }

    section.page-company-message h3 {
        font-size: 26px;
        margin-top: 0px;
        letter-spacing: 2px;
    }

    div.company-message {
        margin-top: 20px;
    }

    picture.page-company-message-title{
        padding-top: 0px;
    }

    picture.page-company-message-title img{
        width: 65vw;
    }
    p.page-company-representative{
        margin-top: 0px;
        padding-bottom: 0;
        text-align: center;
    }

    
    p.page-company-representative img{
        text-align: center;
        margin-top: 0px;
        width: 60vw;
    }

    p.representative{
        text-align: center;
        margin-top: 0px;
    }
    p.representative b{
        font-size: 24px;
        font-weight: normal;
    }


}

/* 02_COMPANY INFO */

section.page-company-companyinfo {
    margin: 600px auto 0;
    padding: 150px 0 150px;
    /*max-width: 1920px;*/
    background: #e8e8e3;
}

.companyinfo_img_area {
    z-index: 5555!important;
    position: relative;
    margin-top: -50vh;
    margin-left: 15vw;

}
.companyinfo_img_area img {
    width: 100%;
    z-index: 5555!important;
}

.companyinfo-text-area{
    padding-top: 200px;
}

picture.companyinfo-text-area-title{
    padding-top: 0px;
}

picture.companyinfo-text-area-title img{
    width: 623px;
}

.companyinfo-area{
    margin: 80px 0 0;
}

.companyinfo-area ul{
    margin: 0 0 80px;
}

.companyinfo-area ul li.companyinfo-li{
    margin: 0 30px 0 0;
    padding: 30px 0;
    border-top: 1px solid #666;
    font-weight: bold;
}

.companyinfo-area ul li ul.child-ul{
    display: flex;
    margin: 0;
}

.companyinfo-area ul li ul.child-ul li.li-left{
    width: 35%;
}

.companyinfo-area ul li ul.child-ul li.li-right{
    width: 65%;
}

.companyinfo-area ul li ul.child-ul li.li-right a{
    color: #212529;
}

picture.history-text-area-title{
    padding-top: 0px;
}

picture.history-text-area-title img{
    width: 343px;
}

picture.assessment-text-area-title{
    padding-top: 0px;
}

picture.assessment-text-area-title img{
    width: 530px;
}

section p.assessmentTitle{
    font-size: 25px;
    line-height: 1.5;
    letter-spacing: 1px;
    padding-bottom: 5px;
}

section p.assessmentTitle span{
    color: #f5871f;
}

.companyinfo-area img{
    margin-bottom: 100px;
}

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

    section.page-company-companyinfo {
        margin: 200px auto 0;
        padding: 200px 0 0px;
    }
    .companyinfo_img_area {
        z-index: 5555!important;
        position: relative;
        margin-top: -35vh;
        margin-left: 30px;
    }
    div.companyinfo-text-area {
        padding-top: 30px!important;
    }
    picture.companyinfo-text-area-title img{
        width: 70vw;
    }
    .companyinfo-area{
        margin: 30px 0 60px;
    }
    .companyinfo-area:last-of-type{
        margin: 30px 0 0px;
    }
    picture.history-text-area-title{
        padding-top: 0px;
    }

    picture.history-text-area-title img{
        width: 65vw;
    }

    picture.assessment-text-area-title{
        padding-top: 0px;
    }

    picture.assessment-text-area-title img{
        width: 100vw;
    }


    .companyinfo-area ul{
        margin: 0 0 0px;
    }

    .companyinfo-area ul li.companyinfo-li{
        margin: 0 0px 0 0;
        font-weight: normal;
    }

    section p.assessmentTitle{
        font-weight: bold;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0.5px;
        padding-bottom: 5px;
    }
    .companyinfo-area img{
        margin-bottom: 50px;
    }

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

    .companyinfo_img_area {
        margin-top: -42vh;
    }
}


/* 05_ACCESS */
section.page-company-access {
    margin: 0px auto 0px;
    padding: 200px 0 100px;
}

picture.access-img img{
    width: 320px;
}

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

    section.page-company-access {
        margin: 0px auto 0px;
        padding: 50px 0 50px;
    }

    picture.access-img img{
        width: 57vw;
    }

    iframe.access_map{
        height: 150px;
    }


}

/* GROUPページ */
section.page-group-fv {
    margin: 0px auto 0px;
    padding: 150px 0 87vh;
    background: url('../img/group-img.webp') ;
    background-repeat: no-repeat;
    background-position: right 15vw top 680px;
    background-size: 100%;
}

picture.page-group-title {
}

picture.page-group-title img{
    width: 360px;
    margin-top: 20px;
}

.page-group-fv h3{
    font-size: 37px;
    margin-top: 5px;
}

@media screen and (max-width:900px) {
    section.page-group-fv {
        margin: 0px auto 0px;
        padding: 100px 0 200px;
        background: url('../img/group-img.webp') ;
        background-repeat: no-repeat;
        background-position: right 30px bottom;
        background-size: 100%;
    }

    .page-group-fv h3 {
        font-size: 1.7em;
    }
    picture.page-group-title img {
        width: 55vw;
        margin-top: 0px;
    }
}

/* 01_GROUPE COMPANIES */
section.page-group-companies {
    margin: 0px auto 0px;
    padding: 220px 0 100px;
}

section.page-group-companies h3 {
    margin-top: 60px;
    font-size: 37px;
}


picture.page-group-companies-title{
    padding-top: 0px;
}

picture.page-group-companies-title img{
    width: 474px;
}

picture.companies-company img{
    width: 100%;
}

picture.group-companies-ill img{
    padding-top: 80px;
    width: 100%;
}

.group-site{
    margin-top: 60px;
}

.group-site p.group-site-title {
    margin-top: 8px;
}

.group-site p.group-site-title img{
    width: 163px;
}

/* 20240611 */
.group-site-row{
    width: 100%;
    padding: 0 15px 0 40px;
}

ul.group-site-ul li{
    margin-bottom: 30px;
    text-align: center;
}

ul.group-site-ul li a img{
    width: 226px;
    transition: all 0.5s;
}

ul.group-site-ul li a img:hover{
    opacity: 0.6; 
}

section p.asulead-home-bebore{
    padding-bottom: 20px;
}

section p.asulead-home-btn {
    text-align: right;
    margin-top: 15px;
    padding-bottom: 0;
}

section p.asulead-home-btn a img {
    width: 226px;
    transition: all 0.5s;
}

section p.asulead-home-btn a img:hover{
    opacity: 0.6; 
}


.group-companies-company{
    margin: 100px 0 40px;
    background-color: #e8e8e3;
    background-image: url('../img/companies-company01.webp') ;
    background-repeat: no-repeat;
    background-position: right top 50px;
    background-size: 45%;

}

.group-companies-company2{
    margin: 40px 0 40px;
    background-color: #e8e8e3;
    background-image: url('../img/companies-company02.webp') ;
    background-repeat: no-repeat;
    background-position: right top 50px;
    background-size: 45%;
}

.group-companies-company3{
    margin: 40px 0 40px;
    background-color: #e8e8e3;
    background-image: url('../img/companies-company03.webp') ;
    background-repeat: no-repeat;
    background-position: right top 50px;
    background-size: 45%;
}

.group-companies-company section,
.group-companies-company2 section,
.group-companies-company3 section{
    padding: 50px 50px 0px;
}

.group-companies-company section.section2,
.group-companies-company2 section.section2,
.group-companies-company3 section.section2{
    padding: 0px 50px 30px;
}


section h3.companies-company01{
    color: #f5871f;
}

section h3.companies-company02{
    color: #0d8f67;
}

section h3.companies-company03{
    color: #0082cb;
}

.group-companies-company section h3,
.group-companies-company2 section h3,
.group-companies-company3 section h3{
    font-size: 26px;
    margin: 0 0 0;
    padding: 0;
    padding-bottom: 10px;
    font-weight: bold;
    letter-spacing: 3px;
}

.group-companies-company section p,
.group-companies-company2 section p,
.group-companies-company3 section p{
    font-size: 17px;
    line-height: 1.7;
    padding-top: 0px;
}

.group-companies-company section p.contact-title,
.group-companies-company2 section p.contact-title,
.group-companies-company3 section p.contact-title{
    padding-bottom: 0px;
}

.group-companies-company section h3 b,
.group-companies-company2 section h3 b,
.group-companies-company3 section h3 b{
    font-size: 38px;
}


section p.group-tel{
    padding-bottom: 10px;
}

p.group-tel img{
    height: 52px;
    transition: all 0.5s;
}

p.group-tel img:hover{
    height: 52px;
    opacity: 0.6;
}


@media screen and (max-width:1180px) {
    .group-companies-company section p,
    .group-companies-company2 section p,
    .group-companies-company3 section p{
        font-weight: normal;
    }

}

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

    /* 01_GROUPE COMPANIES */
    section.page-group-companies {
        margin: 0px auto 0px;
        padding: 100px 0 0px;
    }

    picture.group-companies-ill img {
        padding-top: 30px;
        width: 100%;
    }

    .group-companies-company{
        margin: 50px 0 40px;
        background-color: #e8e8e3;
        background-image: url('../img/companies-company01.webp') ;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;

    }

    .group-companies-company2{
        margin: 40px 0 40px;
        background-color: #e8e8e3;
        background-image: url('../img/companies-company02.webp') ;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;
    }

    .group-companies-company3{
        margin: 40px 0 40px;
        background-color: #e8e8e3;
        background-image: url('../img/companies-company03.webp') ;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;
    }

    .group-companies-company section,
    .group-companies-company2 section,
    .group-companies-company3 section{
        padding: 30px 20px 0px;
    }

    .group-companies-company section.section2,
    .group-companies-company2 section.section2,
    .group-companies-company3 section.section2{
            padding: 20px 20px 35vh;
        }

    .group-companies-company section h3,
    .group-companies-company2 section h3,
    .group-companies-company3 section h3{
        font-size: 17px;
        margin: 0 0 0;
        padding: 0;
        padding-bottom: 10px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .group-companies-company section p,
    .group-companies-company2 section p,
    .group-companies-company3 section p{
        font-size: 14px;
        line-height: 1.7;
        padding-top: 10px;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .group-companies-company section h3 b,
    .group-companies-company2 section h3 b,
    .group-companies-company3 section h3 b{
        font-size: 24px;
    }

    .group-site{
        margin-top: 20px;
    }
    
    .group-site p.group-site-title {
        text-align: center;
    }
    
    .group-site p.group-site-title img{
        width: 50%;
    }
    
    section p.group-tel{
        padding-bottom: 15px!important;
    }

    section p.group-tel img{
        width: 100%!important;
        height: 100%!important;
    }


    /* 20240610 */
    .group-site-row{
        width: 100%;
        padding: 0px 0px!important;
        margin: 0 0 15px 0!important;
    }

    .group-site-row .col-6{
        padding: 0px 10px!important;
        margin: 0 0 0px 0!important;
    }

    ul.group-site-ul{
        list-style:none;
        display:flex;
        align-items: center;
        justify-content: space-between;
    }

    ul.group-site-ul li{
        margin: 0 0 15px 0px;
        text-align: center;
    }

    ul.group-site-ul li a img{
        width: 100%;
    }

    ul.group-site-ul-single{
        display: inline-block;
    }

    ul.group-site-ul-single li{
        text-align: left;
    }

    ul.group-site-ul-single li a img{
        width: 41vw;
    }

    section p.asulead-home-bebore{
        padding-bottom: 0;
    }

    section p.asulead-home-btn {
        text-align: left;
        padding-bottom: 10px;
    }

    section p.asulead-home-btn a img {
        width: 226px;
        transition: all 0.5s;
    }

    section p.asulead-home-btn a img:hover{
        opacity: 0.6; 
    }

}

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

    .group-companies-company section,
    .group-companies-company2 section,
    .group-companies-company3 section{
        padding: 30px 20px 0px;
    }

    .group-companies-company section.section2,
    .group-companies-company2 section.section2,
    .group-companies-company3 section.section2{
        padding: 20px 20px 40vh;
    }

}

/* 02_GROUP CHART */

section.page-company-chart {
    margin: 600px auto 0;
    padding: 150px 0 250px;
    /*max-width: 1920px;*/
    background: #e8e8e3;
}

.company-chart_img_area {
    z-index: 5555!important;
    position: relative;
    margin-top: -50vh;
    margin-left: 15vw;

}
.company-chart_img_area img {
    width: 100%;
    z-index: 5555!important;
}


.company-chart-text-area{
    padding-top: 250px;
}


picture.company-chart-title{
    padding-top: 0px;
}

picture.company-chart-title img{
    width: 577px;
}

picture.company-strength-title{
    padding-top: 0px;
}

picture.company-strength-title img{
    width: 626px;
}

body.page-id-21 section.contact,
body.page-id-27 section.contact {
    margin: 0px auto 0;
    padding: 110px 0 60px;
    /*max-width: 1920px;*/
    background: #000;
}

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

    body.page-id-21 section.contact,
    body.page-id-27 section.contact {
        margin: 0px auto 0;
        padding: 50px 0 60px;
        /*max-width: 1920px;*/
        background: #000;
    }


    section.page-company-chart {
        margin: 200px auto 0;
        padding: 330px 0 50px;
    }
    .company-chart-text-area{
        margin-top: 100px;
    }

    picture.company-chart-title img{
        width: 50vw;
    }
    picture.company-strength-title img{
        width: 75vw;
    }
    picture.company-strength-title{
        padding-top: 30px;
    }

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

    .companyinfo_img_area {
        margin-top: -42vh;
    }
    section.page-company-chart {
        margin: 200px auto 0;
        padding: 200px 0 50px;
    }

}

/* 投稿ページ関係 */
h1.entry-title{
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 3px;
    padding-bottom: 20px;
}

.posted-on a {
    color: #231f20!important;
    text-decoration: none!important;
    background-color: transparent;
}


#content{
    padding: 170px 0;
}

.entry-content p {
    margin-top: 30px;
    font-size: 1em;
}
.entry-meta{
    padding-bottom: 15px;
    font-size: 1em;
}
.entry-meta a{
    font-size: 0.8em;
    color: #212529!important;
}

span.nav-previous,span.nav-next {
    font-size: 17px;
    font-weight: bold;
    color: #212529!important;
}

span.nav-previous a,
span.nav-next a {
    font-size: 17px;
    font-weight: bold;
    color: #212529!important;
    text-decoration: none!important;
    transition-duration: 1s;
}

span.nav-previous a:hover,
span.nav-next a:hover{
    opacity: 0.7;
}

time.updated{
    display: none;
}

@media screen and (max-width:900px) {
    #content{
        padding: 30px 0;
    }

    .single-post .content-area{
        margin-top: 30px;
    }


}


/* mouseover */

.mouseover {
  display: inline-block;
  position: relative;
  }

.mouseover.off {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    transition: .4s ease;
  }
.mouseover.on {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
.mouseover.on, .mouseover.off {
    display: block;
  }
.mouseover.off:hover,
.mouseover.on:hover {
    opacity: 0;
  }



@media screen and (max-width:900px) {
    .mouseover {
        display: initial;
    }


}







/* ホバーエフェクト 画像縮小 */

.image_mouseover_1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.image_mouseover_1 img {
    display: block;
    transform: scale(1.2);
    transition-duration: 0.5s;
}

.image_mouseover_1 img:hover {
    transform: scale(1);
    transition-duration: 1s;
}




/*スライダー*/

.sliderArea {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}

.sliderArea.w300 {
    max-width: 300px;
}

.slick-slide {
    margin: 0 5px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.thumb {
    margin: 20px 0 0;
}

.thumb .slick-slide {
    cursor: pointer;
}

.thumb .slick-slide:hover {
    opacity: .7;
}

.sliderArea p {
    font-size: 14px;
}

.sliderArea p span {
    color: #6a3906;
}

.sliderArea p br {
    display: none;
}

@media screen and (max-width:900px) {
    .sliderArea {
        margin-top: 40px;
    }
    .sliderArea p br {
        display: block;
    }
}

.slick-dots {
    bottom: -35px!important;
    display: none!important;
}

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

    .menu-wrapper-logoarea h1 img {
        width: 70%;
    }
    h3.support_h3_sp {
        margin-right: 0px;
        font-family: 'Marcellus', serif;
        margin-top: 20px;
        letter-spacing: 3px;
        font-size: 22px;
    }
    p.support_text {
        margin-top: 30px;
        padding: 0;
        padding-right: 20px;
        font-size: 17px;
        line-height: 2.3;
        letter-spacing: 0px;

    }

    p.mens_text span {
        font-size: 12px;
    }
    .access_text {
        font-size: 13px;
        letter-spacing: 0;
    }
    .price {
        font-size: 14px;
    }
    .contact_tokuten{
        padding: 30px 10px;
        border: 1px solid #e6e6e6;
        margin: 30px 0;
    }

    p.contact_tokuten_text {
        padding-bottom: 10px;
        font-size: 13px;
        line-height: 2;
        text-align: center;
    }

}

@media screen and (max-width: 900px) {
    .sliderArea p,
    p.support_text,
    p.stylist_text,
    p.nail_text,
    p.nail_kome {
        text-align: justify;
        text-justify: inter-ideograph;
        letter-spacing: 1;
    }

}


/* 全画面ズームスライダー */

@keyframes zoom {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
    animation: zoom 20s linear 0s 1 normal both;
}

/*位置*/
.slide-text {
    position: absolute;
    top: 50px;
    left: 110px;
    font-family: serif;
    font-weight: bold;
    color: #1a1a1a;
    z-index: 9999;
    width: 43%;
    height: 100%;
    justify-content: top;
    align-items: top;

}
.slide-text-inner {
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
}

.slide-text-inner p{
    color: #fff;
    display: inline-block;
}

.slide-text-inner p img{
    width: 400px;
}


/*スクロール*/
.slide-scroll {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 9999;
    width: 55px;
    height: 80px;
    justify-content: center;
    align-items: center;
    animation: fadein-anim 5s linear forwards;
}
.move-y {
  animation: move-y 1s infinite alternate ease-in-out;
  display: inline-block;
}

@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(15px);
  }
}

.move-y-fade {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: slidein;
    animation-name: slidein;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.move-y-fade:after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0;
    left: 0;
    margin: auto;
    width: 1px;
    height: 70px;
    background-color: #fff;
}

@-webkit-keyframes slidein {
  0% {
    bottom: 20px;
    opacity: 0; }
  50% {
    bottom: 0;
    opacity: 1; }
  100% {
    bottom: -20px;
    opacity: 0; } }

@keyframes slidein {
  0% {
    bottom: 20px;
    opacity: 0; }
  50% {
    bottom: 0;
    opacity: 1; }
  100% {
    bottom: -20px;
    opacity: 0; } 
}


/*20250913 トップページ全画面 */
.wrap {
    position: relative;
    width: 100%;
    height: calc(88vh + 0px); /* ヘッダー高さ分 */
    margin-top: 80px;
    padding: 0 50px;
    z-index: 1;
}

/* 角丸を適用するラッパー */
.fv-wrapper {
    position: relative;
    width: 100%;
    height: 88vh;
    border-radius: 10px;
    overflow: hidden;  /* ← これで内側を切り抜く */
}

/* video本体 */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキストエリアのスタイル */
.top-mov-area {
    position: absolute;
    bottom: 6%;
    left: 8%;
    z-index: 2;
}

.top-mov-area h1{
    font-size: 48px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 5px;
    line-height: 1.4;
}

.top-mov-area p{
    padding-left: 5px;
}

.top-mov-area p img{
    width: 330px;
    margin-top: 10px;
}

/* Our Strength */
.strength-section {
  margin-top: 200px;
  margin-top: 220px;/*20241207*/
}

.background-image-container img {
  max-height: 650px;
  object-fit: cover;
}

/* 共通h1タイトル */
h1.particlelabs-title{
    font-size: 45px;
    font-weight: bold;
    line-height: 0.85;
    color: #121e64;
    letter-spacing: -2px;
}

h1.particlelabs-title_w{
    font-size: 46px;
    font-weight: bold;
    line-height: 0.85;
    color: #fff;
    letter-spacing: 2px;
}

h1.particlelabs-title_w span.release-green{
    color: #231815;
    background: #00dc4b;
    font-size: 23px;
    margin-left: 20px;
    vertical-align: middle;
    padding: 5px 10px;
}

p.subtitleh1 {
    color: #231815;
    font-size: 30px;
    margin-left: 55px;
    font-weight: 600;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    letter-spacing: 0px;
}

p.subtitleh1-w {
    color: #fff;
    font-size: 30px;
    margin-left: 55px;
    margin-top: 10px;
    font-weight: 600;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    letter-spacing: 0px;
}

/* 共通下層h1タイトル */
h1.particlelabs-lower-title{
    font-size: 90px;
    font-weight: bold;
    line-height: 0.85;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #121e64;
    letter-spacing: 0px;
}

h1.particlelabs-lower-title_w{
    font-size: 90px;
    font-weight: bold;
    line-height: 0.85;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #fff;
    letter-spacing: 0px;
}

.particlelabs-lower-title img,
.particlelabs-title_w img{
    margin-right: 5px;
}

.particlelabs-lower-title span{
    color: #00dc4b;
}

.particlelabs-lower-title_w span{
    color: #00dc4b;
}

.particlelabs-lower-title span.and{
    font-size: 70px;
    color: #121e64;
}


/* 共通h2タイトル */
h2.particlelabs-title{
    font-size: 90px;
    font-weight: 600;
    line-height: 0.85;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #121e64;
    letter-spacing: 0px;
}

h2.particlelabs-title_w{
    font-size: 90px;
    font-weight: bold;
    line-height: 0.85;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #fff;
    letter-spacing: 0px;
}

.particlelabs-title img,
.particlelabs-title_w img{
    margin-right: 5px;
}

.particlelabs-title span{
    color: #00dc4b;
}

.particlelabs-title_w span{
    color: #00dc4b;
}

p.subtitle {
    color: #231815;
    font-size: 18px;
    margin-left: 55px;
    font-weight: 700;
    margin-bottom: 20px;
}

p.subtitle-w {
    color: #fff;
    font-size: 18px;
    margin-left: 55px;
    margin-top: 10px;
    font-weight: 700;
    margin-bottom: 20px;
}

.strength-section h3 {
    font-size: 35px;
    color: #231815;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 2px;
    margin-top: 30px;
}

.strength-section .highlight {
  background-color: #00dc4b;
  padding: 5px 5px;
}

.strength-section .description {
  font-size: 17px;
  line-height: 2;
  text-align: justify;
  padding-right: 20%;
  letter-spacing: 1px;
}

.section-btn {
    text-align: right; /* ボタンを右寄せ */
    margin-top: 20px;
    padding-right: 20%;
}

.section-btn a {
  display: inline-block;
  width: 220px; /* ボタンの幅を設定 */
  padding: 10px 30px;
  border: 1px #121e64 solid;
  color: #121e64;
  text-decoration: none;
  border-radius: 30px;
  transition: background-color 0.3s;
  position: relative; /* 矢印をボタン内に配置するため */
  padding-right: 35px; /* 矢印分のスペースを確保 */
  font-size: 17px;
  font-weight: bold;
  text-align: left; /* テキストを左揃え */
}

.section-btn a:hover {
  background-color: #00dc4b;
  border: 1px #00dc4b solid;
  color: #fff;
  text-decoration: none;
}

.section-btn a::after {
  content: '→'; /* 矢印の文字 */
  position: absolute;
  right: 15px; /* ボタンの右端から適切な位置に配置 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px; /* 矢印のサイズを調整 */
  transition: transform 0.3s; /* ホバー時のアニメーション用 */
  font-size: 24px;
}

.section-btn a:hover::after {
  transform: translateY(-50%) translateX(5px); /* ホバー時に矢印を右に動かす */
}

/* 青背景の時のボタン */
.section-btn-blue {
  text-align: right; /* ボタンを右寄せ */
}

.section-btn-blue2,.section-btn2 {
  text-align: left;
  margin-top: 30px;
}

.section-btn-blue a {
  display: inline-block;
  width: 220px; /* ボタンの幅を設定 */
  padding: 10px 30px;
  border: 1px #fff solid;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  transition: background-color 0.3s;
  position: relative; /* 矢印をボタン内に配置するため */
  padding-right: 35px; /* 矢印分のスペースを確保 */
  font-size: 17px;
  font-weight: bold;
  text-align: left; /* テキストを左揃え */
}

.section-btn-blue a:hover {
  background-color: #00dc4b;
  border: 1px #00dc4b solid;
  color: #fff;
  text-decoration: none;
}

.section-btn-blue a::after {
    content: '→'; /* 矢印の文字 */
    position: absolute;
    right: 15px; /* ボタンの右端から適切な位置に配置 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px; /* 矢印のサイズを調整 */
    transition: transform 0.3s; 
    font-size: 24px;

}

.section-btn-blue a:hover::after {
  transform: translateY(-50%) translateX(5px); /* ホバー時に矢印を右に動かす */
}

.large-container{
    width: 1100px!important;
}


/* Cards */
.strength-cards-section {
    margin-top: 150px;
    margin-bottom: -170px;
    padding: 0!important;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px; /* Set the space between cards */
}

.card {
    flex: 1 1 calc(33.333% - 10px); /* 3 cards per row, accounting for the gap */
    margin: 0;
    border: none !important;
    position: relative;
}

.card-title {
    margin-top: -85px;
    font-size: 25px;
    font-weight: bold;
    color: #00dc4b!important;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
}

.card-title .number-highlight {
    font-size: 90px;
    display: block;
    line-height: 0.7;
    color: #00dc4b;
}

.card-img-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Align content to use available space */
    padding: 20px; /* Add padding if needed for better spacing */
    border-radius: none !important;
}

.card-text {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 0px; /* Ensure space between the text and button */
    flex-grow: 1; /* Pushes the button to the bottom */
    line-height: 1.6;
}

.circle-btn {
    align-self: center; /* ボタンを中央に配置 */
    margin-top: auto; /* カードの下部にボタンを配置 */
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 27px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.circle-btn:hover {
    background-color: #00dc4b;
    color: #fff;
    text-decoration: none;
}

.circle-btn span.arrow {
    margin: 0 0 0 15px; /* 余白を取り除く */
    font-weight: bold;
}

.circle-btn span.arrow img {
    width: 18px;
    height: 13px;
}

/* Top Product */
section.top_product {
    padding-top: 300px;
    padding-bottom: 200px;
}

.top_product_img{
}

.top_product-title-area {
    margin-top: -100px;
}

.top_product-title-area.row {
    padding: 0 30px;
}

.top_product h3 {
  font-size: 35px;
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 2px;
  margin-top: 30px;
}

.top_product-text {
    font-size: 17px;
    line-height: 2;
    margin-top: 10px;
    color: #fff;
}

p.top_product-btn {
    text-align: right;
    margin-top: 50px;
}

.top_product-btn a {
    display: inline-block;
    padding: 5px 30px;
    border: 1px #fff solid;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s;
    position: relative; /* 矢印をボタン内に配置するため */
    padding-right: 35px; /* 矢印分のスペースを確保 */
}

.top_product-btn a:hover {
    background-color: #00dc4b;
    border: 1px #00dc4b solid;
    color: white;
    text-decoration: none;
}

.top_product-btn a::after {
    content: '→'; /* 矢印の文字 */
    position: absolute;
    right: 15px; /* ボタンの右端から適切な位置に配置 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px; /* 矢印のサイズを調整 */
    transition: transform 0.3s; /* ホバー時のアニメーション用 */
}

.top_product-btn a:hover::after {
    transform: translateY(-50%) translateX(5px); /* ホバー時に矢印を右に動かす */
}

/* swiper */
/* Swiper Section Styling */
.top_product .product_carousel-wrapper._slide {
    position: relative;
    width: calc(100% + 50vw); /* 右側をはみ出させる */
    margin-left: auto; /* 右寄せ */
    margin-right: -25vw; /* 右に25vw分はみ出させる */
    overflow: visible;
}

.top_product ._slide .swiper-slide {
    width: auto; /* 固定幅を解除 */
    max-width: 460px; /* 最大幅を460pxに設定 */
    flex-basis: 100%; /* コンテナの幅を超えないように設定 */
}

.top_product ._slide ._img {
    overflow: hidden;
}

.top_product ._slide ._img img {
    width: 100%;
    transition: opacity 0.4s ease, transform 0.4s ease; /* opacityとtransform両方にアニメーション適用 */
    opacity: 1; /* 初期状態で透明度100% */
}

.top_product ._slide a:hover ._img img {
    transform: none; /* transformの影響を完全に無効化 */
    opacity: 0.8; /* ホバー時に透明度を80%に変更 */
}



/* その他のスタイル */
.product_carousel-wrapper {
    position: relative;
    margin-top: 50px;
}
.swiper-slide h4 {
    color: #00dc4b;
    font-weight: bold;
    margin-top: 20px;
    font-size: 25px;
}
.swiper-slide p {
    color: #fff;
    font-size: 15px;
}

/* Swiperスライド内の画像の親要素を調整 */
.swiper-slide a {
    display: block;
    overflow: hidden; /* 画像が拡大しても親要素の外に出ないようにする */
    position: relative;
}

/* 画像のスタイリング */
.swiper-slide a img {
    display: block;
    width: 100%; /* 画像を親要素に合わせる */
    height: auto;
    transition: transform 0.7s ease; /* 拡大時のアニメーション */
}

/* ホバー時に画像を拡大 */
.swiper-slide a:hover img {
    transform: scale(1.2); /* 120%ズーム */
}

.top_product_slide_controls {
    display: flex;
    justify-content: start;
    align-items: center;
    max-width: 1200px;
    margin: 20px 0 0 0px!important;
    padding-top: 20px;
    padding-left: 0!important;
}

.top_product_slide_controls .swiper-pagination {
    flex-grow: 1;
    max-width: 90%;
}

.product_carousel-wrapper .swiper-pagination {
    position: relative;
    width: 100%;
    height: 2px;
}

.swiper-pagination-progressbar {
    background: #fff;
    height: 2px;
}

.swiper-pagination-progressbar 
.swiper-pagination-progressbar-fill {
    background: #00dc4b;
    height: 2px;
}

.swiper-button-prev,
.swiper-button-next {
    position: static;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    margin-left: 10px;
    margin-top: 5px;
    background:none;
    font-weight: bold;
    font-size: 27px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #00dc4b;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none; 
}

.swiper-button-prev span.arrow,
.swiper-button-next span.arrow{
    margin: 0 0 4px 0; /* 余白を取り除く */
    font-weight: bold;
}

.swiper-button-prev span.arrow img,
.swiper-button-next span.arrow img{
    width: 18px;
    height: 13px;
}

/* 計測＆レンタル */
.entrusted-rental-section {
    padding-top: 50px;
    padding-bottom: 250px;
}

.entrusted-rental-section h2 {
  text-indent: -50px;
  padding-left: 50px;
}

.entrusted-rental-section h3 {
    font-size: 35px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 2px;
    margin-top: 30px;
}

.entrusted-rental-section .description {
    font-size: 17px;
    line-height: 2;
    text-align: justify;
    color: #fff;
    padding-right: 20%;
}

/* コンセプト 下層ページのみ */
.concept-low-section{
    position: relative;
    margin-top: 0px;
    margin-left: 0;
    z-index: 2;
}

.concept-img-text-low {
    margin-bottom: -85px;
    margin-left: 17%;
}

.concept-img-text-low h2{
    font-size: 105px;
    font-weight: 600;
    line-height: 0.85;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #121e64;;
    letter-spacing: -2px;
}

.concept-img-text h2 span.white{
    color: #fff;
}

.concept-img-text h2 span.jp-text{
    color: #fff;
    font-size: 20.5px;
    font-family: "ryo-gothic-plusn", sans-serif;
    letter-spacing: 2px;
}


/* Company 会社案内 */
.company-section {
    position: relative;
    padding: 0px 0;
    margin: 150px 0 100px;
}

.company-section .content-col {
    padding-left: 0; /* 必要に応じて調整 */
}

.company-section .image-col {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 50%); /* 左カラムの幅に応じて調整 */
    height: 100%;
    z-index: 0; /* 必要に応じて調整 */
}

.company-section .full-width-img {
    object-fit: cover;
    width: 100%; /* 右端までリキッド */
    object-position: center; 
    height: 350px;
}

.company-section .description {
  font-size: 17px;
  line-height: 2;
  text-align: justify;
  margin-top: 30px;
  margin-right: 30px;
}

/* 下層ページ 20241103 */
/* 製品情報 製品情報 パーティクル可視化システム */

/* 製品情報 ファーストビュー */

@media (min-width: 1200px) {
main.product-page .container {
        max-width: 910px!important;
    }
}

.product-first-view {
    background: linear-gradient(to bottom, #121e64 65%, #ffffff 65%);
    position: relative;
    padding-top: 195px;
    padding-bottom: 100px;
    text-align: left;
    margin-top: 0px;
}

.first-view-text {
    margin-bottom: 20px;
    z-index: 2;
    position: relative;
    left: 5%;
}

.product-image {
    display: block;
    max-width: 85%;
    position: relative;
    left: 0;
    top: 60px; /* Adjust to position the image nicely */
    z-index: 1;
}

section.product-section{
    background: #fff;
    padding: 100px 0 200px;
}

section.product-section-spec{
    padding: 0px 0 250px;
}

section.product-section .row,
section.product-section-blue .row{
    padding: 0 0 0 100px;
}

section.product-section .row .col-md-12{
    padding: 0 0 0 0;
}

section.product-section .row p.spec-text{
    font-size: 20px;
    font-weight: 600;
}


/* h2スタイリング */
h2.lower-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

h2.lower-title img {
    margin-right: 5px;
}

.lower-number {
    font-size: 105px;
    color: #00dc4b;
    line-height: 1;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 700, 'wdth' 90, 'slnt' 0;
    margin-right: 10px;
    letter-spacing: 2px;
}

.divider {
    display: inline-block;
    width: 3px;
    height: 70px;
    background-color: #00dc4b;
    margin: 10px 15px 0 15px;
}

.lower-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lower-text {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
}


.lower-subtext {
    font-size: 18px;
    color: #231815;
    font-weight: bold;
}

.text-white {
    color: #fff;
}

.spec-text-white-bold {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.spec-text-white {
    color: #fff;
    font-size: 17px;
    line-height: 2;
}




.text-green {
    color: #00dc4b;
}

.product-section h3 {
    font-size: 35px;
    color: #231815;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 2px;
    margin-top: 30px;
}

.product-section .highlight {
  background-color: #00dc4b;
  padding: 5px 5px;
}

.product-section .description {
  font-size: 17px;
  line-height: 2;
  text-align: justify;
}

/* 動画モーダル */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    margin: 5% auto;
    padding: 20px;
    max-width: 90%;
    width: 80%;
    background: #fff;
}

.modal-content iframe {
    width: 100%; /* モーダルの幅に合わせてiframeを表示 */
    height: 80vh; /* 画面の高さの80%を使用 */
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* サイドナビゲーションのスタイル */
.side-navigation {
    position: fixed;
    top: 180px;
    left: 0px;
    background-color: rgba(0, 220, 75, 0.9);
    padding: 10px;
    z-index: 1000;
    visibility: hidden; /* 初期非表示 */
    opacity: 0;         /* 初期不透明度 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 182px;
}

.side-navigation ul {
    list-style: none;
    padding: 10px 10px 0px 10px;
    margin: 0;
}

.side-navigation ul li {
    margin-bottom: 10px;
}

.side-navigation ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
}

.side-navigation ul li a.current {
    color: #231815;
}

.side-navigation ul li a:hover {
    color: #231815;
}

/* 01 Feature Point */
.feature-section {
    padding: 20px 0 0px;
    border-top: 1.5px solid #00dc4b;
    border-left: 1.5px solid #00dc4b;
    border-bottom: 1.5px solid #00dc4b;
    background-color: #f4f4f4;
    margin-left: calc(50% - 341px); /* Adjust based on container width */
    max-width: 100vw; /* Prevents overflow */
    margin-bottom: 100px;
}

.feature-section:last-child {
    margin-bottom: 50px;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 40px 50px;
    display: flex;
}

.content-container-b {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 40px 50px;
}

.content-container-c {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 20px 50px;
}

.content-container-d {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 30px 50px;
    display: flex;
}

.content-container-e {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 20px 50px;
    display: flex;
}

.text-block {
    margin-bottom: 20px;
    margin-top: -80px;
}

.text-block0 {
    margin-top: 0px;
}

.text-block0-10 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.section-number {
    font-size: 90px;
    color: #00dc4b;
    margin: 0;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    font-weight: bold;
}

.section-heading {
    font-size: 32px;
    font-weight: bold;
    color: #00dc4b;
    margin: 50px 0 20px;
    line-height: 1.6;
    letter-spacing: 2px;
}

.section-heading-b {
    font-size: 28px;
    font-weight: bold;
    color: #00dc4b;
    margin: 0px 0 20px;
    line-height: 1.6;
    letter-spacing: 2px;
}

.section-heading-b span {
    color: #00dc4b;
}

.section-heading-c {
    font-size: 28px;
    font-weight: bold;
    color: #00dc4b;
    margin: 0px 0 20px;
    line-height: 1.6;
    letter-spacing: 2px;
}

.section-heading-c span {
    color: #00dc4b;
}

h4.h4-highlight{
    font-size: 28px;
    background-color: rgb(0, 220, 75);
    border-radius: 25px;
    padding: 10px 25px;
    color: #121e64;
    margin-top: 30px;
    display: inline-block;
    font-weight: bold;
    letter-spacing: 2px;
}

h4.h4-highlight span{
    font-size: 16px;
}


.content-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.content-row-b {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
}

.section-description {
    font-size: 17px;
    line-height: 2;
    text-align: justify;
    padding-right: 50px;
    width: 35vw;
}

.section-description-c {
    font-size: 17px;
    line-height: 2;
    text-align: justify;
    padding-right: 0px;
    width: 35vw;
}

.full-width-image,
.full-width-image-b,
.full-width-image-c {
    flex: 1;
    position: relative;
    width: 36vw;
    text-align: right;
}

.full-width-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.full-width-image-b img {
    width: 100%;
    height: 282px;
    object-fit: cover;
    margin-top: 5px;
}

.full-width-image-c img {
    width: 90%;
    height: 282px;
    object-fit: cover;
}

.high-image img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

/* 02 Merit メリット */
.particlelabs_img{
    background-image: url('../img/particlelabs/particlelabs-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 520px; /* 固定の高さ */
}

section.product-section-blue{
    background: #121e64;
    padding: 0px 0 50px;
}

.product-section-blue h3 {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 2px;
    margin-top: 30px;
}

.image-container {
  margin: 50px 0;
}

.image-container img {
  object-fit: cover;
}

.features-image-container {
  margin: 30px 0 20px;
}

.features-image-container img.feautures {
  object-fit: cover;
  margin-bottom: 100px;
}

.features-image-container img {
  object-fit: cover;
}

.product-section-blue .description {
    font-size: 17px;
    line-height: 2;
    text-align: justify;
    color: #fff;
    font-weight: 400;
}

.product-02-merit{
    border: 1px solid #00dc4b;
    padding: 45px;
    margin: 20px 0;
}

.product-02-merit h4{
  font-size: 32px;
  font-weight: bold;
  color: #00dc4b;
  line-height: 1.6;
  letter-spacing: 2px;
}

.product-02-merit p{
  font-size: 17px;
  line-height: 2;
  text-align: justify;
  margin: 0;
}

/* 03 Line up ラインナップ */
#side-navi-03{
}

/* 背景グレー */
.light-glay{
  background: #f3f4f4;
}

.particlelabs_img_b{
    background-image: url('../img/particlelabs/particlelabs-background_b.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 520px; /* 固定の高さ */
}

.particlelabs_img_c{
    background-image: url('../img/particlelabs/particlelabs-background_c.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 520px; /* 固定の高さ */
}


section.lineup-section {
  padding: 0px 0 50px;
}

section.lineup-section .row{
    padding-left: 100px;
}

section.lineup-section .row2{
    margin-top: 20px;
    padding-left: 95px;
}
/* line-up-line */

.line-section {
    padding: 20px 0 0;
    margin-left: calc(50% - 341px); /* Adjust based on container width */
    max-width: 100vw; /* Prevents overflow */
    margin-bottom: 0px;
    margin-top: 50px;
}

.line-section100 {
    margin-top: 100px;
}

.line-up-line {
  border-top: 3px solid #00dc4b;
}

.line-up-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 0 0;
    display: flex;
    margin-bottom: 50px;
}

.line-up-text-block {
    margin-right: 50px;
    margin-top: 50px;
    width: 60vw;
}

.line-up-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
}

.line-up-full-width-image {
    flex: 1;
    position: relative;
    width: 40vw;
    text-align: right;
}

.line-up-full-width-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.line-up-full-width-image img.height350 {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

h3.lineup-title{
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 1px;
    text-indent: -60px;
    padding-left: 60px;
}

p.lineup-title-sub {
    color: #231815;
    font-size: 27px;
    margin-left: 60px;
    font-weight: 600;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    letter-spacing: 0px;
}

p.lineup-title-text {
    margin-top: 30px;
    color: #231815;
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 2;
    text-align: justify;
}

.description {
  font-size: 17px;
  line-height: 2;
  text-align: justify;
  letter-spacing: 0.5px;
}

.description span {
  font-size: 18px;
  font-weight: 600;
}

.lineup-highlight {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    color: #231815;
    line-height: 1.4;
}

.highlight-label {
    background-color: #00dc4b;
    color: #231815;
    padding: 10px 30px;
    border-radius: 35px;
    font-size: 35px;
    margin-right: 10px;
    white-space: nowrap; /* ラベルが改行されないようにする */
}

.main-text {
    display: inline-block;
    line-height: 1.4;
}

/* ラインナップのポイント */
.point-container {
    border: 2px solid #00dc4b; /* 全体を囲むボーダー */
    padding: 30px 50px 0!important;  /* 内側の余白調整 */
    background-color: #fff; /* 背景色 */
    width: 100%;
    margin: 20px 10px 100px;
}

.point-container-blue {
    background-color:#121e64!important; /* 背景色 */
    padding: 50px 50px 0 !important;
}




.point-container-blue .point-item {
    display: flex; 
    margin-bottom: 40px;
    padding-bottom: 30px;
    position: relative;
    padding-right: 0!important;
    padding-left: 0!important;
}

.point-container-blue .point-item:last-child {
    margin-bottom: 0px;
}
    
.point-container-blue p.text-white {
    font-size: 17px;
    line-height: 2;
}

.point-item .row {
    padding-left: 0!important;
}

p.merit-title{
    font-size: 30px;
    color: #00dc4b;
    font-weight: 500;
    line-height: 0.8;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 700, 'wdth' 90, 'slnt' 0;
    margin-bottom: 10px;
}

p.merit-text{
    font-size: 17px;
    line-height: 2;
}

.cases-title{
    display: flex; 
    margin-bottom: 10px;
}

p.glay-image{
    background: #999;
    width: 100%;
    height: 178px;
}

p.img-caption{
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    line-height: 1.6;
}

.point-item {
    display: flex;
    align-items: flex-start; /* 上揃え */
    margin-bottom: 20px;
    padding-bottom: 15px;
    position: relative;
    padding-right: 0!important;
    padding-left: 0!important;
}

.point-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #00dc4b; /* 区切り線の色 */
}

.point-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 30px; /* ラベルとテキストの間隔 */
}

.label {
    font-size: 18px;
    color: #00dc4b;
    font-weight: bold;
    margin-bottom: 0px;
    padding-left: 10px;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
}

.number {
    font-size: 65px;
    color: #00dc4b;
    font-weight: bold;
    line-height: 0.8;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    margin-bottom: 10px; /* 数字とテキスト間の余白調整 */
    letter-spacing: -1px;
}

.point-text h5 {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4; /* 行間の調整 */
    margin-top: 5px; /* ラベルとの間隔 */
}

.point-text h5 span {
    color: #00dc4b!important;
}

.point-container .point-text h5 {
    padding-top: 25px;
}

.point-container .point-text h5.text-white {
    padding-top: 0px;
    letter-spacing: 2px;
}

/* 04 Spec 製品仕様 */
#side-navi-04{
    padding-bottom: 50px;
}
.spec-large-img {
    width: 110%; /* コンテナ幅の120%に拡大 */
    position: relative; /* レイアウト調整 */
    /*right: -10%;  右側にはみ出させる */
    max-width: none; /* コンテナ幅の制限を解除 */
    margin-bottom: 100px;
}

.spec-large-img100 {
    width: 100%; /* コンテナ幅の100%に拡大 */
    position: relative; /* レイアウト調整 */
    max-width: none; /* コンテナ幅の制限を解除 */
    margin-bottom: 50px;
}

/* product_2 光源型BOSシステム */

section.product2-section{
    background: #fff;
    padding: 100px 0 100px;
}

section.product2-section .row,
section.product2-section-blue .row{
    padding: 0 0 0 100px;
}

section.product2-section .row .col-md-12{
    padding: 0 0 0 0;
}

section.product-section-blue .row .col-md-12 {
    padding: 0 0 0 0;
}


.product2-section h3 {
    font-size: 35px;
    color: #231815;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 2px;
    margin-top: 30px;
}

.product2-section .highlight {
  background-color: #00dc4b;
  padding: 5px 5px;
}

.product2-section .description {
  font-size: 17px;
  line-height: 2;
  text-align: justify;
}

/* 01 製品特徴 */

.feature-point-container {
    border: 2px solid #00dc4b; /* 全体を囲むボーダー */
    padding: 50px 50px 0!important;  /* 内側の余白調整 */
    background-color: #f3f4f4; /* 背景色 */
    width: 100%;
    margin: 100px 0px 0px!important;
}

.feature-point-container-blue {
    background: none!important; /* 背景色 */
}


.feature-point-item {
    display: flex;
    align-items: flex-start; /* 上揃え */
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;
    padding-right: 0!important;
    padding-left: 0!important;
}

.feature-point-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #00dc4b; /* 区切り線の色 */
}

.feature-point-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 30px; /* ラベルとテキストの間隔 */
}


.feature-point-text h5,
.feature-point-text-5 h5 {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4; /* 行間の調整 */
    margin-top: 5px; /* ラベルとの間隔 */
}

.feature-point-container .feature-point-text h5 {
    padding-top: 0px;
}

.feature-point-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.4; /* 行間の調整 */
    margin-top: 5px; /* ラベルとの間隔 */
}

.feature-point-text-5 p {
    margin: 0;
    font-size: 17px;
    line-height: 2; /* 行間の調整 */
    margin-top: 10px; /* ラベルとの間隔 */
}



/* PIVコンポーネント */

.product2-section h3 {
}

.product2-section h3 img {
    margin-bottom: 20px;
}


.product2-section .highlight2{
    background-color: #00dc4b;
    padding: 5px 10px;
    font-size: 32px;
    margin-left: 10px;
}

.product-section-blue .highlight2 {
    background-color: #00dc4b;
    padding: 5px 10px;
    font-size: 32px;
    margin-left: 10px;
    color: #231F20;
}

.product2-section h4,
.product-section-blue h4{
    font-size: 28px;
    color: #00dc4b;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 1px;
}

.product-section-spec .highlight2{
    background-color: #00dc4b;
    padding: 5px 10px;
    font-size: 32px;
    margin-left: 10px;
}






/* 私たちの強み */
/* 下層ページ ファーストビュー */
@media (min-width: 1200px) {
main.lower-page .container {
        max-width: 910px!important;
    }
}

.lower-first-view {
    background: linear-gradient(to bottom, #ffffff 65%, #121e64 65%);
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: left;
    margin-top: 80px;
}

.lower-first-view-news {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: left;
    margin-top: 80px;
}

.first-view-text {
    margin-bottom: 20px;
    z-index: 2;
    position: relative;
    left: 5%;
}

.lower-image {
    display: block;
    max-width: 85%;
    position: relative;
    left: 0;
    top: 50px; /* Adjust to position the image nicely */
    z-index: 1;
}


section.lower-section{
    background: #fff;
    padding: 100px 0 200px;
}

section.lower-section-glay{
    background: #f3f4f4;
    padding: 0px 0 150px;
}

section.lower-section-glay-b{
    background: #f3f4f4;
    padding: 0px 0 0px;
}

section.lower-section-white{
    background: #fff;
    padding: 150px 0 150px;
}

.lower-section-glay h3,
.lower-section-white h3 {
    font-size: 35px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 1.5px;
    margin-top: 30px;
}


section.lower-section .row,
section.lower-section-blue .row,
section.lower-section-glay .row,
section.lower-section-white .row{
    padding-left: 100px;
}

section.lower-section-blue{
    background: #121e64;
    padding: 100px 0 200px;
}

section.pb100{
    background: #121e64;
    padding: 0 0 100px;
}

section.pb0{
    background: #121e64;
    padding: 100px 0 0px;
}

article.pb-control{
    padding-bottom: 150px;
}

section.pb00{
    background: #121e64;
    padding: 0px 0 0px;
}

.lower-section-blue h3 {
    font-size: 35px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 2px;
    margin-top: 30px;
}

.lower-section-blue .description {
    font-size: 17px;
    line-height: 2.2;
    text-align: justify;
    color: #fff;
    font-weight: 400;
}

.bg-blue{
    background: #121e64;
    padding-bottom: 50px;
}

/* Youtube */
.youtube-area iframe{
    width: 100%;
    height: 435px;
}



/* Strength */
.lower-strength-section {
    padding: 20px 0 0px;
    border-top: 1.5px solid #00dc4b;
    border-left: 1.5px solid #00dc4b;
    border-bottom: 1.5px solid #00dc4b;
    margin-left: calc(50% - 341px); /* Adjust based on container width */
    max-width: 100vw; /* Prevents overflow */
    margin-bottom: 100px;
}

.lower-strength-section:last-child {
    margin-bottom: 0px;
}

.lower-section-blue .highlight {
  color: #00dc4b;
}

.strength-section-title {
    color: #00dc4b;
    font-size: 25px;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    padding-left: 0px;
}

.merit-p15 {
    padding-left: 15px;
}

.merit-p {
    padding-left: 20px;
}




/* Companyページ */
.profile-section {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0px;
    margin-top: 50px!important;
}

.president-image-section {
    display: flex;
    justify-content: flex-end;
}

.president-image {
    width: 265px;
    height: 303px;
    object-fit: cover;
}

.president-text-section {
    color: #ffffff;
    margin-right: 20px; 
}

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

.president-name {
    font-size: 27px;
    color: #6ece39;
    margin: 0;
    font-weight: bold;
}

.president-roman {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

section.lower-profile-section{
    padding: 50px 0 50px;
}

section.lower-profile-section .row{
    padding-left: 100px;
}

/* Message Profile */
h3.message-profile{
    font-size: 18px;
}

h3.message-profile img {
    margin-right: 5px;
    position: relative;
    top: -10px; /* 画像を少し上に移動 */
}

h3.message-profile span{
    font-size: 50px;
    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
    color: #00dc4b;
    letter-spacing: 0;
}

.message-profile-area{
    padding: 50px;
    border: 1.5px solid #00dc4b;
    margin-bottom: 30px;
}

.message-profile-text {
  font-size: 17px;
  line-height: 2.4;
  text-align: justify;
  letter-spacing: 0.4px;
}

.message-profile-img{
    text-align: right;
    margin: 0;
}

.message-profile-img img{
    width: 186px;
    height: 75px;
}

.message-profile-img img:hover{
    opacity: 0.7;
}

section.message-section{
    padding-bottom: 0;
}

/* 02 Outline 会社概要 */
.company-profile {
    width: 100%;
    margin: 30px auto 0px;
}

.profile-row {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.profile-row-last{
    border: none;
    margin-bottom: 30px;
}


.profile-label {
    width: 150px;
    font-weight: bold;
    font-size: 18px;
}

.profile-content {
    flex: 1;
    font-size: 17px;
    font-weight: 400;
}

.profile-map {
    padding-top: 20px;
    border: none;
}

.vision-text{
    margin: 30px 0 100px;
    font-size: 17px;
    line-height: 2;
    text-align: justify;
}

/* Entrusted & Rentalページ */
h3.rental-osusume{
    font-size: 32px;
    color: #fff;
    letter-spacing: 1;
    margin-bottom: 30px;
}

.rental-flow {
    padding: 35px 35px 25px!important;
    border: 1.5px solid #00dc4b;
    margin: 100px 0 0px 0px!important;
}

.rental-flow:last-child {
    margin-bottom: 50px!important;
}

.rental-description {
    font-size: 17px;
    line-height: 2;
    text-align: justify;
}

.letter-spacing-0{
    letter-spacing: 0px;
}

.letter-spacing-1{
    letter-spacing: 1px;
}

div.text-step{
    margin-top: -95px!important;
}

.rental-flow .section-title {
    padding-left: 25px;
}

.rental-flow .step-heading {
    font-size: 28px!important;
    font-weight: bold;
    margin: 20px 0 10px;
    line-height: 1.6;
    letter-spacing: 2px;
}

img.step-icon{
    text-align: center;
    vertical-align: middle;
    padding-top: 50px;
    width: auto;
}

.rental-note {
    padding: 50px 50px 30px!important;
    margin: 50px 0 100px 0px!important;
    background: #f3f4f4;
}

.rental-note h4 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 20px;
}

.rental-note ul {
    list-style-type: none;
    padding-left: 0;
}

.rental-note ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 2; 
    letter-spacing: 1px;
    text-align: justify;

}

.rental-note ul li::before {
    content: '●';
    color: #00dc4b; /* アイコンの色 */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
}


/* Newsページ */

h1.subtitle{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 3px;
    color: #00a5a8 !important;
}

@media (min-width: 1200px) {
main.news-page .container {
        max-width: 1040px!important;
    }
}

.news-list-section {
    padding: 0px 0 300px;
}

.news-category-buttons {
    list-style: none;
    padding: 0;
    display: flex; /* 横並びに配置 */
    gap: 20px; /* 各liの間隔を設定 */
}

.news-category-btn {
    display: block;
    width: 130px;
    border: 1px solid #00a5a8;
    color: #00a5a8 !important;
    border-radius: 20px;
    padding: 5px 10px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 30px;
    font-size: 16px;
}

/* お問い合わせボタンのスタイル */
.news-category-btn a {
    display: inline-block;
    color: #fff !important;
    text-decoration: none;
    transition: background 1s ease, color 1s ease;
    border-radius: 30px;

    /* 自然なグラデーション（左→右へ滑らかに） */
    background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%);
}

/* hover時：背景だけ暗色にして文字を白へ */
.news-category-btn.active,
.news-category-btn:hover {
    background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%);
    color: #fff !important;
    text-decoration: none;
}

.news-category-btn.active:hover {
    background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%);
    color: #fff !important;
    text-decoration: none;
}


main.news-page li.related-post__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid #ddd;
  border-bottom: none;
}

main.news-page li.related-post__items:last-child {
  border-bottom: 1px solid #ddd;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.pagination a, .pagination span {
    margin: 0 5px;
    padding: 8px 12px;
    background-color: #eeeeee;
    text-decoration: none;
    color: #333;
}

.pagination .current {
    font-weight: bold;
    background-color: #231815;
    color: #fff;
}

a.page-numbers:hover{
    text-decoration: none;
}


/* Contact */
article.contact-articles{

}

main.contact-page{
    margin-bottom: 150px;
}

.contact-section {
    padding: 0px 0 200px;
}

.contact-section p{
    font-size: 17px;
}

p.contact-intro{
    font-size: 18px;
    line-height: 2.3;
    margin-bottom: 50px;
    font-weight: 500;
}

.contact-section p.contact-tel-mail{
    margin-top: 30px;
}

.contact-section p.contact-tel-mail span{
    color: #00dc4b;
}

.contact-section p.contact-intro span.tel-number{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
}

.contact-section p.contact-intro span.tel-number a{
    color: #212529;
}

.contact-section p.contact-intro span.tel-tel{
    font-size: 17px;
    font-weight: bold;
}


.contact_area {
}

.form_area {
    border-top: 1px solid #00a5a8;
    border-radius: 0px;
    padding: 0px 0px 0px!important;
}

.wpcf7 {
  width: 100%!important;
  max-width: 100%!important;
  margin: 0 auto !important;
}

.wpcf7 .wpcf7-form p {
    margin-bottom: 0!important;
}

/* ============ 基本（SP基準：これまで通り縦積み） ============ */
.cform {
  width: 100%;
  margin: auto;
}

.cform tr {
    padding: 30px 0;
    border-bottom: 1px solid #00a5a8;
}

.cform tr:last-child {
    padding: 50px 0 10px;
    border-bottom: none;
}


.cform th,
.cform td {
  width: 100%;
  display: block;
  border-top: none;
}

.cform th {
  padding-bottom: 0;
}

.cform td {
  font-size: 20px;
  padding-bottom: 0px;
}


/* 入力要素（Contact Form 7） */
.wpcf7 input[type="text"].wpcf7-form-control,
.wpcf7 input[type="email"].wpcf7-form-control {
  font-size: 18px !important;
  height: 50px !important;
  border-radius: 0 !important;
}

.cform option,
.cform textarea,
.cform input[type=text],
.cform input[type=email],
.cform input[type=search],
.cform input[type=url] {
  width: 100%;
}

.cform th p,
.cform td p {
  font-size: 18px;
}

.cform th p {
  font-weight: 500;
}

.cform th p span.sub-text {
  font-size: 15px;
  font-weight: 400;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 0;
    font-size: 18px;
    letter-spacing: 0;
    font-weight: 500!important;
}

.wpcf7-radio span.wpcf7-list-item {
    width: 33%!important;
    padding-bottom: 10px;
}

section.thanks-page{
    margin-bottom: 150px;
}

/* ============ PCレイアウト（横並び 3:7） ============ */
@media screen and (min-width: 768px) {
  /* 行を左右2カラム化 */
  .cform tr {
    display: flex;
    align-items: flex-start;
    gap: 24px;               /* 行内の左右スペース（お好みで） */
  }

  .cform th {
    width: 30%;
    flex: 0 0 30%;
    display: flex;
    align-items: center;
    padding-right: 20px;     /* 見出しと入力欄の間隔 */
    text-align: left;
  }

  .cform td {
    width: 70%;
    flex: 1 1 70%;
    margin-bottom: 0px!important;
    padding-bottom: 0px;
  }

  /* ラジオ/チェック群は横並びで折り返し */
  td.syubetu {
    padding: 0px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;          /* アイテム間の余白 */
  }

  td.syubetu label {
    margin-right: 0;         /* gapで管理するので0に */
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

/* ============ SP：CF7ラジオを縦1列に ============ */
@media screen and (max-width: 767.98px){

  /* 行自体は通常フローでOK（必要なら） */
  .cform tr{ display: block !important; }
  .cform th, .cform td{ display: block !important; width: 100% !important; }

  /* ラッパーをブロック化 */
  td.syubetu .wpcf7-form-control{
    display: block !important;
  }

  /* ←これが肝：各項目をブロック化して縦積み */
  td.syubetu .wpcf7-list-item{
    display: block !important;
    width: 100% !important;
    margin: 0 0 0px 0 !important;   /* 項目間の余白 */
    padding-bottom: 0!important;
  }

  /* ラベル内の並び（○と文字は横並びのまま） */
  td.syubetu .wpcf7-list-item label{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: normal !important;
    margin-bottom: 0!important;
  }

  /* 万一の2カラム指定を打ち消し */
  td.syubetu{
    column-count: unset !important;
    -webkit-column-count: unset !important;
    column-gap: 0 !important;
    -webkit-column-gap: 0 !important;
  }
}




.required-srt {
    font-size: 15px;
    color: #ce0000;
    margin-left: 10px;
}

tr.kojin-item{
    border-top: #999 1px solid;
    border-bottom: #999 1px solid;
    margin-top: 0px;
    margin-bottom: 30px;
    display: inline-block;
}

tr.kojin-item th p{
    padding: 10px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.2;
    margin-bottom: 0;
}

span.doui {
    color: #ed6c00;
    text-decoration: underline;
}


/* チェックボックスとリンクテキストを横並びに配置 */
.privacy-container {
    display: flex;
    align-items: center;
    gap: 8px; /* チェックボックスとリンクテキストの間隔 */
    justify-content: center;
    margin-bottom: 0px;
    font-size: 18px;
}

.privacy-container label{
    margin-bottom: 0px;
}


/* チェックボックスのスタイル */
.privacy-container input[type="checkbox"] {
    margin: 0;
    transform: scale(1.2); /* チェックボックスのサイズ調整 */
}

/* リンクテキストのスタイル */
.privacy-link {
    color: #1d3557;
    font-weight: bold;
    text-decoration: underline;
    white-space: nowrap;
}

.privacy-link:hover {
    color: #00dc4b;
}



td.doui_td{
    padding-bottom: 0!important;
}

td.doui_td p{
    font-size: 16px!important;
}

/* 20251020 */
/* Submitボタンのラッパー */
.submit-btn {
  text-align: center;
  margin-top: 20px;
}

/* Contact Form 7 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  display: block !important;
  width: 220px !important;
  height: 50px !important;
  line-height: 50px !important;
  margin: 0 auto !important;
  padding: 0 24px 0 24px !important;
  border: none !important;
  border-radius: 30px !important;
  background: linear-gradient(to right, #5fbfad 0%, #00aaeb 100%) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
  -webkit-appearance: none !important;
  overflow: hidden !important;
}

/* ホバー時：黒背景＋白文字（ボタンは動かない） */
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}




/* 20241113 */
.modal-first-view {
    position: relative;
    padding-top: 0px;
    padding-bottom: 50px;
    text-align: left;
    margin-top: 80px;
}

.modal-dialog{
    max-width: 90%!important;
    width: 80%!important;
}

.modal-section {
    margin-left: 30px;
    padding-bottom: 50px;
}

.privacy-intro {
    padding-bottom: 1.5em;
    border-bottom: 1px #00dc4b solid;
    font-size: 17px;
}

.privacy-title {
    font-size: 28px;
    color: #121e64;
    display: flex;
    align-items: center;
    margin-top: 50px;
}

.modal-section p {
    font-size: 17px;
    line-height: 2;
}

.modal-section ul {
    list-style-type: disc;
    font-size: 17px;
    padding-left: 0;
}

.modal-footer {
    text-align: right;
    padding: 1em;
}

.close-img img {
    width: 50px;
    height: 50px;
}

/* ここからタブレット版 */
@media screen and (max-width:1200px) {
    /* 共通h2タイトル */
    h2.particlelabs-title,
    h2.particlelabs-title_w{
        font-size: 65px;
    }

    .strength-section h3 {
        font-size: 28px;
    }

    p.news-title {
        font-size: 65px;
    }

    p.contact-title {
        font-size: 65px;
    }

    .list-box-date,
    .related-post__items--title{
        font-size: 13px;
    }
    .news-category {
        width: 15%;
        font-size: 11px;
        padding: 3px 10px;
    }

    .concept-img-text-low h2{
        font-size: 95px;
    }
    .concept-img-text-low {
        margin-bottom: -85px;
        margin-left: 0%;
    }

}

span.sp-space{
    display: none;
}



/* ここからスマホ版 */

@media screen and (max-width:900px) {
    /* トップページ */
    /*20250913 トップページ全画面 */
    .wrap {
        position: relative;
        width: 100%;
        height: calc(79vh + 0px); /* ヘッダー高さ分 */
    }

    .fv-wrapper {
        height: 79vh;
        border-radius: 0;
    }

    .top-mov-area {
        bottom: 2%;
        left: 20px;
    }


    .container,
    .container-fluid {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .entrusted-rental-section h2 {
    text-indent: -28px;
    padding-left: 28px;
    }

    .container-fluid .row {
        padding-left: 20px!important;
        padding-right: 20px!important;
    }

    .strength-section {
        margin-top: 100px;
    }

    /* 共通h2タイトル */
    h2.particlelabs-title,
    h2.particlelabs-title_w{
        font-size: 3.2rem;
        letter-spacing: -1px;
        line-height: 1;
    }

    .particlelabs-title img, 
    .particlelabs-title_w img {
        width: 7%;
    }

    p.subtitle,
    p.subtitle-w {
        font-size: 1rem;
        margin-left: 30px;
        padding-bottom: 0;
        margin-bottom: 0;
    }


    .strength-section h3 {
        font-size: 1.6rem;
        margin-top: 0px;
    }

    .background-image-container {
        display: flex;
        align-items: flex-start;
        width: 100%!important;
        margin-bottom: 50px;
    }

    .background-image-container img {
        max-height: 320px;
        margin-left: -20px;
    }

    .background-image-container img.rental-img {
        max-height: 350px;
        margin-left: -20px;
    }
    .strength-section .description {
        font-size: 17px;
        padding-right: 0%;
        margin-bottom: 0!important;
    }

    .section-btn,
    .section-btn-blue {
        margin-top: 20px;
        padding-right: 0%;
    }

    .section-btn a,
    .section-btn-blue a{
        width: 180px;
        padding: 7px 30px;
        padding-right: 35px;
        font-size: 13px;
        font-weight: bold;
    }

    .section-btn a::after,
    .section-btn-blue a::after {
        font-size: 18px;
    }

    .large-container{
        width: 100%!important;
    }

    /* カード */
    .strength-cards-section {
        flex-direction: column; /* 縦並びに変更 */
        gap: 50px!important; /* カード間のスペースを調整 */
        margin-top: 50px;
        margin-bottom: -1000px;
        }

    .card {
        flex: 1 1 100%; /* 1列配置 */
        max-width: calc(100% - 60px); /* 余白を考慮した幅 */
        margin: 30px auto; /* カードの上下左右に余白を追加 */
    }

    .card-text {
        font-size: 1.2rem; /* 必要に応じて文字サイズを変更 */
        line-height: 1.5; /* 行間の調整 */
        padding-bottom: 0;
    }

    .circle-btn {
        width: 40px;
        height: 40px; /* ボタンのサイズを調整 */
        font-size: 20px;
    }

    .circle-btn span.arrow {
        margin: 0 0 0 10px;
    }

    .card-title {
        margin-top: -85px;
        font-size: 1.4rem; /* 見出しサイズを調整 */
    }

    .card-title .number-highlight {
        font-size: 5rem; /* ハイライトの数字サイズを調整 */
    }

    .top_product .col-12 {
        padding-right: 20px;
        padding-left: 20px;
    }

    section.top_product {
        padding-top: 1000px;
        padding-bottom: 100px;
    }

    .top_product_img {
        width: 100%;
        height: 300px;
    }


    .top_product h3 {
        font-size: 1.6rem;
        margin-top: 10px;
    }

    .top_product-text {
        font-size: 17px;
    }

    .wrap {
        padding: 0px;
        margin-top: 70px;
    }
    .swiper-container {
        width: 100%;
        margin: 0px 0 30px;
        padding: 0;
    }
    .slide-img img {
        object-fit: cover;
        height: 47vh;
        width: 100vw;
    }

    /*位置*/
    .slide-text {
        position: absolute;
        top: 30px;
        left: 30px;
        font-family: serif;
        font-weight: bold;
        color: #1a1a1a;
        z-index: 9999;
        width: 100%;
        height: 100%;
        justify-content: top;
        align-items: top;

    }
    .slide-text-inner {
        justify-content: center;
        align-content: center;
        align-items: center;
        width: 100%;
    }

    .slide-text-inner p{
        color: #fff;
        display: inline-block;
    }

    .slide-text-inner p img{
        width: 84vw;
    }

    .slide-scroll {
        position: absolute;
        bottom: 5%;
        left: 45%;
        z-index: 9999;
        width: 55px;
        height: 80px;
        justify-content: center;
        align-items: center;

    }





}


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

    .top-mov-area h1{
        font-size: 2rem;
    }


    /* Swiper全体のスタイル */
    .product_carousel-wrapper {
        position: relative;
        width: 100%!important; /* プログレスバーやボタンをはみ出さない */
        margin: 0 auto;
        overflow: hidden; /* wrapper全体を画面幅内に収める */
    }

    /* Swiperのスライダー内のスライドスタイル */
    .swiper-wrapper {
        overflow: visible; /* 次のスライドが見えるように */
    }

    /* スライドのスタイル */
    .swiper-slide {
        width: calc(100% - 0px)!important; /* 1つのスライドを80%幅に設定 */
        flex-shrink: 0!important;
        margin-right: 20px!important; /* スライド間の間隔 */
    }

    .top_product .product_carousel-wrapper._slide {
        margin-right: 0;
    }


    
    /* プログレスバー */
    .swiper-pagination-progressbar {
        background: #fff;
        height: 3px;
        margin-top: 0px; /* 上部余白でボタンと分離 */
        position: relative; /* プログレスバーは中央 */
        z-index: 10; /* スライドの上に表示 */
    }

    .swiper-pagination-progressbar-fill {
        background: #00dc4b;
        height: 3px;
    }

    /* ナビゲーションボタン */
    .swiper-button-prev,
    .swiper-button-next {
        width: 45px;
        height: 35px;
        font-size: 18px;
        border-radius: 50%;
        background: none;
        border: 1px solid #fff;
        color: #fff;
        z-index: 10; /* スライドの上に表示 */
    }

    .swiper-button-prev {
        left: 10px; /* 左側に配置 */
    }

    .swiper-button-next {
        right: 10px; /* 右側に配置 */
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background-color: #00dc4b;
        color: #fff;
    }

    /* プログレスバーとボタンの中央揃え */
    .top_product_slide_controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 20px; /* 左右の余白で中央揃え */
        margin-top: 0!important;
    }

    /* margin解除 20241210 */
    .mt40{
        margin-top: 0!important;
    }

    /* トップページレンタル 20241210 */
    .entrusted-rental-section {
        background-color: #121e64;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .entrusted-rental-section .description {
        font-size: 17px;
        line-height: 2;
        text-align: justify;
        color: #fff;
        padding-right: 0%;
    }
    .entrusted-rental-section .pr-5 {
        padding-right: 1rem !important;
    }

    .section-btn-blue2,.section-btn2 {
        text-align: right!important;
        margin-top: 20px!important;
    }

    video.concept-video {
        width: 100%;
        height: 270px;
        object-fit: cover;
        object-position: bottom; /* 下基準でトリミング */
        z-index: 1;
    }

    .concept-img-text {
        position: relative;
        margin-top: -111px;
        /*margin-left: 5%;*/
        z-index: 2;
        padding: 0 20px;
    }

    .concept-img-text h2{
        font-size: 3.7rem;
        letter-spacing: -2px;
        text-align: left;
        line-height: 0.85;
    }

    .concept-img-text h2 span.jp-text-b {
        font-size: 16.5px;
        line-height: 2.5;
        display: grid;
    }

    .concept-img-text h2 span.jp-text {
        color: #fff;
        font-size: 16.5px;
        line-height: 3.5;
        font-family: "ryo-gothic-plusn", sans-serif;
        letter-spacing: 1px;
        display: block;
    }

    .company-section {
        margin: 70px 0 100px;
        padding: 0 20px;
    }

    .company-section .description {
        font-size: 17px;
        line-height: 2;
        text-align: justify;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0!important;
    }

    .company-section .image-col {
        position: relative;
        top: 0;
        left: 40px;
        width: 100%;
        height: 200px;
        z-index: 0;
    }

    .company-section .full-width-img {
        object-fit: cover;
        width: 100%;
        object-position: center;
        height: 200px;
    }


    section.news {
        margin: 50px auto 0px;
        padding: 30px 25px 50px 0;
    }

    section.news .container {
        max-width: 100% !important;
        margin-bottom: 0px;
        padding: 0px 0px 0px 30px!important;
    }

    p.news-title {
        letter-spacing: 0px;
        font-size: 3.2rem;
        padding-bottom: 0;
    }

    p.news-title img {
        width: 40%;
        margin-right: 5px;
    }

    .news-category-buttons {
        list-style: none;
        padding: 0;
        margin-bottom: 30px;
        display: flex; /* 横並びに配置 */
        flex-wrap: wrap;
    }

    .news-category-btn{
        margin-bottom: 0;
    }

    .category-buttons {
        display: flex;
        flex-wrap: wrap; /* 子要素が折り返されるようにする */
        gap: 20px; /* 子要素間のスペース */
    }

    .category-buttons li {
        margin: 0;
    }

    section.contact {
        margin: 50px auto 0;
        padding: 200px 20px 180px !important;
        background-size: cover;
        background-color: #121e64;
        width: 100%;
        height: 350px;
    }

    .pb0{
        padding-bottom: 0;
    }

    section.contact p.contact-title img {
        width: 7%;
    }

    p.contact-title {
        letter-spacing: 0px;
        font-size: 3.2rem;
        padding-bottom: 0;
        text-align: left!important;
    }

    p.jp-title {
        color: #fff;
        font-size: 13px;
        margin-left: 25px;
        font-weight: 700;
    }

    .contact-text {
        font-size: 16px;
        line-height: 1.7;
        margin-top: 0px;
        padding-bottom: 10px;
        margin-bottom: 0;
    }

    p.contact-btn {
        text-align: right;
        margin-top: 10px;
    }

    p.contact-btn a {
        text-align: justify;
    }

    .contact-btn a {
        display: inline-block;
        width: 180px;
        padding: 7px 30px;
        padding-right: 35px;
        font-size: 13px;
        font-weight: bold;

    }


    #footer {
        padding: 60px 0px 0px;
        text-align: center;
    }

    #footer-nav {
        padding: 0px 0px 0px;
        display: flex;
        flex-wrap: wrap; /* 折り返し対応 */
    }

    #footer-logoarea {
        margin-left: 0px;
    }
    #footer-nav ul li {
        margin-bottom: 7px;
        font-size: 14px;
        text-align: left;
    }
    .footer-section .copyright{
        margin-left: 0;
    }

    .footer-address{
        margin-bottom: 0;
        font-size: 13px;
    }

    /* 下層ページ共通h1タイトル */
    h1.particlelabs-title{
        font-size: 2.2rem;
        letter-spacing: -2px;
    }

    h1.particlelabs-title_w{
        font-size: 2.2rem;
        line-height: 1.3;
        color: #fff;
        letter-spacing: 2px;
        display: block; /* 必要に応じてブロック要素にする */
        text-indent: 0; /* 1行目はインデントを付けない */
        padding-left: 1em; /* 2行目以降の左余白を設定 */
        margin-bottom: 0;
        position: relative; /* 背景画像やアイコンの調整で必要 */
    }

    h1.particlelabs-title_w img {
        position: absolute; /* アイコンを絶対位置で配置 */
        left: 0; /* 左端に配置 */
        width: 7%; /* 画像の幅 */
        top: 10%;
        height: auto; /* 比率を保持 */
    }

    span.release-green{
        color: #231815;
        background: #00dc4b;
        font-size: 18px;
        margin-left: 0px;
        margin-top: 10px;
        vertical-align: middle;
        padding: 5px 10px;
        letter-spacing: 2px;
        display: inline-block;
        font-family: "ryo-gothic-plusn", sans-serif;
    }

    p.subtitleh1 {
        color: #231815;
        font-size: 15px;
        margin-left: 35px;
        letter-spacing: 0px;
    }

    p.subtitleh1-w {
        color: #fff;
        font-size: 15px;
        margin-left: 35px;
        margin-top: 4px;
        letter-spacing: 0px;
        margin-bottom: 0!important;
        padding-bottom: 0!important;
        line-height: 1.6;
    }

    /* 共通下層h1タイトル */
    h1.particlelabs-lower-title{
        font-size: 50px;
        font-weight: bold;
        line-height: 0.85;
        font-family: "acumin-variable",sans-serif;
        font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
        color: #121e64;
        letter-spacing: 0px;
    }
        
    h1.particlelabs-lower-title_w{
        font-size: 50px;
        font-weight: bold;
        line-height: 0.85;
        font-family: "acumin-variable",sans-serif;
        font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
        color: #fff;
        letter-spacing: 0px;
    }

    .pl1em{
        padding-left: 0.65em;
    }
    .particlelabs-lower-title img,
    .particlelabs-title_w img{
        margin-right: 0px;
        width: 60%;
    }

    .news-page .particlelabs-lower-title img{
        margin-right: 0px;
        width: auto;
        height: 50px;
    }

    section p.particlelabs-lower-title{
        margin-bottom: 10px;
        padding-bottom: 0;
    }

    .particlelabs-lower-title span{
        color: #00dc4b;
    }

    .particlelabs-lower-title_w span{
        color: #00dc4b;
    }

    .particlelabs-lower-title span.and{
        font-size: 40px;
        color: #121e64;
    }

    h4.h4-highlight {
        font-size: 28px;
        background-color: rgb(0, 220, 75);
        border-radius: 25px;
        padding: 10px 25px;
        color: #121e64;
        margin-top: 30px;
        display: inline-block;
        font-weight: bold;
        letter-spacing: 2px;
    }



    /* 共通h2タイトル */
    h2.particlelabs-title{
        font-size: 3rem;
        line-height: 0.85;
        font-family: "acumin-variable",sans-serif;
        font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
        color: #121e64;
        letter-spacing: -1px;
    }

    h2.particlelabs-title_w{
        font-size: 3rem;
        line-height: 0.85;
        font-family: "acumin-variable",sans-serif;
        font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
        color: #fff;
        letter-spacing: -1px;
    }

    .particlelabs-title img,
    .particlelabs-title_w img{
        margin-right: 5px;
    }

    .particlelabs-title span{
        color: #00dc4b;
    }

    .particlelabs-title_w span{
        color: #00dc4b;
    }

    p.subtitle {
        color: #231815;
        font-size: 16px;
        margin-left: 35px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    p.subtitle-w {
        color: #fff;
        font-size: 16px;
        margin-left: 35px;
        margin-top: 0px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .strength-section h3 {
        font-size: 1.7rem;
        color: #231815;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 2px;
        margin-top: 10px;
    }

    .strength-section .highlight {
        background-color: #00dc4b;
        padding: 5px 5px;
    }

    .strength-section .description {
        font-size: 17px;
        line-height: 2;
        text-align: justify;
        padding-right: 0%;
        letter-spacing: 1px;
    }

    .large-container{
        width: 100%!important;
    }

    /* 製品情報 */
    .product-section h3 {
        font-size: 1.6rem;
        color: #231815;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 2px;
        margin-top: 30px;
    }

    .product2-section h3 {
        font-size: 1.6rem;
        color: #231815;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 2px;
        margin-top: 30px;
    }
    .product-section-blue h3 {
        font-size: 1.6rem;
        line-height: 1.6;
        letter-spacing: 2px;
        margin-top: 30px;
    }

    .product-first-view {
        background: linear-gradient(to bottom, #121e64 80%, #ffffff 80%);
        position: relative;
        padding-top: 120px;
        padding-bottom: 0px;
        text-align: left;
        margin-top: 0px;
    }

    .product-image {
        display: block;
        max-width: 85%;
        max-height: 85%;
        position: relative;
        left: 0;
        top: 0px;
        z-index: 1;
    }

    section.product2-section {
        background: #fff;
        padding: 50px 0 30px;
    }

    section.product2-section .row, 
    section.product2-section-blue .row {
        padding: 0 20px 0 20px;
    }


    /* 20241222 */
    .lower-number {
        font-size: 75px;
        margin-right: 0px;
        letter-spacing: -2px;
    }
    
    .divider {
        width: 3px;
        height: 60px;
        margin: 10px 15px 0 15px;
    }

    .lower-text {
        font-size: 36px;
        margin-bottom: 5px;
    }

    .lower-subtext {
        font-size: 14px;
    }


    .side-navigation{
        display: none;
    }

    .product-section .description {
        font-size: 17px;
        line-height: 2;
        text-align: justify;
    }

    .product2-section .description {
        font-size: 17px;
        line-height: 2;
        text-align: justify;
        margin-bottom: 0!important;
        padding-bottom: 0!important;
    }



    .youtube-area iframe {
        width: 100%;
        height: 200px;
    }

    section.product-section {
        background: #fff;
        padding: 50px 0px 0px;
    }

    .feature-section {
        border: 2px solid #00dc4b;
        padding: 20px 20px 0 !important;
        background-color: #f4f4f4;
        max-width: 100%;
        margin: 80px 20px 0px !important;
    }

    .feature-section:first-child {
        margin: 40px 20px 0px !important;
    }

    .feature-point-container {
        border: 2px solid #00dc4b;
        padding: 20px 20px 0 !important;
        background-color: #f3f4f4;
        width: 100%;
        margin: 50px 0px 0px !important;
    }

    .content-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 0 20px 0px;
        display: inline-block;
    }

       .section-description {
           font-size: 17px;
           line-height: 2;
           text-align: justify;
            padding-right: 0px;
            padding-bottom: 0;
            margin-bottom: 0;
           width: 100%;
       }
   
       .lower-strength-section .content-row,
        .feature-section .content-row {
            margin-top: 10px;
        }


    .product-02-merit {
        border: 1px solid #00dc4b;
        padding: 20px;
        margin: 20px 0;
    }


    section.lineup-section .row {
        padding-left: 0px;
    }

    .line-section {
        padding: 20px 0 0;
        max-width: 100%;
        margin: 30px 20px 0;
        display: inline-block;
    }

    p.lineup-title-text{
        padding-right: 40px;
    }

    .line-up-text-block {
        margin-right: 0px;
        margin-top: 0px;
        width: 100%;
    }

    .line-up-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 0 0 0;
        display: inline-block;
        margin-bottom: 20px;
    }


    .point-container {
        border: 2px solid #00dc4b;
        padding: 30px 20px 0 !important;
        background-color: #fff;
        width: 90%!important;
        margin: 20px 20px 50px;
        margin-top: 0!important;
    }

    .point-container-last{
        margin: 20px 20px 0px;
    }

       .point-container .point-text h5 {
           text-align: center;
           padding-top: 0px;
           font-size: 22px;
       }
   
        .col-md-4,
        .col-md-8{
            position: relative;
            width: 100%;
            padding-right: 15px!important;
            padding-left: 15px!important;
        }

        p.merit-title {
            font-size: 24px;
            margin-top: 10px;
            margin-bottom: 0px;
        }

        section.lineup-section {
            padding-bottom: 0!important;
            margin-bottom: 0px!important;
        }

        #side-navi-03 section.lineup-section {
            margin-top: -30px!important;
        }

       .point-item {
           display: inline-block;
           align-items: flex-start;
           margin-bottom: 20px;
           padding-bottom: 25px;
           position: relative;
           padding-right: 0 !important;
           padding-left: 0 !important;
       }

       .feature-point-item {
            padding-bottom: 10px;
            display: inline-block;
       }

       .feature-point-item:last-child {
            margin-bottom: 0px;
            padding-bottom: 10px;
        }

        .full-width-image img{
            height: 100%;
        }

    .point-label {
        display: grid;
        text-align: center;
        margin-right: 20px;
        width: 100%;
    }

    .feature-point-text h5, 
    .feature-point-text-5 h5 {
        text-align: center;
        font-size: 24px;
    }


    .particlelabs_img,
    .particlelabs_img_b,
    .particlelabs_img_c {
        width: 100%;
        height: 350px;
    }


    .product-02-merit h4 {
        font-size: 23px;
        line-height: 1.6;
        letter-spacing: 2px;
    }


    h3.lineup-title {
        font-size: 28px;
        line-height: 0.7;
        letter-spacing: 1px;
        text-indent: -55px;
        padding-left: 55px;
        padding-top: 25px;
        margin-bottom: 0;
    }

    p.lineup-title-sub {
        font-size: 21px;
        margin-left: 55px;
        letter-spacing: 0px;
        line-height: 1;
        margin-top: 15px;
    }

    #side-navi-03 .plr0{
        padding-left: 0;
        padding-right: 0;
    }

    .rental-page article.pb-control {
        padding-bottom: 0px;
    }

    .image-container img.product-merit {
        padding: 0 40px;
    }

    .product-02-merit.mt50{
        margin-top: 10px!important;
    }

    .line-up-full-width-image {
        flex: 1;
        position: relative;
        width: 100vw;
        text-align: right;
        margin-bottom: 30px;
    }

    .lineup-highlight {
        display: inline-block;
        font-size: 27px;
        line-height: 1.4;
    }

    .highlight-label {
        padding: 20px 30px;
        border-radius: 35px;
        font-size: 27px;
        margin-bottom: 10px;
        white-space: nowrap;
        line-height: 2.5;
    }

    .feature-point-text p {
        margin: 0;
        font-size: 16px;
        line-height: 1.8; /* 行間の調整 */
        margin-top: 5px; /* ラベルとの間隔 */
        text-align: center;
    }



    section.product-section .row, section.product-section-blue .row {
        padding: 0 20px 0 20px;
    }

    .lower-strength-section {
        padding: 20px 20px 10px;
        border: 1.5px solid #00dc4b;
        border-right:none;
        margin: 100px 0 30px 20px;
        max-width: 100%;
    }


    .rental-page h2.category-title {
        margin-top: -30px !important;
    }

    .strength-section-title {
        font-size: 25px;
        line-height: 1;
        padding-left: 3%;
        padding-bottom: 0;
    }

    .strength-section-title:first-of-type {
        font-size: 25px;
        line-height: 1;
        padding-left: 1%;
        padding-bottom: 0;
    }

    .section-number {
        font-size: 70px;
        margin: 0;
        line-height: 0.4;
    }

    .section-heading {
        font-size: 25px;
        font-weight: bold;
        color: #00dc4b;
        margin: 20px 0 20px;
        line-height: 1.6;
        letter-spacing: 1px;
    }


    .content-container-e {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 0px 0px 0px;
        display: inline-block;
    }

    .section-description-c {
        font-size: 17px;
        line-height: 2;
        width: 100%;
    }

    .full-width-image, 
    .full-width-image-b, 
    .full-width-image-c {
        flex: 1;
        position: relative;
        width: 100%;
        text-align: left;
    }

    .full-width-image-c img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .section-description-c {
        padding-bottom: 0;
    }

    .particlelabs_img_c {
        background-image: url(../img/particlelabs/particlelabs-background_c.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 350px;
    }


    .spec-large-img-container {
        position: relative;
        width: 100%; /* 親要素の幅を設定 */
        overflow-x: scroll; /* 横方向にスクロールを許可 */
        -webkit-overflow-scrolling: touch; /* スムーズスクロール対応 */
    }

    .spmb50{
        margin-bottom: 50px;
    }
    .spmb100{
        margin-bottom: 100px;
    }

    .spmb150{
        margin-bottom: 150px;
    }

    .spmb200{
        margin-bottom: 200px;
    }

    .spec-large-img {
        width: 200%; /* 画像を親要素より広く設定 */
        display: block; /* 必要に応じてブロック要素にする */
        max-width: none; /* デフォルトの最大幅制限を解除 */
        margin-bottom: 0px; /* 下部の余白 */
    }


    .spec-large-img.mt70 {
        margin-top: 30px;
    }

    .spec-text-white-bold {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    .spec-text-white {
        color: #fff;
        font-size: 17px;
        line-height: 2;
    }

    .spec-large-img-mb50 {
        margin-bottom: 50px;
    }

    section.product-section-spec {
        padding: 0px 0 200px;
    }

    .concept-img-text-low {
        margin-bottom: -157px;
        margin-left: 0%;
    }

    section.product-section .row p.spec-text {
        font-size: 18px;
        margin-top: 20px!important;
        padding-bottom: 0!important;
        margin-bottom: 10px;
    }




    /* お問い合わせフォーム */
    .contact-section {
        padding: 0px 10px 50px;
    }

    .lower-first-view-news {
        position: relative;
        padding: 40px 10px 0px;
        text-align: left;
        margin-top: 50px;
    }

    .contact-section p.contact-intro {
        font-size: 17px;
        line-height: 2.3;
        margin-bottom: 20px;
    }

    .contact-section p.contact-intro span.tel-number{
        font-size: 21px;
        font-weight: bold;
        line-height: 1.6;
    }


    .form_area {
        border-radius: 0px;
        padding: 0px 0px 0px !important;
    }




    .roofssection {
        margin-top: 50px;
    }
    .outerwallssection {
        margin-top: 50px;
    }
    .other_kouji {
        margin-top: 20px;
    }
    .accessoriessection {
        margin-top: 50px;
    }
    .contact_title_center img{
        width: 100%;
    }
    section.thanks-page{
        margin-bottom: 100px;
    }

    .concept-img-text h2 span.pl10 {
        padding-left: 0px;
    }
    .lineup-highlight .main-text {
        margin-top: 10px;
    }

    .line-up-row {
        display: inline;
    }

    
    #news-articles .entry-content p iframe{

        width: 100%;
        height: 200px;
    }

    .custom-single-page{
        font-family: Arial, sans-serif;
        color: #333;
        padding: 20px 20px 100px;
        margin: 0 auto;

    }

    .footer-fix {
        position: absolute;
        width: 100%;
        /*←絶対位置*/
        bottom: 0;
        /*下に固定*/
    }


    .wpcf7 .wpcf7-form p {
        margin-bottom: 0!important;
        padding-bottom: 5px!important;
    }
    td.doui_td {
        margin-top: 10px!important;
    }

    .privacy-container p {
        margin-top: 0!important;
    }

    .features-image-container {
    margin: 30px 30px 20px;
    }

    .features-image-container2 {
    margin: 30px 0px 20px!important;
    }


.point-container-blue .point-item {
    display: inline-block; 
    margin-bottom: 40px;
    padding-bottom: 30px;
    position: relative;
    padding-right: 0!important;
    padding-left: 0!important;
}

.cases-title{
    display: inline-block; 
    margin-bottom: 10px;
}

.point-container-blue .point-item:last-child{
    text-align: center;
    padding-bottom: 0;
}

main.rental-page section.lower-section-white {
        background: #fff;
        padding: 60px 20px 60px;
    }

.rental-flow {
    text-align: center;
    padding: 35px 10px 0px !important;
    border: 1.5px solid #00dc4b;
    margin: 80px auto 0px !important;
}

.rental-flow .section-title {
    padding-left: 0px;
    margin-left: 20px;
}


div.text-step {
    margin-top: -85px !important;
}

.text-step p{
    text-align: center;
}

img.step-icon{
    display: inline-block; 
    text-align: center;
    vertical-align: middle;
    padding-top: 0px;
    padding-bottom: 20px;
    margin-top: 10px;
    width: auto;
}

.rental-note {
    padding: 30px 10px !important;
    margin: 50px 0 150px 0px !important;
    background: #f3f4f4;
}

    .features-image-container img.feautures {
        padding: 0 30px;
    }
  
    .description {
        font-size: 17px;
        line-height: 2;
        text-align: justify;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
        padding-bottom: 0;
    }


    .profile-label {
        width: 30%;
        font-weight: bold;
        font-size: 17px;
    }
    
    /* PIVコンポーネント */

    .product2-section .highlight2{
        padding: 5px 10px;
        font-size: 24px;
        margin-left: 55px;
    }

    .product2-section h4, .product-section-blue h4 {
        font-size: 22px;
        line-height: 1.3;
    }

    .product2-section h4.pt15 {
        padding-top: 15px;
    }

    main.piv-component .product2-section h3 {
        font-size: 26px;
        line-height: 0.6;
        margin-bottom: 30px!important;
    }

    .product-title {
        font-size: 22px;
        line-height: 1.3;
        text-indent: 0; /* 1行目のインデントは0 */
        display: inline-block;
    }

    .product-title br {
        display: none; /* PC版ではbrを無効化 */
    }

    .product-title br.br-sp {
        display: inline; /* スマホではbrを有効 */
    }

    .product-title {
        text-indent: -0.5em; /* 最初の「・」を基準にずらす */
        padding-left: 0.5em; /* 2行目に「・」の幅分を確保 */
    }

    .feature-point-text-5 p{
        text-align: center;
        font-size: 15px;
    }

    section.product-section-blue{
        padding: 0px 0 0px;
    }

    main.piv-component .product-section-blue h3 {
        text-indent: -1.8em; /* 最初の「・」を基準にずらす */
        padding-left: 1.8em; /* 2行目に「・」の幅分を確保 */
        line-height: 1.5;
    }

    .product-section-blue .highlight2{
        font-size: 24px;
        line-height: 2.5;
    }


    .product-section-spec .highlight2{
        margin-left: 45px;
        font-size: 24px;
    }

    span.sp-space{
        display: inline-block;
        width: 0.3em; /* スペースの幅 */
    }

}





@media screen and (max-width:900px) {
    .footer-fix {
        position: static;
        width: 100%;
    }
}



.br-pc {
    display: block;
}

.br-sp {
    display: none;
}

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

    .br-pc {
        display: none;
    }
    
    .br-sp {
        display: block;
    }
    
}

@media screen and (max-width:375px) {
    .top-mov-area h1{
        font-size: 2rem;
    }
}

@media screen and (max-width:320px) {
    .slide-img img {
        object-fit: cover;
        height: 57vh;
        width: 100vw;
    }
        p.support_text {
        margin-top: 30px;
        padding: 0;
        padding-right: 20px;
        font-size: 14px;
        line-height: 2.3;
    }
    .price_text {
        font-size: 13px;
    }


}

/* imgover用 */
@media screen and (max-width: 768px) {

    a.mouseover:visited {
        width: 100%;
        max-width: 100%; 
        display: inline-block;
    }

    a img.imgover:visited {
        display: none;
    }

    a img.imgover:hover {
        display: none;
    }

}

/* シングルページのスタイリング　20241112*/
.custom-single-page {
    font-family: Arial, sans-serif;
    color: #333;
    padding: 40px 40px 100px;
    margin: 0 auto;
    background-color: #f9f9f9;
}

/* ヘッダーのスタイル */
.custom-header {
    margin-bottom: 20px;
    text-align: left;
}

/* ヘッダー内の横並びスタイル */
.label-date-container {
    display: flex;
    align-items: center; /* 縦位置を中央に揃える */
    gap: 8px;
}

.announcement-label {
    display: inline-flex;
    align-items: center; /* テキストを中央に揃える */
    justify-content: center;
    background: linear-gradient(135deg, #5fbfad 0%, #00aaeb 100%); /* ← グラデーション */
    color: #fff;
    border-radius: 15px;
    padding: 5px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    line-height: 1; /* 高さを合わせる */
    height: 100%; /* 親要素の高さに合わせる */
    box-sizing: border-box;
    margin-bottom: 15px;
    width: 125px;
}



.post-date {
    color: #777;
    font-size: 14px;
    line-height: 1; /* 高さを調整して中央に揃える */
}


/* タイトルのスタイル */
.main-title {
    font-size: 28px;
    font-weight: bold;
    margin: 10px 0 20px 0;
    line-height: 1.4;
    color: #333;
}

/* コンテンツのスタイル */
.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-top: 20px;
}

/* 特定の情報部分のスタイル */
.entry-content p {
    margin-bottom: 10px;
}

.entry-content p:first-of-type {
    margin-top: 0;
}

.entry-content strong {
    font-weight: bold;
}

/* ボタンとナビゲーションのスタイル */
.custom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0; /* 上部に罫線 */
}

.back-button {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    color: #333;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.back-button:hover {
    background-color: #ddd;
}

.pagination-buttons {
    display: flex;
    gap: 20px;
}

.prev-button, .next-button {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}

.prev-button:hover, .next-button:hover {
    text-decoration: underline;
}


/* フッターのナビゲーションリンクのスタイル */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 100px;
}

.nav-previous, .nav-next {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

.nav-previous a, .nav-next a {
    color: inherit;
    text-decoration: none;
}

.nav-previous a:hover, .nav-next a:hover {
    text-decoration: underline;
}



/* 一覧に戻るボタンのスタイル */
.back-button {
    display: inline-block;
    padding: 10px 30px;
    font-size: 14px;
    color: #333;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    color: #333;
}

a.back-button:hover {
    text-decoration: none;
    color: #333;
}

.back-button:hover {
    background-color: #ddd;
}


@media screen and (max-width: 768px) {
    #footer-nav nav.footernav6 {
        margin-top: 25px;
    }

    .footer_logo {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    #footer p.copyright {
        width: 100%;
        margin-top: 0px;
        text-align: left;
        font-size: 13px;
    }

}


@media screen and (max-width:900px) {
    section.news {
        margin: 100px auto 0px;
        padding: 30px 25px 50px 0;
    }

    picture.news-img{
        padding-top: 30vh;
        margin-bottom: 100px;
    }

    picture.news-img img{
        width: 42vw;
    }

    section.news .category-btn {
        margin-bottom: 0;
    }   
        
    .related{
        margin:26px 0;
    }
    .related--title{
        font-size: 18px;
        margin-top: 50px;
        margin-bottom: 20px;
    }
    .related-post{
        margin-top: 0px;
        padding-left: 0;
    }

    main.news-page li.related-post__items {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0 10px;
        border-top: 1px solid #ddd;
        border-bottom: none;
    }


    .related-post__items a{
        color: #333;
    }

    .related-post__items a:hover{
        text-decoration: none;
        color: #777;
    }

    .related-post__items--link{
        display:inline-block;
    }
    .related-post__items--left{
        width:100%;
        margin-right: 0px;
        margin-bottom: 10px;
    }
    .related-post__items--right{
        width:100%;
        padding-top:0px;
        padding-left:0px;
        padding-bottom: 20px;
        border-bottom: 1px solid #231f20;
        margin-bottom: 10px;
    }

    .related-post__items--title{
        color: #333;
        padding-top:5px;
        margin-bottom: 10px;
        display: inline-block;
        line-height: 1.6;
        width: 85%;
    }

    p.all-news{
        text-align: center;
    }


    /* 20250113 */
    section.lower-section .row,
    section.lower-section-blue .row,
    section.lower-section-glay .row,
    section.lower-section-white .row{
        padding-left: 0px;
    }



    .content-container-a,
    .content-container-b,
    .content-container-c,
    .content-container-d,
    .content-container-e {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 0 40px 0px;
    }

    .content-container-d{
        display: inline-block;
    }

    .lower-section-blue h3.rental-osusume{
        font-size: 24px;
    }
    main.rental-page .mb60 {
        margin-bottom: 0!important;
    }

    main.rental-page .lower-strength-section {
        padding: 20px 20px 10px;
        border: 1.5px solid #00dc4b;
        border-right: none;
        margin: 30px 0 20px 20px;
        max-width: 100%;
    }

    .full-width-image-b img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        margin-top: 10px;
    }

    main.rental-page .content-container-c{
        padding: 0 0 20px 0px;
    }

    main.rental-page h4.h4-highlight{
        margin-top: 10px;
    }




    .content-container-e {
        padding: 0 0 5px 0px;
    }


    .high-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .line-up-full-width-image img.height350 {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    section.product2-section .row .youtube-area{
        margin-top: 20px;
    }

    section.lower-section-blue {
        background: #121e64;
        padding: 50px 5px 0px;
    }

    /* レンタルページのみ */
    main.rental-page section.lower-section-blue {
        background: #121e64;
        padding: 10px 5px 0px;
    }

    section.lower-section-glay {
        background: #f3f4f4;
        padding: 0px 5px 30px;
    }

    section.lower-section-white {
        background: #fff;
        padding: 60px 5px 60px;
    }

    .lower-section-blue h3 {
        font-size: 28px;
        color: #fff;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 2px;
        margin-top: 10px;
    }

    .lower-section-glay h3, .lower-section-white h3 {
        font-size: 27px;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 1.5px;
        margin-top: 30px;
    }

    .lower-first-view {
        background: linear-gradient(to bottom, #ffffff 75%, #121e64 75%);
        position: relative;
        padding-top: 60px;
        padding-bottom: 40px;
        text-align: left;
        margin-top: 60px; 
    }

    .lower-image{
        top: 0px;
    }

    .image-bottom{
        top: 35px;
    }

    .bg-blue {
        background: #121e64;
        padding-bottom: 0px;
    }

    h3.message-profile {
        font-size: 20px;
        margin-top: 80px;
    }

    h3.message-profile span {
        font-size: 35px;
        font-family: "acumin-variable", sans-serif;
        font-variation-settings: 'wght' 600, 'wdth' 90, 'slnt' 0;
        color: #00dc4b;
        letter-spacing: 0;
    }

    h3.message-profile img {
        width: 36px;
        top: -5px;
    }

    .message-profile-area {
        padding: 20px;
        border: 1.5px solid #00dc4b;
        margin-bottom: 0px;
    }

    .message-profile-img {
        text-align: center;
        margin: 0;
    }

    .news-list-section {
        padding: 0px 0px 200px;
    }

    .custom-single-page {
        font-family: Arial, sans-serif;
        color: #333;
        padding: 20px 20px 20px;
        margin: 0 auto;
        background-color: #f9f9f9;
    }
    .nav-links {
        margin-top: 40px;
    }


    section.message-section{
        padding: 60px 0px 0;
    }

    section.company-profile-section{
        padding: 0 10px 80px;
    }

    section.vision-section{
        padding: 80px 10px 100px;
    }

    p.case-photo{
        margin-bottom: 10px;
        padding-bottom: 0;
    }

    p.img-caption {
        font-weight: bold;
        color: #fff;
        font-size: 18px;
        line-height: 1.6;
    }

    .profile-section {
        margin-top: 0px !important;
    }

    .president-image {
        width: 200px;
        height: 240px;
        object-fit: cover;
    }

    .president {
        font-size: 17px;
        margin: 0;
        padding-bottom: 5px;
    }

    .president-roman {
        font-size: 15px;
        font-weight: bold;
        margin: 0;
    }



}


/* トップページ 20250914*/
/* about-section */
/* ===== Bootstrap 4 想定：container 幅・gutter ===== */
:root{
  --container-max: 100%;
  --gutter: 15px;                /* BS4 の左右パディング相当 */
  --line-gap: clamp(8px, 1.1vw, 14px);
  --line-thick: 1px;
  /* 6本の色（上→下）。必要なら数値を差し替え */
  --line1: #0a9ac2;
  --line2: #12a7c8;
  --line3: #1fb2c6;
  --line4: #35bcb9;
  --line5: #57c3b4;
  --line6: #7aceb8;
}

/* ブレークポイントごとの container 最大幅（BS4準拠） */
@media (min-width:576px){ :root{ --container-max: 540px; } }
@media (min-width:768px){ :root{ --container-max: 720px; } }
@media (min-width:992px){ :root{ --container-max: 960px; } }
@media (min-width:1200px){ :root{ --container-max: 1140px; } }

/* ===== セクション余白 ===== */
.section-top { 
    padding: 200px 0 0 ; 
}

.page-section-top { 
    padding: 150px 0 0 ; 
}

.cta-section { 
    padding: 50px 0 200px ; 
}

/* ===== 見出しブロック（行末までラインを伸ばす調整込み） ===== */
.section-heading{
  display: flex; align-items: flex-end;
  /* .no-gutters が rowの負マージンを0にするため、ここで上書きして container の端まで広げる */
  margin-left: calc(-1 * var(--gutter)) !important;
  margin-right: calc(-1 * var(--gutter)) !important;
}
.section-title-wrap { position: relative; }
.section-title{ margin: 0; line-height: 1; }
.section-title img{ display:block; height:auto; } /* SVGタイトル用 */

.section-eyebrow{
  margin: .5rem 0 0rem 0rem;
  font-size: 20px;
  letter-spacing: 0em;
  color: #00a5a8;
  font-weight: 400;
}

.activity-section-eyebrow{
  margin: -1.8rem 0 0rem 0rem;
  font-size: 20px;
  letter-spacing: 0em;
  color: #00a5a8;
  font-weight: 400;
}

.role-section-eyebrow{
  margin: 0.5rem 0 0rem 0rem;
  font-size: 20px;
  letter-spacing: 0em;
  color: #00a5a8;
  font-weight: 400;
}

/* ===== 右方向のライン ===== */
.heading-lines-col{
  padding-right: 0 !important;
  overflow: visible;
}

.heading-lines{
  display:block; position: relative;
  margin-left: clamp(12px, 2vw, 28px);
  transform: translateY(-10px);
  width: calc(100% + (102dvw - var(--container-max)) / 2 + var(--gutter));

  /* 最下段オフセット + ライン太さで高さを確保 */
  height: calc(var(--line-thick) + 110px);
}

/* 6本を段々広がる間隔で描画（色は --line1〜6） */
.heading-lines::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: var(--line-thick);
  background: var(--line1);
  box-shadow:
    0   10px 0 var(--line2),
    0   25px 0 var(--line3),
    0   42px 0 var(--line4),
    0   60px 0 var(--line5),
    0  80px 0 var(--line6);
  opacity: .95;
}

/* Footer だけ色を白に上書き */
.outline-section .heading-lines::before,
#footer .heading-lines::before,
.footer .heading-lines::before{
  background: #fff;
  box-shadow:
    0   10px 0 #fff,
    0   25px 0 #fff,
    0   42px 0 #fff,
    0  60px 0 #fff,
    0  80px 0 #fff;
}


/* ===== 縦書き・本文 ===== */
.v-heading{
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 500;
  font-size: 40px;
  line-height: 2;
  letter-spacing: .3em;
  color: #231f20;
  /* タイトルとの距離を稼いで少し右へ */
  padding-left: clamp(16px, 3vw, 40px);
  margin-top: 10px;
}
.v-heading .accent{ color: #00a5a8; }

.section-copy{ font-size: 18px; }
.section-copy p{ 
    margin: 0 0 40px 0; 
    line-height: 2.4; 
    color: #231f20; 
    font-weight: 500;
}

/* ===== 「詳しく見る」ボタン（デザイン寄せ） ===== */
/* --- ボタンを右寄せ（行全体） --- */
.section-copy .mt-3{
  display:flex; 
  justify-content:flex-end; 
  align-items:center;
}

/* --- グループ本体 --- */
.btn-more.is-split{
  display:inline-flex; align-items:center; gap: .8rem; /* テキストと丸の間隔 */
  text-decoration:none; background:none; border:0; box-shadow:none; padding:0;
  margin-right: 60px;
}

/* --- テキスト（下線のみ） --- */
.btn-label{
  position:relative; display:inline-block;
  color:#14a9c7; font-weight:700; line-height:1;
  padding-bottom:.35rem;             /* 下線との間隔 */
}
.btn-label::after{
  content:"";
  position:absolute; left:0; right:auto; bottom:0;
  height:1px; width:100%;            /* 必要なら 100% → 80% 等に */
  background: currentColor;          /* テキストと同色 */
  opacity:.7;                        /* 少し淡く */
  border-radius:2px;
}

/* --- 右の丸（グラデーション＋ > ） --- */
.btn-circle{
  flex-shrink:0;
  width:50px; 
  height:50px; 
  border-radius:50%;
  background: linear-gradient(135deg, #5fbfad 0%, #00aaeb 100%);
  position:relative;
  display:flex; 
  justify-content:center; 
  align-items:center;
  font-size:1.5rem;    /* > のサイズ調整 */
  color:#fff;          /* 白い「>」 */
  font-weight:700;
}

a.btn-more .btn-circle{
    transition: 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

a.btn-more:hover .btn-circle{
  background: #000;
  color: #fff;
}


/* --- 旧スタイルの干渉を殺す（あれば） --- */
.btn-more::after{ content:none !important; }
.btn-more{ background:none !important; color:inherit; padding:0; box-shadow:none; }



/* 写真スライド */

.slide-section{
    margin: 50px 0 50px;
    padding: 0px 0 0px;
}

/*スライダー*/

.sliderArea {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.slick-slide {
    margin: 0 15px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.slick-prev,
.slick-next {
    z-index: 1;
    display: none!important;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.slick-dots {
    bottom: -35px;
}

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

    /* ===== セクション余白 ===== */
    .section-top { 
        padding: 50px 0 0 ; 
    }

    .page-section-top { 
        padding: 0px 0 0 ; 
    }

    .section-eyebrow {
        margin: .5rem 0 0rem 1rem;
        font-size: 16px;
        text-align: left;
    }

    .activity-section-eyebrow{
        margin: -0.5rem 0 0rem 1rem;
        font-size: 16px;
        letter-spacing: 0em;
        color: #00a5a8;
    }

    .section-copy{ font-size: 16px; }


    .section-copy p{ 
        margin: 0 0 0px 0; 
        line-height: 2; 
        font-size: 16px;
    }
    .section-title img {
        width: auto;
        height: 47px;
    }

    .section-titleL img {
        width: auto;
        height: 64px;
    }

    .role-section .section-title img {
        width: auto;
        height: 47px;
    }

    .role-section .section-titleL img {
        width: auto;
        height: 60px;
    }

    /* スマホ用に間隔を縮小（max-width:767px想定） */
    .heading-lines{
    transform: translateY(25px);
    }


  .heading-lines::before{
    content:""; position:absolute; left:0; right:0; top:0;
    height: var(--line-thick);
    background: var(--line1);
    box-shadow:
      0   6px 0 var(--line2),
      0  14px 0 var(--line3),
      0  24px 0 var(--line4),
      0  36px 0 var(--line5),
      0  50px 0 var(--line6);
    opacity: .95;
  }

/* ===== SP（スマホ）では横書きに変更 ===== */
    .v-heading {
        writing-mode: horizontal-tb;  /* ← 横書きに切り替え */
        text-orientation: mixed;
        font-size: 26px;              /* スマホ向けに少し小さく */
        line-height: 2;
        letter-spacing: 0.1em;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 20px;
    }

  /* Footer用は白 */
  .outline-section .heading-lines::before,
  #footer .heading-lines::before,
  .footer .heading-lines::before{
    background: #fff;
    box-shadow:
      0   6px 0 #fff,
      0  14px 0 #fff,
      0  24px 0 #fff,
      0  36px 0 #fff,
      0  50px 0 #fff;
  }

    .btn-more.is-split{
    margin-right: 0px;
    }

    .cta-section {
        padding: 50px 0 100px;
    }


.footer-section .section-eyebrow {
    font-size: 16px;
}

    .slide-section{
        margin: 0px 0 0px;
        padding: 0px 0 0px;
    }

    .slick-slide {
        margin: 0 5px;
    }

    .sliderArea {
        margin-top: 40px;
    }
    .sliderArea p br {
        display: block;
    }
}


/* ================================
   Activity：レイアウト（2列固定・gap厳守）
   ================================ */
.activity-section{
  --card-hgap: 44px;   /* 横の間隔 */
  --card-vgap: 36px;   /* 縦の間隔 */
  --card-min: 520px;   /* 1カードの最小幅 */
  --card-radius: 18px;
  margin-bottom: 200px;
}

.activity-grid{
  display:flex;
  flex-wrap:wrap;
  gap: var(--card-vgap) var(--card-hgap); /* 行と列の両方にgap */
  margin-top: 80px;
}

.activity-grid > *{
  flex: 1 1 calc((100% - var(--card-hgap)) / 2); 
  max-width: calc((100% - var(--card-hgap)) / 2); /* ★ container超え防止 */
  min-width: 0; /* ★ 強制的に縮小を許す */
}

@media (max-width: 767px){
  .activity-grid{ gap: 24px 0; }
  .activity-grid > *{
    flex: 1 1 100%;
    max-width: 100%;
  }
      .activity-section{
        margin: 80px 0 80px;
    }


}
/* ================================
   カード本体（全体クリックエリア）
   ================================ */
.feature-card{
  position: relative;
  display: flex;                 /* ← gridからflexへ変更 */
  align-items: flex-start;       /* 上揃え */
  gap: 16px;

  /* 右下の丸(36px) + 余白ぶん下パディングを確保 */
  padding: 40px 22px 40px 22px;

  min-height: 190px;
  border-radius: var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border: 1px solid rgba(0,0,0,.05);

  /* 影や過度なアニメは使わない（フラット方針） */
  transition: filter .15s ease;
}
.feature-card:hover{ text-decoration: none; filter: brightness(0.95); }

/* 左のイラスト（SVG） */
/* 左のイラスト（SVG画像） */
.feature-illust{
  flex: 0 0 120px;                /* 左カラム幅を110pxに固定 */
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-illust img{
  width:110px;                    /* 画像サイズも110px */
  height:auto;
  display:block;
}

/* 本文 */
.feature-body{ 
    flex:1; 
    display:flex; 
    flex-direction:column; 
    gap:.35rem; 
    justify-content:center;
    letter-spacing: 1px;
}

.feature-title{
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  color: #231f20;
}
.feature-desc{
  font-size: 15px;
  line-height: 1.9;
  color: #231f20;
  width: 75%;
}

/* ================================
   右下の丸ボタン（36px、影なし、">" 1つ）
   ================================ */
.btn-circleB{
  position: absolute;
  right: 16px;
  bottom: 16px;
  display:flex; 
  align-items:center; 
  justify-content:center;
  width: 36px; 
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5fbfad 0%, #00aaeb 100%);
  color:#fff; 
  font-weight:300; 
  line-height:1;
  font-size: 16px;               /* 中の「>」サイズ */
  box-shadow: none;              /* シャドウ無し */
}

a.feature-card:hover .btn-circleB{ 
    background: #000;
}
    
/* 互換クラス（既存HTMLを崩さないために残す） */
.btn-circle--sm{ width:36px; height:36px; font-size:24px; }

/* 装飾（左上の小音符）※不要なら丸ごと削除OK */
.feature-card::before{
  content:"";
  position:absolute; left:18px; top:14px;
  width:30px; height:30px; opacity:.85;
  background:
    radial-gradient(#00b4c6 6px 6px at 6px 24px, #00b4c6 6px, transparent 7px),
    radial-gradient(#00b4c6 4px 4px at 22px 20px, #00b4c6 4px, transparent 5px);
}

/* ================================
   SP 微調整（タイトル → イラスト → 説明）
   ================================ */
@media (max-width: 767px){

  /* カード全体 */
  .feature-card {
    display: flex;
    flex-direction: column;          /* 縦並び */
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 30px 20px 60px 20px;
    min-height: auto;
  }

  /* .feature-bodyをフラット化して子要素を直下扱いにする */
  .feature-body {
    display: contents;
  }

  /* タイトルを1番目に固定 */
  .feature-title {
    order: 1;
    font-size: 18px;
    line-height: 1.6;
    margin-top: 0;
    color: #231f20;
    font-weight: 600;
  }

  /* イラストを2番目に */
  .feature-illust {
    order: 2;
    flex: 0 0 auto;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-illust img {
    width: 80px;
    height: auto;
    display: block;
  }

  /* 説明文を3番目に固定 */
  .feature-desc {
    order: 3;
    width: 100%;
    font-size: 15px;
    line-height: 1.9;
    color: #231f20;
    margin-top: 8px;
    text-align: justify;
  }

  /* 丸ボタン */
  .btn-circleB {
    right: 16px;
    bottom: 16px;
    font-size: 22px;
  }
}

/* 共通（SP・PC両方で有効） */
.feature-desc {
  width: 100%;
}


/* ===== Parallax section ===== */
.concept-img-section{
  position: relative;
  height: 800px;                 /* ★固定高さ */
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.concept-img-section > img{
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100%;                  /* ★親にフィット */
  object-fit: cover;
  transform: translate3d(0, var(--pY, 0px), 0) scale(1.15);
  will-change: transform;
}

/* ==== コンセプトセクション ==== */
.concept-img-section{
  position: relative;
  overflow: hidden;
  height: 800px;   /* 背景画像の高さ */
}

.concept-img-section img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==== 中央テキスト ==== */
.concept-img-text{
  position: absolute;
  left: 50%;
  bottom: -40px; 
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

/* ==== テキスト画像を大きくする ==== */
.concept-img-text img{
  width: 100%;
  max-width: 1100px;   /* 最大幅を 1100px に */
  height: auto;
}

/* 動きが苦手な人にはオフ */
@media (prefers-reduced-motion: reduce){
  .concept-img-section > img{ transform: none; }
}

@media (max-width: 767.98px){
  .concept-img-section{ height: 400px; } /* SP時の高さ調整 */
  .concept-img-text{ bottom: 0%; }
}

p.license_img{
    text-align: center;
    margin-top: 60px;
    margin-bottom: 0;
}

/* ================================
   Outline セクション専用
   ================================ */
.outline-section{
  margin: 150px 50px 150px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 100px 50px 50px;

  /* 背景画像をセクション全体に設定 */
  background: url("../img/top-outline-bg.webp")
              center/cover no-repeat;
}

/* コンテンツを前面に */
.outline-section .container,
.outline-section .row,
.outline-section .v-heading,
.outline-section .section-copy{
  position: relative;
  z-index: 1;
}

/* 縦書き見出しを白系に */
.outline-section .section-eyebrow,
.outline-section .v-heading{ color:#fff; }

/* 本文の文字色 */
.outline-section .section-copy p{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* 分割ボタン */
.outline-section .btn-more.is-split{
  display:inline-flex; align-items:center; gap:.8rem;
  text-decoration:none;
}
.outline-section .btn-more.is-split .btn-label{
  color:#fff;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.6);
  font-weight:600;
}
.outline-section .btn-more.is-split .btn-label:hover{
  border-bottom-color:#fff;
}

/* 丸ボタン */
.outline-section .btn-circle{
  width: 50px; 
  height: 50px;
  border-radius:50%;
  background: linear-gradient(135deg, #5fbfad 0%, #00aaeb 100%);
  position:relative;
}
.outline-section .btn-circle::before{
  content: ">";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  color:#fff; font-weight:700; font-size:18px; line-height:1;
}

/* ---- SP 調整 ---- */
@media (max-width: 767px){
  .outline-section{
    border-radius: 14px;
    margin: 50px 30px 50px;
    padding: 30px 0px 30px;
  }
  .outline-section .btn-circle{ width:36px; height:36px; }
  .outline-section .btn-circle::before{ font-size:16px; }
}


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

    .page-fv-area p{
        padding-left: 5px;
    }

    .page-fv-area p img{
        width: auto;
        height: 60px;
    }

    .page-fv-area h1{
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 5px;
        line-height: 1.4;
        padding-left: 5px;
    }

    h2.section-title {
        margin-left: 20px;
    }

    .role-section-eyebrow {
        margin: 0.5rem 0 0rem 1rem;
        font-size: 16px;
    }
    p.license_img{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 60px;
    }

}

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


    .page-fv-area {
        position: absolute;
        left: 5%;
        bottom: 17%;
        z-index: 2;
    }


}

img.about_circle{
    width: 100%;
    height: auto;
}

/* ================================
   初回ページ表示の全体フェードを完全に無効化
   （子テーマCSSの末尾にコピペ）
   ================================ */

/* 2) ラッパーに仕込まれた初期アニメーション/フェードを殺す */
body,
.site,
.bodywrap,
.wrap,
main {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

/* SP */
@media (max-width:575.98px){
  .cta-pill{ 
    min-height:56px; 
    padding:12px 18px; 
    font-size:13px; 
} /* SPでも18px維持 */

.cta-pill__label {
    line-height: 1.3;
    font-weight: 500;
}

.jamm-cta-grid{ 
    row-gap:14px; 
    margin-top:0px !important;  /* 上余白（優先度確保） */
    margin-bottom:0px !important;  /* 上余白（優先度確保） */
    padding: 0 10px;
    }

    .jamm-cta-grid .col-6{
        padding: 0 5px!important;
    }
}