@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
/*=======================================================
 page.css
 下層ページレイアウト用CSS
=======================================================*/

/*======================================================
 共通設定
========================================================*/

/*----------- SP -------------*/
@media screen and (max-width: 767px) {
}

/*----------- PC・タブレット ------------*/

@media (min-width:768px) {
}


/*----------- PC ------------*/
@media screen and (min-width:1024px) {

    .page-ttl-h2 { font-size: 4.0rem; }
}


/*----------- PC・タブレット ------------*/
@media (min-width:768px) {
}

/*----------- スマートフォン ------------*/
@media (max-width:768px) {
}





/*======================================================
  会社情報
=======================================================*/


/*---------------------
 VISION
---------------------*/


/*----------- PC・タブレット ------------*/

@media (min-width:768px) {

    #company .vision p.copy-txt { font-size: 3.0rem; }
}

/*--------------------
 挨拶・プロフィール
---------------------*/

/*----------- PC・タブレット ------------*/
@media screen and (min-width:768px) {

    #company .company-greeting { padding: 25px 2vw 0 2vw; }

    #company .company-greeting > .greeting-txt { padding: 20px 2vw; }

    #company .company-greeting > .greeting-wang > .img-wang { width: 60%; order: 1; margin-right: -2vw; line-height: 0; }


    #company .company-greeting .history-block { width: 40%; padding-left: 10px; padding-bottom: 20px; font-size: 1.6rem; }
}


/*----------- PC ------------*/
@media screen and (min-width:1024px) {
}

/*----------- タブレット ------------*/
@media screen and (min-width:768px) and ( max-width:980px) {
}


/*----------- スマートフォン ------------*/
@media (max-width:767px) {
}




/*--------------------
 事務所イメージ
---------------------*/


/*----------- PC・タブレット ------------*/
@media (min-width:768px) {
}


/*--------------------
 会社概要
---------------------*/


/*----------- PC・タブレット ------------*/
@media (min-width:768px) {
}





/*--------------------
 map
---------------------*/




/*======================================================
Service
=======================================================*/



#service-page .serv-category-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto 100px; }

#service-page .serv-category-wrap .serv-category { width: calc((100% / 2) - 20px); background: #f6f6f6; padding: 70px 60px 30px; margin-bottom: 37px; }

#service-page .serv-category-wrap .serv-category:nth-child(3),
#service-page .serv-category-wrap .serv-category:nth-child(4),
#service-page .serv-category-wrap .serv-category:nth-child(5) { width: calc((100% / 2) - 25px); }

#service-page .serv-category-wrap.dosuku .serv-category { width: calc((100% / 3) - 20px); }
#service-page .serv-category-wrap.tiktok .tiktok-category { width: calc((100% / 4) - 20px); }



#service-page .serv-category-wrap .serv-category .serv-img { width: 100%; text-align: center; }
#service-page .serv-category-wrap .serv-category .serv-img img { width: auto; }

#service-page .serv-category-wrap.dosuku .serv-category .serv-img img { width: 90%; }

#service-page .serv-category-wrap .serv-category .serv-category-contents { padding: 3.125em 0 0; }
#service-page .serv-category-wrap .serv-category .serv-category-contents .serv-category-title { font-size: 2em; -webkit-transform: translateY(-98%); transform: translateY(-98%); text-align: center; }
#service-page .serv-category-wrap .serv-category .serv-category-contents .serv-category-title.jp { font-size: 22px; }
#service-page .serv-category-wrap .serv-category .serv-category-contents .serv-category-txt { color: #4c4163; }
#service-page .serv-category-wrap .serv-category .serv-category-contents .serv-category-title:after { content: ""; display: block; width: 1em; height: 2px; background: #ffd939; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transition: width .55s; }
#service-page .serv-category-wrap .serv-category:hover .serv-category-title:after { transition: width .55s; width: 6em; }

#service-page .ec-cate { margin-bottom: 100px; }
#service-page .btn-block { padding-top: 70px; padding-bottom: 70px; }


/*----------- PC ------------*/
@media screen and (min-width:1024px) {
}


/*----------- PC・タブレット ------------*/
@media (min-width:768px) {
}

/*----------- スマートフォン ------------*/
@media (max-width:768px) {
    #service-page .serv-category-wrap .serv-category { width: 100%; padding: 40px 40px 40px; }
    #service-page .serv-category-wrap .serv-category:nth-child(3),
    #service-page .serv-category-wrap .serv-category:nth-child(4),
    #service-page .serv-category-wrap .serv-category:nth-child(5) { width: 100%; }
    #service-page .serv-web-wrap iframe { height: 750px; }
    #service-page .serv-category-wrap.dosuku .serv-category { width: 100%; }

    #service-page .serv-category-wrap.dosuku .serv-category .serv-img img { width: 200px; }
    #service-page .serv-category-wrap.tiktok .tiktok-category { width: 100%; }
}


