@charset "utf-8";

/* PC・SP共通 */
* { margin: 0; }

body {
    font-family: "kozuka-gothic-pr6n", sans-serif;
    color: #4d4d4d;
    padding: 0;
    margin: 0 auto;
    text-align: center;
 }

section, footer {
    text-align: center;
    margin: 0 auto;
}

ul { list-style: none; }

img {
    width: 100%;
    vertical-align: top;
}

a, a:hover, a:visited{ 
    text-decoration: none;
}

a:hover { opacity: 0.7; }

.container { position: relative; }

.faq { display:flex; flex-direction: column;}

/************************/
/**** アニメーション *****/
/************************/
/*** ボタン ***/
.btn_anime {
    animation: hoverShake 0.2s linear 0s infinite;
}
@keyframes hoverShake {
    0% {transform: skew(0deg, 0deg);}
    25% {transform: skew(1deg, 1deg);}
    75% {transform: skew(-1deg, -1deg);}
    100% {transform: skew(0deg, 0deg);}
}
.btn_anime:hover {
    animation: none;
}

/*** スライダー ***/
/* スライド用矢印 */
.slick-arrow {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    margin: auto;
    cursor: pointer;    /* カーソルをポインターに */
  }
.slider {
    position: absolute;
    margin: 0 auto;
    width: 100%;
}
/* スライド画像 */
.slider li img {
    height: auto;
    width: 99%;
    margin: 0 auto;
}

/*** モーダル表示 ***/
/* 表示前の写真 */
.service_list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 67%);
}
.service_list a { vertical-align: middle; } 
/* モーダルの背景 */
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	text-align: center;
    vertical-align: middle;
	background: rgba(0,0,0,0.5);
	overflow: auto;
	opacity: 0;
	visibility: hidden;         /* jQueryでactiveクラスがつくまで非表示 */
	transition: 0.3s;
    z-index: 999;
}
/*モーダル本体に「active」クラスが付与された時*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body {
	position: relative;
    vertical-align: middle;
	width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/*モーダルを閉じるボタンの指定*/
.btn_close {
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	height: auto;
	cursor: pointer;
}

/*** アコーディオン ***/
/* タイトルの配置 */
.faq .title {
    top: 0;
    margin: 0 auto;
}
/* 画像は背景として表示 */
.faq .bg {
    background-size: 100% auto;
    background-position: top;
}
/* 配置 */
.faq .accordion {
    margin: 0 auto;
    list-style: none;
}
.faq .question div { margin: 0 auto; }

/* 開くボタン／閉じるボタン */
.faq .question {
    position: relative; /* 開閉ボタンをつけるため */
    cursor: pointer;
}
.faq .question .accordion_open,
.faq .question .accordion_close  {
    position: absolute;
}
.faq .question .accordion_close  { visibility: hidden; }    /* 最初は非表示 */

/* ＋ボタンクリック時 */
.faq .question.close .accordion_open {
    visibility: hidden;     /* ＋ボタンを非表示 */
}
.faq .question.close .accordion_close {
    visibility:visible;     /* ーボタンを表示 */
}
/* 回答 */
.faq .answer { display: none; }  /* はじめは非表示 */
/* 回答の見た目　*/ 
.faq p {
    text-align: left;
    background-color: #E6E6E6;
}

