@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Fira+Sans:wght@400;500;600;700;900&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("../dp-macchiato/style.css");

/*
Theme Name: SHAKE HANDSテーマ（Macchiato by DigiPress Child）
Version: 2.2.5.0
Template: dp-macchiato
*/

/*** 既存クラスに上書き ***/
#banner_caption::before, #banner_caption::after { display: none; }
.header_container.pc.has_search:not(.scroll) { background: unset; }
.header-banner-content { filter: drop-shadow(2px 4px 6px black); }
body:not(.single) .content-wrap { width: 100%; }
.widget-container.top { padding-top: 0!important; }
.ct-hd.page .plx_bg::before { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: unset; }
a { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.hd_title a:hover { opacity: 0.6; }
.loop-article:hover { opacity: 0.6; cursor: pointer; }
.wpcf7-spinner { display: block; }
.icon-triangle-right:before { line-height: 0.9; }
.dp-container th { background-color: rgba( 31, 184, 216, 0.1 ); }
.scrollgress { z-index: 101; top: 0; }

.plx_btn a.btn { overflow: hidden; display: inline-block; margin: 0; }
.plx_btn a.btn:hover { color: #fff!important; border-color: #50b8da!important; }
.plx_btn a.btn::after { width: 120%; background: #50b8da; transform-origin: left top; transform: skewX(-30deg) scale(0, 1); }
.plx_btn a.btn:hover::after { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); }

#nav_menu-2 .menu { display: flex; justify-content: center; padding-top: 3em; }
#nav_menu-2 .menu .menu-item { padding: 0 3em; border-left: 1px solid rgba(170, 170, 170, 0.8); }
#nav_menu-2 .menu .menu-item:last-of-type { border-right: 1px solid rgba(170, 170, 170, 0.8); }
#nav_menu-2 .menu .menu-item a { padding: 0.5em; }
#nav_menu-2 .menu .menu-item a::after { background: #50b8da; }


/*** フォント関係 ***/
.salamat { font-family: "Allura", cursive; font-weight: 600; font-style: normal; letter-spacing: 0.07em; }
body, .title-desc { font-family: 'Montserrat', "Noto Sans JP" , "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; }
#banner_title { font-family: "Noto Serif JP", serif; }
p, a, a:hover, .loop-article * { font-size: 16px; font-weight: 500; }
.copyright  a small { font-size: 10px; }
 .menu-title, .loop-date, .submit { letter-spacing: 0.1em; }
.textwidget p, .plx_text_content { font-size: 1.3em; }
.plx_widget p.subttl { letter-spacing: 0.2em; }
h1.inside-title, body:not(.single-topics):not(.single-post) h2:not(#banner_title), h2.plx_title { font-size: 42px; letter-spacing: 0.1em; }
h3.h3-ttl, p.catch { font-size: 1.5em; font-weight: 600; }
.loop-title a { font-weight: 500; }
.page-summary .catch { font-size: 1.2em; font-weight: 600; }
.service-problem h3.h3-ttl { letter-spacing: 0.1em; }
@media screen and (max-width: 1180px) { 
	.menu-item a { font-size: 15px; }
}
@media screen and (max-width: 768px) { 
	p, a, a:hover, .loop-article * { font-size: 14px; }
}
@media screen and (max-width: 767px) { 
	.section-service h3.h3-ttl { font-size: 1.3em; line-height: 1.5; }
	.page-summary .catch { font-size: 1.1em; }
}


/*** アニメーション関係 ***/
.lineAnime { position: relative; z-index: 1; padding: 0 0.1em; font-weight: 600; }
.lineAnime:after { content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 40%; background: gold; z-index: -1; transition: all 2.0s; }
.lineAnime.isActive:after { width: 100%; }


/*** ページ共通 ***/
.flex { display: flex; }
h3.h3-ttl, p.catch { position: relative; margin-bottom: 1.0em; padding-bottom: 0.5em; text-align: center; }
h3.h3-ttl::after, p.catch::after { content: ''; position: absolute; width: 2em; height: 2px; margin: 0 auto; background: #50b8da; bottom: 0; left: calc(50% - 1em); }
p.catch { margin-bottom: 1.5em; padding-bottom: 1.2em; }
.plx_widget p.subttl, .title-desc { position: relative; margin: 1.0em auto 3em; width: fit-content; width: -moz-fit-content; letter-spacing: 0.2em; }
.plx_widget p.subttl:before, .plx_widget p.subttl:after, .title-desc:before, .title-desc:after { content: " "; display: block; position: absolute; width: 2em; height: 1px; background-color: #444; top: 50%; }
 .title-desc:before, .title-desc:after { background-color: #fff; top: 0.8em; }
.plx_widget p.subttl:before, .title-desc:before { left: -2.8em; }
.plx_widget p.subttl:after, .title-desc:after { right: -2.6em; }
img.plx_img, .thumb-link img, .img__outer img { width: 100%; object-fit: cover; }
.table__outer > * { width: 100%; max-width: 1180px; margin: 0 auto; }
.table__outer table th { width: 30%; }
.table__outer table td input { width: 100%; }
#footer { padding: 30px 0; }
#footer_menu_ul { padding: 1.0em 0 2.5em; }
#custom_html-4 { margin-bottom: 0; }
#custom_html-4 p { margin-bottom: 1.0em; text-align: center; font-weight: 600; }
#gotop, #gotop-ft, a.btn, .submit, .service-box i { border-radius: 3px; }
#gotop { z-index: 1000; cursor: pointer; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); }
#gotop:hover { border-radius: 50%; background: #444; }
#commentform input[type="submit"]:hover, #gotop-ft:hover { transform: translate( 5px, 5px ); }


/*** トップページ ***/
.home .widget_custom_html { margin-bottom: 0; }
.dp_parallax_widget-2.plx_widget { max-width: 1180px; margin: 0 auto; }
.dp_parallax_widget-2 .plx_wrap.use_img.right { padding-top: 10%; padding-right: 0; text-align: center; color: #fff; }
.dp_parallax_widget-2 .plx_wrap.use_img.right * { text-shadow: 3px 3px 6px rgb( 0, 0, 0, 0.2 ); }
.dp_parallax_widget-2 .plx_wrap.use_img.right a.btn { padding: 0.6em 0.4em 0.6em 0.9em; color: #fff; border-color: #fff; }
.dp_parallax_widget-2 .plx_desc { margin-bottom: 2em; }
.dp_parallax_widget-2 .plx_bg { display: block; position: absolute; width: 70vw; height: 75%; left: calc((1180px - 100vw)/2); top:unset; bottom: 0; animation-name:bgextendAnimeBase; animation-duration:1s; animation-fill-mode:forwards; opacity: 0; }
.dp_parallax_widget-2 .plx_original { position: absolute; margin-top: 0; top: 22px; right: -8px; transform: rotate(10deg); }
.dp_parallax_widget-2 .plx_original .salamat { font-size: 48px; color: #F4A461; opacity: 0.9; }
#custom_html-8 { margin-top: 100px; }
#custom_html-8 .inner { padding: 0 0 100px; }
#custom_html-8 .inner figure { display: flex; justify-content: space-between; width: 90%; max-width: 1180px; margin: 0 auto; }
#custom_html-8 .inner figure img { width: 49%; }
.home .loop-section { width: 100%; max-width: unset; margin-bottom: 100px; padding: 60px calc((100vw - 1180px) / 2) 80px; background: #E8F8FB; }
.home .loop-section .inside-title span { background: #E8F8FB; }
.dp_parallax_widget-3 { padding-bottom: 0; }
.dp_parallax_widget-3 .plx_title, .dp_parallax_widget-4 .plx_title { margin-bottom: 0; }
#custom_html-7 { padding-bottom: 1em; text-align: center; }
.dp_parallax_widget-9 { margin-bottom: 100px; padding-top: 0; }
.dp_parallax_widget-9 .flex { justify-content: space-evenly; flex-shrink: 0; flex-wrap: wrap; }
.service-box { position: relative; width: calc(100% / 3); padding: 0 10px 30px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background-color: rgba(80, 182, 218, 0.7); }
.service-box * { color: #fff; }
.service-box .wrapper { position: relative; overflow: hidden; }
.service-box figure.img__outer { overflow: hidden; margin: 20px; border-radius: 50%; }
.service-box img { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; }
.service-box:nth-of-type(2n) img { object-position: right top; }
.service-box:last-of-type img { object-position: -9px; }
.service-box .salamat { position: absolute; top: 24px; left: 60px; transform: rotate(-13deg); font-size: 2.0em; color: rgba(28,61,128,.7); z-index: 2; }
.service-box h3 { margin-top: 0.4em; padding-top: 0.5em; text-shadow: 3px 3px 6px rgb( 0, 0, 0, 0.15 ); }
.service-box h3.h3-ttl:after { top: 0;background: linear-gradient(to left, yellow, gold); }
.service-box p { position: absolute; bottom: -20px; right: 0; width: 50%; height: 50%; padding: 1em; border-radius: 50%; background: linear-gradient(90deg,#F4A461 0%,#F4A461 50%,#fff 50%,#fff 100%); background-size: 200%; background-position: right 0px bottom 0px; transition: 0.3s; }
.service-box p * { display: block; position: relative; top: 50%; transform: translateY(-50%); color: #444; }
.service-box p span { font-size: 0.8em; font-weight: 600; }
.service-box p i { display: block; position: absolute; top: unset; bottom: -0.5em; left: 0; width: 100%; text-align: center; font-size: 1.2em; }
.service-box:hover figure.img__outer { border-radius: 50%; }
.service-box:hover img { transform: scale(1.1); }
.service-box:hover p { background-position: left 0px bottom 0px; }
.service-box:hover p span,.service-box:hover p i { color: #fff; text-shadow: 3px 3px 6px rgb( 0, 0, 0, 0.1 ); }
/*.service-box:hover h3 { color: #fee408; opacity: 0.9; }*/
.service-box:hover h3.h3-ttl:after { background: #fee408; }
.wpcf7-form input.submit { margin-right: 0; }

/*** ABOUT ***/
#page-12 .entry { padding-bottom: 0; }
#company .h3-ttl { margin: 0 auto 1em; border: unset; text-align: center; }

/*** SERVICE ***/
.page-id-24 .title-desc::before, .page-id-24 .title-desc::after,
.page-id-26 .title-desc::before, .page-id-26 .title-desc::after, 
.page-id-28 .title-desc::before, .page-id-28 .title-desc::after, 
.page-id-30 .title-desc::before, .page-id-30 .title-desc::after, 
.page-id-32 .title-desc::before, .page-id-32 .title-desc::after { display: none; }
.dp_parallax_widget-7 { font-family: 'Kosugi Maru', sans-serif; }
.dp_parallax_widget-7 .plx_bg { animation-name:bgextendAnimeBase; animation-duration:1s; animation-fill-mode:forwards; opacity: 0; }
.service-problem h3.h3-ttl::after { display: none; }
.service-problem .flex-box { padding: 0 40px; }
.service-problem .flex-box p { margin-top: 4em; }
.service-description { text-align: left; }
.service-description .flex { justify-content: space-between; flex-direction: row-reverse; }
.service-description .flex:last-of-type { margin-top: 60px; }
.service-description .flex > * { width: 48%; }
.service-description .flex-box p { text-align: left; }
.dp_parallax_widget-11 { padding-top: 0; }


@media screen and (max-width: 1180px) { 
	#footer .widget-area.one, #footer .widget-area.three { display: none; }
	#nav_menu-2 .menu .menu-item { padding: 0 2em; }
	.dp_parallax_widget-2 .plx_bg { left: 0; }
	.home .loop-section, .bgextend, .dp_parallax_widget-9 { width: 100vw; margin-left: -10px; padding-left: 10px; padding-right: 10px; }
	.home .loop-section { padding-top: 55px; padding-bottom: 80px; }
	.bgextend, .dp_parallax_widget-9 { max-width: unset; }
	.table__outer > * { width: 80%; }
	.dp_parallax_widget-7 { width: calc( 100vw + 20px ); max-width: unset; margin-left: -10px; }
	.service-problem { width: 100vw; padding: 0 10px;  }
}
@media screen and (min-width: 769px) { 
	.service-box:nth-child(n+4) { width: calc(100% / 2); padding: 0 calc( (100%/2 - 100%/3)/2 + 10px ) 30px; }
}
@media screen and (max-width: 768px) { 
	#footer_menu_ul .menu-item .menu-link { margin: 0; padding: 0.5em 0; text-decoration: underline; }
	#nav_menu-2 .menu .menu-item { padding: 0 1em; }
	.plx_wrap .plx_btn { margin-bottom: 0; }
	img.plx_img { padding: 0!important; }
	.dp_parallax_widget-2 .plx_bg { left: -10px; }
	.service-box { width: calc(100% / 2); }
	.service-box:last-of-type { width: 100%; padding: 0 25% 30px; }
	.service-box i { padding: 0.42em 0.5em 0 0.6em; }
	.dp_parallax_widget-9 .flex { justify-content: space-around; }
	.dp_parallax_widget-7 { width: 110vw; }
	.service-problem { padding: 0 5vw; }
	.service-problem .flex-box { padding: 0 10px; }
	.service-problem .flex-box p { margin-top: 2em; }
}
@media screen and (min-width: 767px) { 
	body:not(.archive):not(.single) .content-wrap { padding-top: 0; }
	.page .single-article header { margin-bottom: 67px; }
	.dp_parallax_widget-2 .widget-box { display: flex; align-items: center; }
	.dp_parallax_widget-2 img.plx_img.right { width: 50%; max-width: unset; }
	.dp_parallax_widget-12 .flex > * { padding-top: 90px; }
}
@media screen and (max-width: 767px) { 
	.wpcf7-form input[type="text"], .wpcf7-form input[type="password"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="submit"], .wpcf7-form textarea { padding: 0 0.5em; }
	.wpcf7-form input[type="text"], .wpcf7-form input[type="password"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="submit"] { height: 30px; }
	.wpcf7-form .wpcf7-form-control-wrap { margin-bottom: 0; }
	.header-banner-content header #banner_title { margin-bottom: 0.7em; }
	body:not(.archive) .content-wrap { padding-top: 0; }
	body.archive .content-wrap { padding-top: 40px; }
	.header_container, .content-wrap, #dp_breadcrumb_nav { padding-left: 5vw; padding-right: 5vw; }
	.single-article .single_post_meta.bottom { margin-bottom: 40px; padding-top: 0; }
	#nav_menu-2 .menu { flex-shrink: 0; flex-wrap: wrap; padding-top: 0.5em; }
	#nav_menu-2 .menu .menu-item { padding: 1em 1em 0; border: unset!important; }
	.plx_widget p.subttl { margin-bottom: 2em; }
	.h3-ttl { padding: 0.6em 0 0.2em; }
	.table__outer > * { width: 100%; }
	.dp_parallax_widget-2 .plx_bg { width: 100vw; height: 60%; left: -5vw; }
	.dp_parallax_widget-2 .plx_desc { margin: 1.0em 0; }
	.dp_parallax_widget-2 .plx_wrap.use_img.right { padding-top: 0; }
	.dp_parallax_widget-2 .plx_original { top: 5px; right: 25px; }
	.dp_parallax_widget-2 .plx_original .salamat { font-size: 38px; }
	#custom_html-8 { margin-top: 0; }
	#custom_html-8 .inner { padding: 50px 0 0; }
	#custom_html-8 .inner figure { display: block; margin-right: 9.8%; }
	#custom_html-8 .inner figure img { width: 100%; }
	#custom_html-8 .inner figure img:first-of-type { margin-bottom: 20px; }
	h1.inside-title { text-align: center; }
	.home .loop-section, .bgextend, .dp_parallax_widget-9 { margin-left: -5vw; padding-left: 5vw; padding-right: 5vw; }
	.home .loop-section { margin-top: 80px; margin-bottom: 80px; padding-top: 25px; padding-bottom: 45px; }
	.service-box { width: 100%; padding: 20px 10px 25px; }
	.service-box:last-of-type {  padding: 20px 10px 25px; }
	.service-box figure.img__outer { margin-bottom: 12px; }
	.service-box p span { font-size: 0.9em; }
	.service-box i { padding: 0.42em 0.5em 0 0.6em; }
	#company { margin-bottom: 44px; }
	.dp_parallax_widget-7 { margin-left: -5vw; }
	.service-problem h3.h3-ttl { margin-bottom: 0; padding-bottom: 0; }
	.service-problem .flex { display: block; }
	.service-problem .flex-box { padding: 20px 10vw 0; }
	.dp_parallax_widget-12 { padding-top: 0; }
	.service-description h3.h3-ttl { margin-bottom: 0; padding-top: 1.0em; }
	.service-description .flex { display: unset; }
	.service-description .flex:last-of-type { margin-top: 40px; }
	.service-description .flex > * { width: 80%; margin: 0 auto; }
}
.pc-only { display: block; }
.sp-only { display: none; }
@media screen and (max-width: 568px) { 
	.pc-only { display: none; }
	.sp-only { display: block; }
	.plx_btn a.btn { font-size: 1.0em; }
	.loop-section.news .loop-col.one { width: 110px; }
	.wpcf7-form input.submit { padding: 0; }
	.service-description .flex > * { width: unset; }
	.service-description .img__outer { margin: 1.0em 0; }
}

@media screen and (min-width: 768px) {
/*=================================
背景色が伸びて出現
===================================*/

/*全共通*/
.bgextend{
  text-align: center;
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}
@keyframes bgextendAnimeBase{
  from { opacity:0; }
  to { opacity:1; }
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond{
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*下から上*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
	left: 0;
    background-color: rgba(80, 182, 218, 0.7);/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(80, 182, 218, 0.7);/*伸びる背景色の設定*/
}
.dp_parallax_widget-2 .plx_bg.bgLRextend::before {
	animation-name:bgLRextendAnimeVer2;
	background-color: sandybrown;
}
.dp_parallax_widget-7 .plx_bg.bgLRextend::before {
	animation-name:bgLRextendAnimeVer2;
	background: rgba( 31, 184, 216, 0.2 );
}
.dp_parallax_widget-9.bgLRextend::before{
	width: 105vw;
	left: -5vw;
}
/* 背景が現れる ⇒ 消えるパターン */
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}
/* 背景が現れる ⇒ そのまま表示しておくパターン */
@keyframes bgLRextendAnimeVer2 {
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  100% {
    transform-origin:left;
    transform:scaleX(1);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger, .bgDUextendTrigger{ opacity: 0; }
}
@media screen and (max-width: 767px) { 
	.plx_bg.bgLRextend::before{ content: ""; position: absolute; width: 100%; height: 100%; }
	.dp_parallax_widget-2 .plx_bg, .dp_parallax_widget-7 .plx_bg { opacity: 1; }
	.dp_parallax_widget-2 .plx_bg.bgLRextend::before { background-color: sandybrown; }
	.dp_parallax_widget-7 .plx_bg.bgLRextend::before { background: rgba( 31, 184, 216, 0.2 ); }
}


body .ct-whole .title-desc{
	color:#444;
	
	&::before, &::after {
		background-color:#444;
	}
}

body.page-id-306 .global-footer .footer-contact{
	display:none;
}