/*======================================================
 Privacy policy
=======================================================*/
#privacy .signature-wrap { text-align: right; margin-top: 20px; font-size: 1.8rem; line-height: 1.3em; }

#privacy .policy-wrap { margin-top: 100px; }

#privacy .policy-wrap > .policy-txt-block { margin-bottom: 50px; }
#privacy .policy-wrap > .policy-txt-block:last-child { margin-bottom: 0; }

.page-info-txt { margin-bottom: 50px; }

/*----------- スマートフォン ------------*/
@media (max-width:768px) {
    #privacy .policy-wrap { margin-top: 70px; }

    #privacy .policy-wrap > .policy-txt-block { margin-bottom: 30px; }
}



/*======================================================
  お問い合わせページ
=======================================================*/
#contact p.page-info-txt, #contact p.form-info { font-size: 1.4rem; }

#contact .form-wrap table { font-size: 1.6rem; }

#contact .form-wrap form input[type="radio"] { margin: 0 5px 0 20px; }

#contact .form-wrap form input[type="text"] { padding: 15px; width: 100%; border-radius: 5px; background-color: #FFF; border: solid 1px #CCC; box-sizing: border-box; }

#contact .form-wrap form textarea { padding: 20px; width: 100%; border-radius: 5px; background-color: #FFF; border: solid 1px #CCC; box-sizing: border-box; }

#contact .form-check-area a { text-decoration: underline; }
#contact .form-check-area a:hover { text-decoration: none; }

/*-- ラジオボタン --*/
#contact .form-wrap form .radio dd { display: inline-block; margin-right: 30px; }

#contact .form-wrap form dl.radio .radio-input { appearance: none; position: absolute; }

#contact .form-wrap form dl.radio .radio-text::before { content: ''; display: block; border-radius: 50%; border: 1px solid #999; width: 20px; height: 20px; margin-right: 5px; }

#contact .form-wrap form dl.radio .radio-text { position: relative; display: flex; align-items: center; /*縦方向に関するプロパティ。display:flex;と合わせて使う。*/ }

#contact .form-wrap form dl.radio .radio-input:checked + .radio-text::after { content: ''; position: absolute; left: calc(8px - 4px); display: block; border-radius: 50%; width: 12px; height: 12px; background-color: #999; }


/*-- チェックボタン --*/
#contact .form-wrap form .form-check-area { max-width: 500px; width: 80%; padding: 25px 2vw; margin: auto; font-size: 1.6rem; text-align: center; }

#contact .form-wrap form .form-check-area .check-input { appearance: none; position: absolute; }

#contact .form-wrap form .form-check-area .check-text { cursor: pointer; padding-left: 30px; position: relative; }

#contact .form-wrap form .form-check-area .check-text::before,
#contact .form-wrap form .form-check-area .check-text::after { content: ''; display: block; position: absolute; }

#contact .form-wrap form .form-check-area .check-text::before { background-color: #fff; border-radius: 0%; border: 1px solid #ddd; width: 20px; height: 20px; transform: translateY(-50%); top: 50%; left: 5px; }

#contact .form-wrap form .form-check-area .check-text::after { border-bottom: 2px solid #333; border-left: 2px solid #333; opacity: 0; height: 7px; width: 13px; transform: rotate(-45deg); top: 4px; left: 10px; }

#contact .form-wrap form .form-check-area input:checked + .check-text::after { opacity: 1; }


/*-- 送信ボタン --*/
#contact .form-wrap form .btn-block input.button { padding: 25px; width: 300px; border: solid 2px #000; background-color: #000; color: #FFF; font-size: 1.4rem; margin: 0 auto; }

#contact .form-wrap form .btn-block { margin-top: 40px; text-align: center; }

#contact .form-wrap form .btn-block input.button:hover { background: #FFF; color: #000; transition: all 0.5s ease; }


/*----------- PC ------------*/
@media screen and (min-width:1024px) {
}


/*----------- PC・タブレット ------------*/
@media screen and (min-width:768px) and ( max-width:1024px) {
}

/*----------- スマートフォン ------------*/
@media (max-width:768px) {
    #contact .form-wrap form th, #contact .form-wrap form td { display: block; }
    .sub-page-ttl { font-size: 44px; }
}