/**************************/
/********* pc用設定 ********/
/* 769px以上に適用されるCSS */
/***************************/
@media screen and (min-width: 769px) {

    /***** 表示の切り替え *****/
    .pc { display: block; }
    .sp { display: none; }

    /***** 全般の設定 *****/
    section, footer { max-width: 1024px; }

    /***** 個別設定 *****/
    /*** １つ目のLINEボタン ***/
    /* LINEボタン */
    #section2 .btn_line {
        width: 58.5%;
        position: absolute;
        top: 51.5%;
        left: 22.2%;
    }
    /* 手 */
    #section2 .hand img{
        width: 10.8%;
        position: absolute;
        top: 65.5%;
        left: 83.8%;
    }

    /*** ２つ目のLINE・telボタン ***/
    /* LINEボタン */
    #section5 .btn_line {
        width: 55%;
        position: absolute;
        top: 42.7%;
        left: 24.0%;
    }
    /* 手 */
    #section5 .hand img{
        width: 10.8%;
        position: absolute;
        top: 56.9%;
        left: 84.4%;
    }
    /* 電話 */
    #section5 .btn_tel {
        width: 35.3%;
        position: absolute;
        top: 63%;
        left: 24.2%;
    }

    /*** ３つ目のLINE・telボタン ***/
    /* LINEボタン */
    #section12 .btn_line {
        width: 55.5%;
        position: absolute;
        top: 42.7%;
        left: 22.8%;
    }
    /* 手 */
    #section12 .hand img{
        width: 10.8%;
        position: absolute;
        top: 55.5%;
        left: 83.5%;
    }
    /* 電話 */
    #section12 .btn_tel {
        width: 35.3%;
        position: absolute;
        top: 67.7%;
        left: 23.8%;
    }

    /*** 最後のLINE・telボタン ***/
    /* LINEボタン */
    #section16 .btn_tel {
        width: 70%;
        position: absolute;
        top: 53.4%;
        left: 15.4%;
    }
    /* 電話 */
    #section16 .btn_line {
        width: 52.5%;
        position: absolute;
        top: 74.3%;
        left: 16%;
    }

    /*** 実績:スライドショー  ***/
    /* レイアウト */
    .slider { top: 36.5%; }
    .slider li img {
        width: 100%;
        padding: 0 2%;
    }

    /* 矢印 */
    .slick-prev {
        width: 4%;
        height: auto;
        left: 7%;
        z-index: 10;
    }
    .slick-next {
        width: 4%;
        height: auto;
        right: 7%;
        z-index: 10;
    }

    /*** サービス一覧:モーダルで詳細表示  ***/
    /* レイアウト */
    .service_list {
        top: 18.7%;
        gap: 0.8% 8.5%;
        grid-template-columns: repeat(2, 67%);
    }
    .service_list a img { max-width: 344px; }

    /*モーダル枠の指定*/
    .modal-body { max-width: 929px; }

    /*モーダルを閉じるボタンの指定*/
    .btn_close { width: 3%; }

    /* 閉じるボタン個別設定  */
    #service-detail1 .btn_close {
        bottom: 3.8%;
        right: 3.2%;
    }
    #service-detail2 .btn_close {
        bottom: 8.5%;
        right: 2.8%;
    }
    #service-detail3 .btn_close {
        bottom: 6.5%;
        right: 2.3%;
    }
    #service-detail4 .btn_close {
        bottom: 6.5%;
        right: 2.3%;
    }
    #service-detail5 .btn_close {
        bottom: 6.5%;
        right: 2.3%;
    }
    #service-detail6 .btn_close {
        bottom: 3.0%;
        right: 2.3%;
    }
    #service-detail7 .btn_close {
        bottom: 6.0%;
        right: 1.8%;
    }
    #service-detail8 .btn_close {
        bottom: 1.5%;
        right: 2.5%;
    }

    /*** よくある質問:アコーディオンで回答表示  ***/
    /* タイトルの配置 */
    .faq .title {
        width: 72%;
        margin-top: 1.1%
    }
    /* 画像は背景として表示 */
    .faq .bg { 
        background-image: url('../img/pc/section15.jpg'); 
        background-repeat: repeat;
    }
    /* 文字の大きさ */
    .faq p {
        font-size: min(1.8vw,18px);
        font-weight: 400;
        letter-spacing: 0.1rem;
        padding: 3% 7% 5% 7%;
    }
    /* 配置 */
    .faq .accordion {
        width: 72%;
        max-width: 723px;
        margin-top: 3%;
    }
    .accordion li { margin-bottom: 2.2%; }
    .accordion li:last-child {
        padding-bottom: 4%;
        margin-bottom: 0;
    }
    .faq .question .accordion_open,
    .faq .question .accordion_close  {
        width: 2.9%;
    }
    .faq .question .accordion_open {
        top: 31.8%;
        right: 4.1%;
    }
    .faq .question .accordion_close  {
        top: 49%;
        right: 4.1%;
    }
}

/**************************/
/********* sp用設定 ********/
/* 768px以下に適用されるCSS */
/***************************/
@media screen and (max-width: 768px) {

    .pc { display: none; }
    .sp { display: block; }

    /***** 全般の設定 *****/
    section, footer {
        max-width: 640px;
        width: 100%;
    }

    /***** 個別設定 *****/
    /*** １つ目のLINEボタン ***/
    /* LINEボタン */
    #section2 .btn_line {
        width: 82.8%;
        position: absolute;
        top: 64.8%;
        left: 9.9%;
    }
    /* 手 */
    #section2 .hand img{
        width: 12%;
        position: absolute;
        top: 68%;
        left: 82%;
    }

    /*** ２つ目のLINE・telボタン ***/
    /* LINEボタン */
    #section5 .btn_line {
        width: 82.8%;
        position: absolute;
        top: 58%;
        left: 9.8%;
    }
    /* 手 */
    #section5 .hand img{
        width: 12.6%;
        position: absolute;
        top: 69%;
        left: 81.5%;
    }
    /* 電話 */
    #section5 .btn_tel {
        width: 82.8%;
        position: absolute;
        top: 76.3%;
        left: 9.8%;
    }

    /*** ３つ目のLINE・telボタン ***/
    /* LINEボタン */
    #section12 .btn_line {
        width: 82.8%;
        position: absolute;
        top: 57%;
        left: 9.8%;
    }
    /* 手 */
    #section12 .hand img{
        width: 12.0%;
        position: absolute;
        top: 72.9%;
        left: 81.9%;
    }
    /* 電話 */
    #section12 .btn_tel {
        width: 82.8%;
        position: absolute;
        top: 74.9%;
        left: 9.8%;
    }

    /*** 最後のLINE・telボタン ***/
    /* 電話LINEボタン */
    #section16 .btn_tel {
        width: 98%;
        position: absolute;
        top: 62.3%;
        left: 2.8%;
    }
    /* LINEボタン */
    #section16 .btn_line {
        width: 98%;
        position: absolute;
        top: 79.5%;
        left: 2.8%;
    }

    /*** 実績:スライドショー  ***/
    /* レイアウト */
    .slider { top: 22.5%; }
    .slider li img { width: 99%; }

    /* 矢印 */
    .slick-prev {
        width: 8.1%;
        height: auto;
        top: 13.2%;
        left: 16.9%;
        z-index: 10;
    }
    .slick-next {
        width: 8.1%;
        height: auto;
        top: 13.2%;
        right: 15.9%;
        z-index: 10;
    }

    /*** サービス一覧:モーダルで詳細表示  ***/
    /* レイアウト */
    .service_list {
        top: 19.3%;
        gap: 1.3%;
        grid-template-columns: repeat(2, 94%);
    }
    .service_list a { margin-bottom: 2.2%; }

    /** モーダル表示 **/
    /*モーダル枠の指定*/
    .modal-body { max-width: 527px; }
    /*モーダルを閉じるボタンの指定*/
    .btn_close { width: 6.1%; }
    /* 閉じるボタン個別設定  */
    #service-detail1 .btn_close {
        bottom: 1.8%;
        right: 3.2%;
    }
    #service-detail2 .btn_close {
        bottom: 4.2%;
        right: 2.8%;
    }
    #service-detail3 .btn_close {
        bottom: 4.2%;
        right: 2.8%;
    }
    #service-detail4 .btn_close {
        bottom: 4.2%;
        right: 2.8%;
    }
    #service-detail5 .btn_close {
        bottom: 2.1%;
        right: 2.5%;
    }
    #service-detail6 .btn_close {
        bottom: 1.3%;
        right: 3.0%;
    }
    #service-detail7 .btn_close {
        bottom: 6.0%;
        right: 1.8%;
    }
    #service-detail8 .btn_close {
        bottom: 1.5%;
        right: 2.5%;
    }

    /*** よくある質問:アコーディオンで回答表示  ***/
    /* タイトルの配置 */
    .faq .title {
        width: 90%;
        top: 0;
        text-align: center;
        margin-top: 0%
    }
    /* 画像は背景として表示 */
    .faq .bg { 
        background-image: url('../img/sp/section15.jpg'); 
        background-repeat: no-repeat;
    }
    /* 文字の大きさ */
    .faq p {
        font-size: 3.8vw;
        font-weight: 400;
        letter-spacing: 0rem;
        line-height: 1.8;
        padding: 3% 3.2% 4% 2.5%;
    }
    /* 配置 */
    .faq .accordion {
        width: 100%;
        max-width: 597px;
        margin-top: 1.9%;
    }
    .accordion li { margin-bottom: 3.5%; }  /* 質問と質問の距離 */
    .accordion li:last-child {
        padding-bottom: 4%;
        margin-bottom:  0;
    }
    .faq .question .accordion_open,
    .faq .question .accordion_close  {
        width: 3.7%;
    }
    .faq .question .accordion_open {
        top: 36.3%;
        right: 2.8%;
    }
    .faq .question .accordion_close  {
        top: 48.5%;
        right: 2.8%;
    }
}