@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

body:not(.announcement-bar-showing):not(.themify_builder_active) .header-icons {
top: 45px;
}
h2.long {
    font-size: 2.5vw;
}
.video-thumbnail:hover img,.video-thumbnail.hovered img{
	    filter: grayscale(0);
}
.div-wrap span {
    font-size: 1.2vw;
    transform: skewX(-19deg);
    display: inline-block;
}
.video-thumbnail:before {
	    border-right: 1px solid #fff;
    position: absolute;
    content: "";
    background: black;
    width: 14%;
    height: 100%;
    left: -10.8%;
    transform: skewX(-19deg);
    z-index: 30;
	    transition: 0.5s cubic-bezier(1, 0.01, 0.99, -0.16);
}

.video-thumbnail.hovered:before,.video-thumbnail:hover:before {
transition: 0s cubic-bezier(1, 0.05, 0.93, 0.41);
}

.video-thumbnail img {
transition: 1s cubic-bezier(0, 0.95, 0.36, 1.02);
    filter: grayscale(.5);
}
a.viewmore {
    font-family: roboto;
    color: #fff;
    font-size: 1vw;
   position: relative;
/*     left: -1.2vw;
    margin-top: 1vw; */
    display: inline-block;
	margin-left:2vw;
}
#body p.div-wrap {
    position: relative;
    left: -1.2vw;
    margin-top: 1vw;
    font-family: 'Roboto';
    font-size: 1vw;
}
a.viewmore:after {
    content: "";
    position: absolute;
    right: -33px;
    line-height: 0;
    top: calc(50% - 3px);
    width: 21px;
    height: 7px;
    transform: skewX(19deg);
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
.slide-anime:hover,.slide-anime.hovered {
	opacity:1;
}

.slide-anime {
    width: 100%;
    height: 100%;
    position: absolute;
opacity:0;
    z-index: 3333333333;
    background: linear-gradient(-71deg, transparent 51.8%, white 1px, #ffffff00 52%);
	
	    background-size: 200% 100%;
	    animation: gradientMove 2s infinite;
	animation-timing-function: ease-in-out;
}
        @keyframes gradientMove {
            0% {
                background-position: 100% 0;
            }
            50% {
                background-position: -20% 0;
            }
			            100% {
                background-position: -20% 0;
            }
        }


.slash {
    position: fixed;
    width: 100%;
    height: 100%;
}

div.slash:before {
    width: 1px;
    height: 149vh;
    background: #ffffff3b;
    position: fixed;
    top: 0;
    bottom: 0;
 left: 15%;
    right: 0;
    content: "";
    margin: auto 0;
    z-index: 1;
    transform-origin: center;
    pointer-events: none;
     transform: scale(0)rotate(19deg);
	
	animation-name: nobi;/*1で解説*/
animation-duration:1s;/*3で解説*/
    animation-delay: 1s;
	    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
div.slash:after {
    width: 1px;
    height: 149vh;
    background: #ffffff3b;
    position: fixed;
    top: 0;
    bottom: 0;
 left: 85%;
    right: 0;
    content: "";
    margin: auto 0;
    z-index: 1;
    transform-origin: center;
    pointer-events: none;
     transform: scale(0)rotate(19deg);
	
	animation-name: nobi;/*1で解説*/
animation-duration:1s;/*3で解説*/
    animation-delay: 1s;
	    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}



.animation-container:before {
    width: 1px;
    height: 149vh;
    background: white;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    margin: auto;
    z-index: 1;
    transform-origin: center;
    pointer-events: none;
    transform: rotate(19deg);
	
	animation-name: nobi;/*1で解説*/
animation-duration:1s;/*3で解説*/

	
}
@keyframes nobi{
  0% {
     transform: scale(0)rotate(19deg);
  }

  100% {
     transform: scale(1)rotate(19deg);
  }
}

.sidemenu-right a#menu-icon-close {
    display: block;
}
a#menu-icon-close {
    z-index: 99;
    color: #fff;
    width: 55px;
    height: 55px;
    position: fixed;
    display: none;
    top: 50px;
    right: 57px;
}
#menu-icon-close:before, #menu-icon-close:after {
    height: 56%;
    width: 1px;
}
html {
    margin-top: 0px !important;
}
.home div#wpadminbar {
    display: none;
}

/*
div#pagewrap:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 0, 0, 0.5) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 1px, transparent 1px);
    background-size: 25% 25%;
    z-index: 9999;
    pointer-events: none; 
}
div#pagewrap:before {
    width: 1px;
    height: 106vh;
    background: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    margin: auto;
    transform: rotate(19deg);
    z-index: 999;
    transform-origin: center;
    pointer-events: none;
}



*/
html {
    background: #000;
}

#main-nav li {
    transform: rotate(-19deg);
}
#headerwrap #main-nav li a {
	transform: skewX(-19deg);
    text-align: left;
    font-size: 30px;
    font-family: 'Roboto';
    font-weight: 900;
    color: #fff;
}
.navbar-wrapper.tf_clearfix {
    padding: 34vh 0;
}

.sidemenu-right, .sidemenu-right .fixed-header {
    left: -500px;
}
#headerwrap div#mobile-menu.sidemenu-on {
    right: -161px;
}

div#mobile-menu.sidemenu {
    transform: rotate(19deg);
    background: #4b4b4b;
    width: 554px;
right: -744px;
    height: 130vh;
    top: -44px;
    transition: .2s ease-in-out;
}




.video-slide.slick-slide.slick-current.slick-active.slick-center {
    opacity: 1;
	    pointer-events: all;
}
.video-slide.slick-slide.slick-active {
    opacity: 1;
	pointer-events:none;
}


.video-slide.slick-slide.slick-current.slick-active.slick-center .video-thumbnail:after{
	z-index:-1;
	opacity:0;
}

.video-slide.slick-slide.slick-active .video-thumbnail:after {
	transition:.2s;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000a1;
    z-index: 99;
}

.slick-current button.custom-prev,.slick-current button.custom-next{
    opacity: 1;
}

button.custom-prev {
    opacity: 0;
	transition:.5s ease;
    background: #ffffff5c;
    font-size: 0;
    line-height: 0;
    width: 25px;
    height: 33px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: -90px;
    transform: rotate(19deg);
    left: 99px;
			    animation: cprev 3s infinite;
}
        @keyframes cprev {
            0% {
    top: -95px;
    left: 102px;
            }
            10% {
    top: -90px;
    left: 99px;
            }
			            100% {
    top: -90px;
    left: 99px;
            }
        }

button.custom-next {
    opacity: 0;
		transition:.5s ease;
    background: #ffffff5c;
    font-size: 0;
    line-height: 0;
    width: 25px;
    height: 33px;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    bottom: -90px;
    transform: rotate(19deg);
    left: -33px;
	
		    animation: cnext 3s infinite;
}

        @keyframes cnext {
            0% {
                  bottom: -95px;
				    left: -36px;
            }
            10% {
                  left: -33px;
				    bottom: -90px;
            }
			            100% {
                  left: -33px;
				    bottom: -90px;
            }
        }


#body .slick-prev,#body  .slick-next {
    display: none!important;
}



.video-thumbnail:hover:before ,.video-thumbnail.hovered:before{
    background: transparent;
}
.video-thumbnail:hover, .video-thumbnail.hovered {
    transform: scale(1.15);
	    z-index: 60;
}


div#body {
    z-index: 5;
    position: relative;
}

.video-thumbnail:hover:before,.video-thumbnail.hovered:before {
    border-right: 1px solid #fff0;
}

.video-info p {
    font-family: roboto, noto sans jp;
    font-size: 2vw;
}

.video-info h2 {
	white-space: nowrap;
    font-size: 3vw;
    text-shadow: 0 0 11px #000;
    font-family: roboto, noto sans jp;
    position: relative;
    left: 38px;
    font-weight: 900;
    transform: skewX(-19deg);
margin-bottom: 1vw;
}

.header-icons {
    right: 3%;
}

#menu-icon:hover {
    background: none;
}
#menu-icon {
    margin: 0;
    padding: 10px 21px 11px 0;
    line-height: 1em;
    border-radius: 0;
}

#menu-icon {
    color: #fff;
}

div#video-slider-wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

div#pagewrap2:before {
    width: 1px;
    height: 106vh;
    background: #ffffff3b;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 15%;
    right: 0;
    content: "";
    margin: auto 0;
    transform: rotate(19deg);
    z-index: 0;
    transform-origin: center;
    pointer-events: none;
}
div#pagewrap2:after {
    width: 1px;
    height: 106vh;
    background: #ffffff3b;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 85%;
right: 0;
    content: "";
    margin: auto 0;
    transform: rotate(19deg);
    z-index: 0;
    transform-origin: center;
    pointer-events: none;
}

div#video-slider:before {
    width: 1px;
    height: 149vh;
    background: white;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 9.4vw;
    content: "";
    margin: auto;
    z-index: 1;
    transform-origin: center;
    pointer-events: none;
}
.slick-list.draggable {
    position: relative;
    z-index: 1;
}
div#pagewrap {
    background: #000;
}
.slick-list.draggable {
    top: -47.5vh;
}


.menu-icon-inner:after {
    left: 8.5px;
}
.menu-icon-inner:before {
    left: 17px;
}
.menu-icon-inner {
    width: 43px;
    height: 37px;
	    overflow: visible;
}

#headerwrap.fixed-header {
    background: none;
}
#headerwrap.fixed-header:before {
display:none;
}

#body .video-slide {
	transform: rotate(-19deg);
    display: flex;
    width: 75vw !important;
	    height: 65vh;
		align-items: center;
}


div#video-slider {
	width: 80vw;
    left: 5vw;
	transform: rotate(19deg);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

	margin:0 auto;
	height:100vh;

}

.video-info {
    width: 45%;
    z-index: 60;
    position: relative;
    left: 1.5vw;
}

.video-thumbnail img {
    width: 100%;
}
.video-thumbnail {
    position: relative;
    width: 55%;
transition: 1s cubic-bezier(0, 0.95, 0.36, 1.02);
}



header#header {
    width: 100%;
}

.entry-content {
    margin-top: 0;
}


h3.cbar.year {
    font-size: 30px;
        font-family: roboto, noto sans jp;
}
span.fax-contact:before {
    content: "03-5962-7578";
}
span.phone-contact:before {
    content: "03-5962-7577";
}
p.phone.foot-p:after {
    content: "03-5962-7577";
        font-family: roboto, noto sans jp;
}
.works-wrap.top-news-row time.post-date.entry-date {
    display: inline;
    font-size: 15px;
    color: #000000;
    font-weight: 400;
}
.works-wrap.top-news-row time.post-date.entry-date.updated span{
	font-weight:300;
}

.works-wrap .entry-content {
    margin: 0;
    display: block;
}
.works-wrap .detail-wrap {
    display: none;
}
.works-wrap .circle-thumbnail-container,#works-wrap .detail-wrap,.works-wrap p.artist-name,.works-wrap p.division {
    display: none;
}
.single-work div#layout.sp-key {
    width: 800px;
}
div#lightbox.show {
    display: block;
}
.single-work h1.video-title {
    font-size: 40px;
}

	.themify_builder_content {
    width: 100%;
    max-width: 100%;
}

table.company th {
    width: 20%;
}
#main-nav-wrap #main-nav .current_page_item > a, #main-nav .current-menu-item > a, #main-nav > .current_page_item > a, #main-nav > .current-menu-item > a, #headerwrap #mobile-menu.sidemenu-on nav a:hover, #headerwrap #mobile-menu.sidemenu-on nav .current-menu-item > a {
    color: #afafaf;
}
body #site-logo a img {
    width: 120px;
}
img.criclei{
	    clip-path:circle(85px at 50% 50%);
animation:img-clip 7s ease infinite;
}
@keyframes img-clip{
  0% {
    clip-path:circle(85px at 50% 50%);
  }
	33%{
    clip-path:circle(87px at 49% 49%);
	}
	  66% {
    clip-path:circle(85px at 51% 49%);
  }
  100% {
    clip-path:circle(86px at 51% 51%);
  }
}

.other-wrap:hover img {
    opacity: .2;
    z-index: 1;
}
.other-wrap img {
    transition: .5s ease;
}
a.other-wrap {
	font-size: 0;
    position: relative;
	    display: block;
}

.center-wrap {
    width: 100%;
	    margin-bottom: 60px;
}
.sp-key * {
    font-weight: 300;
}
.left-wrap ,.right-wrap{
    width: 48%;
}
.sp-key h5 {
	    font-style: italic;
    font-weight: 500;
    font-size: 18px;
}


h1.video-title {
	    font-family: roboto, noto sans jp;
        font-weight: 900;
    text-align: center;
    font-size: 20px;
    margin-bottom: 110px;
}
.sp-key p.artist-name {
	    font-weight: 900;
    text-align: center;
        font-family: roboto, noto sans jp;
    font-weight: 300;
    font-size: 50px;
    line-height: 1.6;
    margin-top: 60px;
    padding: 0;
    margin-bottom: 20px;
}

a:hover,.post-title a:hover {
    color: #686868;
}
img.y-thum.thumbnail.circle-thumbnail {
    transition: .5s ease;
}
.circle-thumbnail-container:hover img {
    opacity: .2;
    z-index: 1;
}
.view-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s ease;
    z-index: -1;
}
.view-video span:after {
    content: "";
    position: absolute;
    right: 5px;
    line-height: 0;
    top: calc(50% - 3px);
    width: 21px;
    height: 6px;
    transform: skewX(45deg);
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
.view-video span {
        font-family: roboto, noto sans jp;
    font-size: 26px;
    position: relative;
    padding-right: 35px;
}
.circle-thumbnail-container {
    position: relative;
}
.detail-wrap {
    text-align: right;
}

a.view-details {
	   color: #fff;
    position: relative;
    padding-right: 35px;
    text-align: right;
    border-bottom: 1px solid #999;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 5px;
}
a.view-details:after {
    content: "";
    position: absolute;
    right: 5px;
    line-height: 0;
    top: calc(50% - 3px);
    width: 21px;
    height: 6px;
    transform: skewX(45deg);
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

div#poem {
    margin-left: 3vw;
        font-family: roboto, noto sans jp;
    width: 680px;
    margin-top: 40px;
    font-size: 17px;
	    height: 136px;

}
.mwrap ul {
    list-style: none;
    top: -140px;
    position: relative;
animation: mslide 7s ease infinite;
}
@keyframes mslide{
  0% {
    top: 0;
  }
	33%{
		
		    top: -71px;
	}
	  66% {
  top: -141px;
  }
  100% {
     top: -210px;
  }
}

.mwrap li {
    font-size: 58px;
        font-family: roboto, noto sans jp;
    line-height: 1.2;
}
.mwrap {
    overflow: hidden;
    height: 69px;
}
.cc-wrap {
    display: flex;
}


div.cc-wrap p {
    margin-left: 3vw;
    font-size: 58px;
        font-family: roboto, noto sans jp;
    line-height: 1.2;
}

table.company th:before {
    content: "";
    width: 1px;
    height: 30px;
    background: #bcbcbc;
    position: absolute;
    bottom: 0;
    right: 20px;
    top: 50%;
    margin: 0 auto;
    transform: translate(0, -12px) rotate(19deg);
}

table.company th, table.company td {
    font-size: 18px;
    padding: 20px;
    position: relative;
}
table.company tr {
    transform: rotate(-19deg);
}
table.company {
    width: 80%;
    left: 20%;
    position: relative;
    padding: 20px 40px 40px;
    transform: rotate(19deg);
}
.view-all span:after {
    content: "";
    position: absolute;
    right: -8px;
    line-height: 0;
    top: calc(50% - 3px);
    width: 21px;
    height: 6px;
    transform: skewX(45deg);
    border-right: 1px solid #4a4a4a;
    border-bottom: 1px solid #4a4a4a;
}

.view-all span {
	    padding-right: 20px;
    color: #111;
        font-family: roboto, noto sans jp;
    font-size: 22px;
	    position: relative;
}
a.view-all{
	z-index:3;
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
	    border-radius: 100px;
}

.circle-container.v4 {
    width: 200px;
    height: 200px;
	margin:0 auto;
	position:relative;
	
}
.circle-container.v4 .circle {
    width: 200px;
    height: 200px;
}
div.video-wrap {
    background: none;
}

#body div.video-wrap .builder-posts-wrap.loops-wrapper.grid4 {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 7%;
}
#body div.video-wrap article:first-child, #body div.video-wrap article:nth-child(6n + 1) {
    margin-left: 8%;
}
#body div.video-wrap article {
    width: 26%;
    margin: 0;
    padding-left: 26px;
}

div.video-wrap h2.post-title.entry-title:before {display:none;
    content: "";
    width: 15px;
    height: 1px;
    background: #111;
    position: absolute;
    left: 0;
    top: 50%;
}

div.video-wrap h2.post-title.entry-title {
    text-align: left;
        font-family: roboto, noto sans jp;
    font-weight: 300;
    font-size: 20px;
    position: relative;
    line-height: 1.8;
}
p.division {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    position: absolute;
    height: 100%;
    top: 0;
    left: -10px;
    text-align: right;
        font-family: roboto, noto sans jp;
    font-weight: 300;
    font-size: 16px;
}
p.artist-name a {
    text-align: left;
    font-family: roboto, noto sans jp;
    font-weight: 900;
    font-size: 30px;
    line-height: 1.6;
    color: #fff;
}
div.video-wrap h2.post-title.entry-title a {
    color: #fff;
}
p.artist-name {
	    transform: skewX(-19deg);
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
	    color: #fff;
}
#body div.video-wrap .row_inner {
    width: 90%;
    margin: 0 auto;
}
#footer *, #footer a {
    color: #000;
}

#footerwrap {
    background: none;
    background-color: #9b9b9b57;
}
.circle-warap {
	    overflow: hidden;
	    z-index: -1;
    width: 100%;
    height: 100%;
    position: fixed;
}

img.y-thum.thumbnail {
    cursor: pointer;
}
    .lightbox {
		    background: #000000ab;
    max-width: 100%;

      display: none;
      position: fixed;

      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      overflow: hidden;
		    z-index: 999999;
    }
.expand-circle {
	
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: expand 1.8s forwards;
  z-index: -1;
}

@keyframes expand {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 200vw;
    height: 200vw;
  }
}
    .lightbox iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .lightbox .close {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 30px;
      color: white;
      cursor: pointer;
    }



#catchphrase span {
  position: absolute;
  opacity: 0;
  transition: 2s ease-out;
}

#catchphrase{
  position: relative;
  display: inline-block;
}


#main-nav .contact a {
    padding: 1px 20px;
    font-size: 19px;
    border-radius: 22px;
    margin-right: 20px;
    margin-left: 10px;
    background: #999;
    color: #fff;
}
div#headerwrap.fixed-header #site-logo {
    margin: 13px 20px;
}
div#headerwrap.fixed-header #site-logo img {
    width: 250px;
    content: url(https://mutiny.tokyo/wp-content/uploads/2025/02/logo-type-white.svg);
}
img.logo {
	opacity:0;
    width: 15vw;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    filter: drop-shadow(0px 0px 6px black) drop-shadow(0px 0px 6px black) drop-shadow(0px 0px 6px black);
    z-index: 90;
	    animation-name:tojo;
    animation-duration: 0.5s; /* アニメーションの時間を0.7秒に設定 */
    animation-delay: 1s;
    animation-fill-mode: forwards; /* アニメーション終了後の状態を維持 */
    animation-timing-function: ease-in; /* ease-inを追加 */
}
@keyframes tojo {
  0% {
opacity:0;
    filter: drop-shadow(0px 0px 6px black) drop-shadow(0px 0px 6px black) drop-shadow(0px 0px 6px black) blur(5px);
  }


  100% {
opacity:1;
	      filter: drop-shadow(0px 0px 6px black) drop-shadow(0px 0px 6px black) drop-shadow(0px 0px 6px black) blur(0px);
  }
}



.animation-container {
    max-width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 9999999;
}

/* 以前のcircleクラスをripple-circleに変更 */
.ripple-circle {
    position: absolute;
    border: 1px solid #000;
    border-radius: 50%;
    opacity: 1;
    animation-name: ripple;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
	    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.ripple-circle-1 {
    width: 30vw;
    height: 30vw;
    animation-duration: 2s;
}

.ripple-circle-2 {
    width: 30vw;
    height: 30vw;
    animation-duration: 1.5s;
}

.ripple-circle-3 {
    width: 30vw;
    height: 30vw;
    animation-duration: 1s;
}

/* 追加: キーフレームアニメーションを変更して、形状変形と回転を含める */
@keyframes ripple {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        /* scaleXとscaleYを使用して、ランダムな楕円形に変形させます */
        transform: scale(3) rotate(360deg) scaleX(var(--random-scale-x)) scaleY(var(--random-scale-y));
        opacity: 0;
    }
}

/* 追加: ランダムな形状変形と回転のためのカスタムプロパティ */
.ripple-circle {
    /* 0.5から1.5の範囲でランダムな数値を生成 */
    --random-scale-x: calc(0.5 + (1.5 - 0.5) * var(--random));
    --random-scale-y: calc(0.5 + (1.5 - 0.5) * var(--random));
    --random: calc(random(100) / 100);
}






div#headerwrap,.fixed-header-enabled #headerwrap {
    position: fixed;
}
div#headerwrap {
    position: fixed;
    background: none;
}
.circle-container.v3 .circle {
    width: 30vw;
    height: 30vw;
}

.circle-container.v3 {
    width: 30vw;
    height: 30vw;
    right: -10vw;
    bottom: 0;
}

.circle-container.v2 .circle {
    width: 20vw;
    height: 20vw;
}
.circle-container.v2 {
    width: 20vw;
    height: 20vw;
    right: 25vw;
    top: -4vw;
}
.circle-container.v1 .circle {
    width: 45vw;
    height: 45vw;
}

.circle-container.v1 {
    width: 45vw;
    height: 45vw;
    left: -10vw;
    bottom: -10vw;
}

.module.module-text.en-warap {
    height: 100vh;
}
div.en {
    position: fixed;
}


div#site-logo {
    margin: 20px 30px;
}

#main-nav a {
    font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
.circle-container {
position: absolute;
width: 500px;
height: 500px;
}

.circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
	border:1px solid #000;
width: 500px;
height: 500px;
}

/* それぞれの円のデフォルトサイズを設定する */
.circle:nth-child(1) {

}

.circle:nth-child(2) {
top:3px;
	left:3px;
}

.circle:nth-child(3) {
bottom:3px;
	right:3px;

}
header#header, .fixed-header #header {
    padding: 0;
}


select.wpcf7-form-control.wpcf7-select {
    width: 100%;
    padding: 5px 30px 5px 15px;
	    min-height: 37px;
}
.single .kasoh .module.module-text {
    max-width: 90%;
	    margin: 0 auto;
}
div#layout.sp-key {
    width: 1060px;
}

p.kasote,h1.kasot {
    line-height: 1;
    font-size: 3vw;
    font-family: roboto, noto sans jp;
    position: relative;
    font-weight: 900;
    transform: skewX(-19deg);
}
.kasoh .module.module-text {

    text-align: center;

}
/* テンプレート */
#site-logo a {
    font-size: 0;
}
.themify_builder_active .themify_builder_row.module_row {
    z-index: unset;
}
div.bd {
    width: 100%;
    margin: 0 20px 0 30px;
    height: 1px;
    border-top: 1px dotted;
}
.border-list p {
    white-space: nowrap;
}
.border-list {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    align-items: center;
}
a.phone.foot-p {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1;
color: #111;
}
.cover-bottom.sc:before {
    height: 0;
}
.cover-bottom:before {
    content: "";
    background: #3498db;
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    transition: .5s ease;
}
.cover-right.sc:before,.cover-left.sc:before {
    width: 0;
}
.cover-right:before {
    content: "";
    background: #3498db;
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    top: 0;
    transition: .5s ease;
}
.cover-left:before {
    content: "";
    background: #3498db;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: .5s ease;
}
.cover.sc:before {
    opacity: 0;
}
.cover:before {
    content: "";
    background: #3498db;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
	    transition: .5s ease;
}

.fade-right.sc,.fade-left.sc,.fade-bottom.sc {
    opacity: 1;
    transform: translate(0px, 0px);
}
.fade-bottom {
    opacity: 0;
    transition: .5s ease;
    transform: translate(0, 15px);
}
.fade-left {
    opacity: 0;
    transition: .5s ease;
    transform: translate(-15px, 0px);
}
.fade-right {
    opacity: 0;
    transition: .5s ease;
    transform: translate(15px, 0px);
}
.fadein.sc {
    opacity: 1;
}
.fadein {
    opacity: 0;
    transition: .5s ease;
}

.faq2 .answer:before {
    content: "A";
    background: #e67e22;
    color: #fff;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    position: absolute;
    border-radius: 100%;
    left: 20px;
    transform: translateY(-50%);
    top: 50%;
}
.faq2 .answer {
    padding: 20px 30px 20px 60px;
    border: 2px #e67e22 solid;
    margin-top: 10px;
    position: relative;
}
summary:focus {
    outline: none;
}
.faq2 details {
    margin-bottom: 30px;
}
.faq2 details[open] .answer {
    animation: fadein .5s ease-in-out;
}
@keyframes fadein{0%{opacity:0;}
	100%{opacity:1;}}
.answer {
    padding: 20px 30px;
}
.faq2 details[open] summary:after {
    transform: translateY(-50%)rotate(
45deg
);
}
.faq2 summary:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    transition: .5s;
	font-size: 30px;
}
.faq2 summary:hover,.faq2  details[open] summary {
    background: #c1e2f9;
}
.faq2 summary:before {
    content: "Q";
    background: #3498db;
    color: #fff;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    position: absolute;
    border-radius: 100%;
    left: 20px;
    transform: translateY(-50%);
    top: 50%;
}
.faq2 summary {
	    list-style: none;
    position: relative;
    padding: 20px 60px 20px 60px;
    background: #fafafa;
    cursor: pointer;
	    border: #3498db 2px solid;
}



span.pen {
    background: linear-gradient( transparent 70%, #c1e2f9 70%);
}
span.wavy {
    text-decoration: wavy underline #3498db;
}
span.dot {
text-emphasis: filled #3498db;
    -webkit-text-emphasis: filled #3498db;
}
span.sesame {
    text-emphasis: sesame #3498db;
    -webkit-text-emphasis: sesame #3498db;
}
p.hanten {
    mix-blend-mode: difference;
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}
.module.back-plaid {
    background-image: repeating-linear-gradient(
0deg
, #c1e2f9 0 10px, transparent 10px 20px),repeating-linear-gradient(
90deg
, #c1e2f9 0 10px, transparent 10px 20px);
}
div.back-dot {
    background-image: radial-gradient( #c1e2f9 30%,#fff0 31%),radial-gradient( #c1e2f9 30%, #fff0 31%);
    background-size: 26px 26px;
    background-position: 0 0, 13px 13px;
}
div.back-border {
    background-image: repeating-linear-gradient(
45deg
, #c1e2f9, #c1e2f9 5px, rgb(0 0 0 / 0%)0, #0000 10px);
}
div.module.kugiru {
    background: #fff;
}


.card article:hover {
    transform: translate(0,-10px);
}
.card figure a, .card h2 a {
    position: relative;
}
#body .card article {
    background: #fff;
    box-shadow: 0px 0px 2px 1px rgb(66 66 66 / 30%);
    -moz-box-shadow: 0px 0px 2px 1px rgba(66,66,66,0.3);
    -webkit-box-shadow: 0px 0px 2px 1px rgb(66 66 66 / 30%);
    transition: .3s ease;
}
.card .post-content {
    height: 98px;
    padding: 0px 11px;
}
.card a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 4;
    display: block!important;
}

.themify_builder_row.module_row {
    z-index: 0;
}

h3.slm {
    font-size: 14px;
}
h3.slm span:after {
    content: "";
    background: #444;
    width: 1px;
    height: 20px;
    position: absolute;
    right: -15px;
bottom: 13px;
    transform: rotate(
45deg
);
}
h3.slm span {
    color: #3498db;
    font-weight: 600;
    font-size: 34px;
    display: inline-block;
    margin-right: 30px;
	position: relative;
}


h3.kmdsr {
    text-align: center;
    padding-top: 28px;
    font-weight: 600;
    font-size: 28px;
}

h3.kmdsr span {
    font-weight: 900;
    position: absolute;
    color: #c1e2f9;
    font-size: 48px;
    top: 0;
    line-height: 1;
    z-index: -1;
    left: 0;
    right: 0;
}
h3.kmdsl {
    padding-top: 28px;
    font-weight: 600;
    font-size: 28px;
}
h3.kmdsl span {
    font-weight: 900;
    position: absolute;
    color: #c1e2f9;
    font-size: 48px;
    top: 0;
    line-height: 1;
    z-index: -1;
    left: 0;
}



h3.back.c1-2 {
    background: #686868;
}
h3.back.c1-3 {
    background: #c1e2f9;
}
h3.back.c2 {
    background: #e67e22;
}

/* テンプレートここまで */


.phone.foot-p a {
    color: #111;
}
a.tb_turn_on.js-turn-on-builder {
    display: none;
}
#body .esc img { 
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.spro-wrap{width:100vw;}
#footer .back-top-float, #pagewrap .back-top-float {
    background-color: #3498db;
}
button.btn.btn-large.btn-primary:hover {
    box-shadow: 0 0 black;
}

.post-image img {
    border-radius: 0;
}
.cpc {
    width: 500px;
    margin: 0 auto;
    background: #fafafa;
    padding: 10px 0;
    max-width: 100%;
    margin-bottom: 40px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #ddd;
}
.themify_builder_row.module_row.clearfix.foot-c .row_inner {
    width: 900px;
      max-width: 100%;
    margin: 0 auto;
}
a.btn.footb {
    padding: 7px 0;
    width: 350px;
    margin: 10px auto 0;
	    max-width: 100%;
}

.phone:before {
    content: "\f095";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    padding-right: 0.2em;
	font-size: 93%;
}
p.phone.foot-p {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
}
.module.module-text.mvfade {
    width: 1200px;
    padding: 200px 30px;
    box-sizing: border-box;
    margin: 0 auto;
    background-size: cover;
    background-position: center center;
}
.sp-black {
    color: inherit;
    background: none;
}
h3.hback {
    background: rgba(255, 255, 255, .95);
    display: inline-block;
    padding: 5px 15px;
    font-size: 38px;
    font-weight: 600;
}

p.hb2 {
    background: rgba(255, 255, 255, .95);
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
}
.module-image.image-top.mvf .image-content {
    margin: 0;
    position: absolute;
    z-index: 4;
	left:30px;
    top: 50%;
}





.pagewidth, .full_width .themify_builder_row .row_inner, .full_width .module-layout-part .themify_builder_row.fullwidth_row_container .row_inner {
    width: 1160px;
    max-width: 100%;
    margin: 0 auto;
}
#main-nav a {
    text-align: center;
}
#main-nav a span {
    display: block;
    font-size: 12px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
    padding-top: 2px;
}
time.post-date.entry-date.updated {
    text-align: left;
}
.entry-content {
    text-align: left;
}
#main-nav-wrap #main-nav .current_page_item > a, #main-nav .current-menu-item > a, #main-nav > .current_page_item > a, #main-nav > .current-menu-item > a,#headerwrap #mobile-menu.sidemenu-on nav a:hover, #headerwrap #mobile-menu.sidemenu-on nav .current-menu-item > a {
    color: #707070;
}
#main-nav-wrap #main-nav .current_page_item a:hover, #main-nav .current-menu-item a:hover,#main-nav-wrap #main-nav a:hover, #main-nav-wrap #main-nav > li > a:hover,#headerwrap #mobile-menu.sidemenu-on nav a:hover, #headerwrap #mobile-menu.sidemenu-on nav .current-menu-item > a {
    color: #707070;
}
#header a:hover {
    color:#707070;
}
.post-title a:hover {
    color: #686868;
}
div#site-logo,.mobile_menu_active #site-logo {
    font-size: 0;
}


.one, .one a {
    font-size: 13px;
}



.sp-key .post-title a {
    font-size: 22px;
    font-weight: 400;
}

h3.bi-color.c1{
          font-weight: 900;
 color: #3498db;
}
.cl.bi-color {
  color:#686868;
        font-weight: 900;
}
h3.bi-color.orange {
    color: #e67e22;
      font-weight: 900;
}


div#site-description {
    font-weight: 400;
    position: absolute;
    top: 2px;
}

.header-on-scroll .snsicon {
    display: none;
}
.sp-key h3 {
    border-bottom: 1px #999 dotted;
    padding-bottom: 5px;
    margin-bottom: 7px;
}
.sp-key h4 {
    border-bottom: 1px #999 dotted;
    padding-bottom: 5px;
    margin-bottom: 7px;
    font-size: 16px;
}

.loops-wrapper.list-post .post-date-inline .post-date, .single-post .post-content .post-date-inline .post-date {
    text-align: left;
    margin: 0;
}
table.cp-table {
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
      border-bottom: 1px dashed #999;
      width: 100%;
}
table.cp-table td,  table.cp-table th{
    border-top: 1px dashed #999;
    padding: 16px;
    font-weight: 400;
}

.narrow .row_inner {
    width: 860px;
      max-width: 100%;
    margin: 0 auto;
}
#footer .widget  a {
    font-weight: 400;
    line-height: 1.6;
}
.widget .feature-posts-list li {
    padding: 0;
    margin: 0;
    text-align: left;
}
.widget li {
    padding: 0;
    line-height: 1.6;
}
.footer-widgets .widgettitle {
    border-bottom: 1px dotted;
    padding-bottom: 10px;
    font-size: 15px;
}

.sidebar h4.widgettitle, #sidebar h4.widgettitle {
    background: #3498db;
    color: #fff;
    margin-bottom: 0;
    padding: 8px 11px;
    font-size: 14px;
    text-align: center;
}
.sidebar div.widget,#sidebar div.widget {
    font-weight: 400;
    font-size: 14px;
        margin-bottom: 25px;
}
.sidebar .widget li, #sidebar .widget li {
    border-bottom: 1px dotted #999;
}
.sidebar .widget ul, #sidebar .widget ul, .sidebar .widget .textwidget, #sidebar .widget .textwidget {
    padding: 5px 10px;
	    border: 1px solid #ddd;
    border-top: none;
}
.sidebar .widget li a, #sidebar .widget li a {
color:#111;
}
.sidebar .widget li a:before, #sidebar .widget li a:before {
content:"\f0da";
  font-family: "Font Awesome 6 Pro";    font-weight: 900;
    width: 16px;
    display: inline-block;
    text-align: center;
}
#footer a {
    font-weight: 300;
}
.widget li {
    padding: 0;
    line-height: 1.6;
}
.sidebar .widget.widget_categories ul.children li a:before, #sidebar .widget.widget_categories ul.children li a:before {
    content: "・";
      padding-right: 0px;
}
.widget ul ul.children {
    padding-left: 5px;
  margin: 4px 0 0;
}
a.read-more {
  white-space: nowrap;
    color: #e67e22;
    padding-left: 3px;
}
	body.fixed-header #headerwrap, #headerwrap {
    min-height: unset;
}

#sidebar .widget_nav_menu h4.widgettitle:before {
content:"\f03a";
  font-family: "Font Awesome 6 Pro";    font-weight: 900;
      font-weight: 100;
}
.archive main#content {
    padding: 5.75% 0 6%;
}
.archive h1.page-title {
    border-bottom: 1px #999 dotted;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* よくある質問 */
.faq dt {
  color:#3498db;
    font-weight: 400;
    border: 1px solid #3498db;
    margin-bottom: 5px;
    padding: 5px 15px 5px;
    cursor: pointer;
    background: #fff;
    position: relative;
    line-height: 1;
    height: 30px;
  margin-left:42px;
}
.faq dt:before {
    content: "+";
    position: absolute;
    display: block;
    left: -42px;
    height: 40px;
    background: #3498db;
    border: 1px solid #3498db;
    top: -1px;
    width: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    font-weight: 900;
    font-family: sans-serif;
}
.faq dt.click {
      border-top: 1px solid #e67e22;
  border-left: 1px solid #e67e22;
  border-right: 1px solid #e67e22;
    border-bottom: none;
color:#e67e22;
  margin-bottom:0;
}
.faq dt.click:before {
    content: "-";
      background: #e67e22;
        border: 1px solid #e67e22;
}
.faq dd {
    border-right: 1px solid #e67e22;
    border-left: 1px solid #e67e22;
    border-bottom: 1px solid #e67e22;
    color: #111;
    padding: 0px 15px 10px;
    cursor: pointer;
    background: #fff;
    position: relative;
    margin-left: 42px;
    font-weight: 400;
    margin-bottom: 5px;
}
@media screen and (max-width: 680px){
     .faq dt span {
    line-height: 1;
    display: inline-block;
          font-size: 13px;
}
  .faq dt,.faq dd {
padding: 5px 10px;
  }
  .faq dd {
    font-size: 13px;
    line-height: 1;
}
  .faq dt.click:before,.faq dt:before {
    font-size: 20px;
} 
}
/* よくある質問ここまで */

/* スマホ時マージンボトム */
  
@media screen and (max-width: 680px){
  div.spmb10{
    margin-bottom:10px;
  }
    div.spmb15{
    margin-bottom:15px;
  }
      div.spmb20{
    margin-bottom:20px;
  }
}
/* スマホ時マージンボトムここまで */


/* 施工事例写真エリア */
.p-area {
    margin-bottom: 40px;
    background: #d7e5ef;
    padding: 30px;
	    display: block;
}
#body p.app {
    background: #3498db;
    display: block;
    color: #fff;
    padding: 3px 17px;
    margin: 15px 0 10px;
    border-radius: 10px;
    font-weight: 600;
width: 61px;
    text-align: center;
}
.dpw {
    width: 100%;
    background: #fff;
}
img#dpi {
    height: 100%;
    width: 100%;
    object-fit: contain;
	    display: block;

}
.thuw {
    background: #fff;
    overflow: auto;
    padding: 15px;
}
span.thuwp {
    width: 90px;
    height: 90px;
    display: block;
    float: left;
    margin-right: 10px;
}
img.thu {
    width: 100%;
    cursor: pointer;
    height: 100%;
    object-fit: cover;
}
#body p.app.before {
    background: #e67e22;
}
@media screen and (max-width: 680px){
.p-area {
    padding: 10px;
}
	.move {
    display: block;
    height: 90px;
}
}
/* 施工事例写真エリアここまで */

/* シングルポスト */
.sp-key h1.post-title.entry-title {
    text-align: left;
}
.sp-key h1.post-title.entry-title {
    border-bottom: 1px dotted #999;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.sp-key time.post-date.entry-date.updated span {
    font-weight: 400;
}
/* スマホアイキャッチ横いっぱい */
@media screen and (max-width: 680px){
  .sp-key figure.post-image.clearfix {
    margin: 0px -5.6% 20px;
}
}
/* ポストここまで */

/* ヘッダーズレ修正 */
#content {
    padding: 0;
}
  @media screen and (max-width: 760px){
body #content {
    padding-top: 0;
  }
}
/* ヘッダーズレ修正ここまで */


/* テーブルシンプル */
table.simple-table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;

}
table.simple-table th, table.simple-table td {
    padding: 10px 20px;
      border: 1px solid #bbb;
}
table.simple-table th{
  font-weight:700;
  background:#fafafa;
}



/* テーブルバイカラー */
table.bi-color-table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    border: 1px solid #ccc;
}
table.bi-color-table th, table.bi-color-table td {
    padding: 10px 20px;
}
table.bi-color-table tr:nth-child(even){
  background:#fafafa;
}
table.bi-color-table th{
  font-weight:700;
}


/* メニュー左右ボーダー
#main-nav a {
    border-left: 1px solid #999;
    text-align: center;
    width: 100px;
    padding: 0;
}
#main-nav .menulast a {
    border-right: 1px solid #999;
}
ul#main-nav {
    padding: 10px 0;
}
*/


/* 見出し集 */
h3.moji {

}
.moji span {
    position: relative;
}
.moji.sc span:after {
	width: calc(100% + 10px);}
.moji span:after {
    background:#c1e2f9;
    content: "";
    height: 20px;
	transition: 1s;
    width: 0;
    left: -5px;
    display: block;
    position: absolute;
    bottom: -5px;
    z-index: -1;
}

h3.dbb {
    display: block;
    margin: 0 auto 15px;
    padding: 20px 0;
    line-height: 1;
    border: #3498db 1px dashed;
    border-right: none;
    border-left: none;
    text-align: center;
    color: #3498db;
    font-size: 20px;
    font-weight: 700;
    position: relative;
}
h3.dbb:before {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    display: block;
    height: 1px;
    background: #3498db;
    content: "";
}
h3.dbb:after {
    position: absolute;
    bottom: -5px;
    left: -5px;
    right: -5px;
    display: block;
    height: 1px;
    background: #3498db;
    content: "";
}
.sayu {
      margin-bottom: 10px;

display: flex;
align-items: center;
}
.sayu:before,
.sayu:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.sayu:before {
margin-right: 1rem;
}
.sayu:after {
margin-left: 1rem;
}
h3.back {
    background: #3498db;
    color: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}
h3.bm:before {
    display: inline-block;
    width: 12px;
    height: 2px;
    margin-right: 9px;
    margin-left: 0;
    content: '';
    background: #3498db;
}
h3.cm {
    border-bottom: #3498db solid 2px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
h3.cm:before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    margin-left: 0;
    content: '';
    border: 3px solid #3498db;
    border-radius: 50%;
}
h3.midashi {
    border-bottom: 1px dotted #999;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 18px;
}
h3.komidashi {
    border-bottom: 1px dotted #999;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}
h3.bi-color {
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
  position: relative;
}
h3.bi-color::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 2;
    content: '';
    width: 20%;
    height: 3px;
    background-color: #3498db;
}

h3.cbar span {
    display: block;
    font-size: 49px;
    line-height: 1;
    padding-bottom: 15px;
    font-family: 'Open Sans', sans-serif;
}
h3.cbar:after {
    position: absolute;
    content: '';
    width: 60px;
    height: 1px;
    left: 50%;
    margin: 30px 0px 0 -30px;
    display: block;
    background-color: #111;
}
h3.cbar {
    text-align: center;
    padding-bottom: 45px;
    position: relative;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}
h3.lbar span {
    display: block;
    font-size: 32px;
    line-height: 1;
    padding-bottom: 10px;
}
h3.lbar {
    padding-bottom: 40px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}
h3.lbar:after {
    position: absolute;
    content: '';
    width: 60px;
    height: 2px;
    left: 0;
    margin: 20px 0px 0 0;
    display: block;
    background-color: #111;
}

h3.cbar.tate {
    padding-bottom: 55px;
}
h3.cbar.tate:after {
    width: 1px;
    height: 20px;
    margin: 20px 0px 0 0px;
    background-color: #555;
}
h3.lbar.tate {
    padding-bottom: 55px;
}
h3.lbar.tate:after {
    width: 1px;
    height: 20px;
    margin: 20px 0px 0 0px;
    background-color: #555;
}




h3.fc:first-letter {
  color: #3498db;
}
h3.fcb:first-letter {
  color: #3498db;
  font-size:26px;
}

h3.fcb {
    margin-bottom: 10px;
}
h3.fc {
    margin-bottom: 10px;
}
/* ヘッダー上下パディング */

.mobile_menu_active #header, .mobile_menu_active #headerwrap.fixed-header #header {
    padding: 5px 0 5px;
}
/* ヘッダー上下パディングここまで */


/* ゴーストボタン */
a.read_all_btn {
    background: #3498db;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 10px 20px;
    font-size: 14px;
}
a.read_all_btn i {
  padding-left:5px
}
a.read_all_btn:hover {
background:#686868;
}
a.btn {
	    position: relative;
    display: block;
    background: #3498db;
    color: #fff;
    padding: 7px 0;
    text-align: center;
    text-decoration: none;
	width: 300px;
    margin: 0 auto;
}

a.btn:hover {
    background:  #686868;
}
a.btn:after {
    content: "\f138";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    right: 10px;
    line-height: 0;
    top: 50%;
}
/* ゴーストボタンここまで */


.footer-horizontal-left .back-top, .footer-horizontal-right .back-top, .footer-left-col .back-top, .footer-right-col .back-top {
    top: -90px;
}



/* ローシャドウ */

div.photoshadow {
box-shadow:0px 0px 2px 1px rgba(66,66,66,0.3);
-moz-box-shadow:0px 0px 2px 1px rgba(66,66,66,0.3);
-webkit-box-shadow:0px 0px 2px 1px rgba(66,66,66,0.3);
}
div.rowshadow {
box-shadow:0px 0px 2px 1px rgba(66,66,66,0.3);
-moz-box-shadow:0px 0px 2px 1px rgba(66,66,66,0.3);
-webkit-box-shadow:0px 0px 2px 1px rgba(66,66,66,0.3);
}
/* ローシャドウここまで */


/* 不要物表示オフ */
span.edit-button {
    display: none;
}
a.themify_builder_turn_on.js-turn-on-builder {
    display: none;
}
/* 不要物表示オフここまで */




/* 文字・問い合わせ基本 */

#footer a:hover {
    color: #3498db;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP', sans-serif;
      font-weight: 400;
  margin:0;
      letter-spacing: unset;
    text-transform: unset;
	    color: #fff;
}
.post-title a{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
  margin:0;
}
p {
	    font-weight: 300;
    padding: 0;
    margin: 0;

    font-size: 16px;
    line-height: 2;
      font-family: 'Noto Sans JP', sans-serif;
}
div {
    font-family: 'Noto Sans JP', sans-serif;
}
a {
font-weight: 300;
    font-family: 'Noto Sans JP', sans-serif;
        text-decoration: none!important;
    color: #707070;
}
span {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}
* {
	    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
        letter-spacing: unset;
}
.sp-key p {
    padding: 0px 0 15px;
    font-weight: 300;
    font-size: 15px;
}
ul, ol {
    margin: 0 0 0 1.6em;
}
li {
    margin: 0;
}
h3 {
    font-size: 18px;
}

summary::-webkit-details-marker {
  display:none;
}
/* 文字・問い合わせ基本ここまで */



/* テンプレ部 */

/* トップページ投稿 */
.top-news-row h2.post-title.entry-title {
    display: inline;
      font-size: 15px;
}
.top-news-row .builder-posts-wrap.list-thumb-image article {
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 10px;
}
.top-news-row h2.post-title.entry-title a {
    font-size: 15px;
      display: inline;
      font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;

}
.top-news-row time.post-date.entry-date.updated {
    display: inline;
    font-size: 15px;
  color:#3498db;
      font-weight: 400;
}
.top-news-row time.post-date.entry-date.updated span {
font-weight:600;
}
.top-news-row .post-date-wrap {
    display: inline-block;
    width: 10em;
}
.top-news-row .builder-posts-wrap.list-thumb-image article {
    border-bottom: 1px solid #ddd;
  margin: 0;
}
  .sp-key span.year:after{
 content:none; 
}
/* お知らせ文量少な目 */
div.hht::-webkit-scrollbar {
    width: 8px;
}
div.hht::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #fafafa;
}
div.hht::-webkit-scrollbar-thumb {
  border-radius: 4px;
	background:#ddd;
}
div.hht {
    height: 300px;
    overflow: auto;
    border: 1px solid #ddd;
    padding: 20px;
}

.hht h2.post-title.entry-title a {
    line-height: 1.6;
    font-size: 15px;
    font-weight: 400;
}
.hht h2.post-title.entry-title {
width: calc(100% - 10em);
    float: left;
}

.hht .builder-posts-wrap.list-thumb-image article {
    border-bottom: 1px solid #ddd;
}
.hht .entry-content {
    float: left;
width: calc(100% - 10em);
}
.hht time.post-date.entry-date.updated {
  color: #3498db;
      line-height: 1.6;
    font-size: 15px;
}
.hht .post-date-wrap {
    display: block;
    float: left;
    width: 10em;
      padding-bottom: 30px;
}
.hht .builder-posts-wrap.list-thumb-image article {
    border-bottom: 1px solid #ddd;
    padding: 0 0 15px;
    margin: 0 0 15px;
}
  .sp-key span.year:after{
 content:none; 
}
/* お知らせ文量少な目ここまで */

/* お問い合わせパーツ */
button.btn.btn-large.btn-primary i {
    position: absolute;
    right: 15px;
    top: 50%;
    line-height: 0;
}
button.btn.btn-large.btn-primary {
	    font-weight: 500;
	    position: relative;
    width: 600px;
    background: #999999;
    padding: 10px 0;
    color: #fff;
    border: none;
    margin: 30px auto 30px;
    display: block;
    border-radius: 5px;
    max-width: 100%;
}
button.btn.btn-large.btn-primary:hover {
    background: #4e4e4e;
    padding: 10px 0;
}
p.middle-size-font {
    font-size: 18px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    padding: 0;
}
a.beta-button-full {
	    position: relative;
    background: #3498db;
    width: 100%;
    display: block;
    color: #fff;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 10px 0px;
    margin-top: 5px;
}
a.beta-button-full:hover {
background:#686868;
}
a.beta-button-full i {
    position: absolute;
    right: 15px;
    top: 50%;
    line-height: 0;
}
a.phone-no {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 36px;
    color: #111;
    display: block;
    font-weight: 700;
    line-height: 1;
}
span.phone-no-taiou {
    font-size: 14px;
    padding-top: 4px;
    display: block;
}

/* コンタクトフォーム２ */
table.contact {
  width:100%;
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
      border-bottom: 1px dashed #999;
}
table.contact td,  table.contact th{
    border-top: 1px dashed #999;
    padding: 16px;
}
table.contact th {
    position: relative;
    width: 30%;
	    padding-right: 50px;
}
@media screen and (max-width: 1200px){
  table.contact {
    width: 100%;
  }
}


/* コンタクトフォーム１ */
table.subform {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: left;
}
table.subform th {
    border: #999 solid 1px;
    background: #3498db;
    color: #fff;
    padding: 10px 20px;
      font-weight: 400;
      width: 30%;
}
table.subform td {
    border: #999 solid 1px;
    padding: 10px 15px;
      width: 70%;
}
@media screen and (max-width: 1200px){
    table.contact {
    width: 100%;
  }
}
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] {
    margin: 0;
    max-width: 100%;
    width: 100%;
    padding: 5px 15px;
    border-radius: 5px;
}
textarea, input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=time], input[type=week] {
    margin: 0;
    max-width: 100%;
    width: 100%;
    padding: 5px 15px;
    border-radius: 5px;
}
input.wpcf7-form-control.wpcf7-submit {
    width: 600px;
    background: #3498db;
    padding: 10px 0;
    color: #fff;
    border: none;
    margin: 30px auto 30px;
    display: block;
    border-radius: 5px;
    max-width: 100%;
}
span.hissu {
	    top: 21px;
      white-space: nowrap;
    background: #e74c3c;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    margin-left: 10px;
  	color:#fff;
    position: absolute;
    right: 0;
}
.post-date {
    font-size: 14px;
  margin: 0;
}
.sidebar .widget li:last-child, #sidebar .widget li:last-child {
    border-bottom: none;
}
.sidebar .widget ul.children li, #sidebar .widget ul.children li {
    border-bottom: none;
	    padding: 0;
}
.sidebar .widget ul ul.children ,#sidebar .widget ul ul.children {
    padding: 0 0 7px 7px;
    border-bottom: 1px dotted #999;
}

.sidebar .widget li, #sidebar .widget li {
    padding: 1px 0 1px;
}
.sidebar .widget li a, #sidebar .widget li a,#sidebar .widget li a, #sidebar .widget li a {
    color:#111;
}
.sidebar .widget.widget_categories li a:before,#sidebar .widget.widget_categories li a:before {
    content: "\f15c";
    font-family: "Font Awesome 6 Pro";    font-weight: 900;
    color: #3498db;
    padding-right: 7px;
}
#headerwrap {
    border-bottom: none;
}


#sidebar .widget ul.children, .sidebar .widget ul.children {
    padding: 0;
    border: 0;
    border-top: 1px solid #ddd;
    margin-bottom: 0px;
}
#sidebar .widget ul.children li, .sidebar .widget ul.children li {
    padding: 1px 0 1px 24px;
    position: relative;
}
.sidebar .widget.widget_categories ul.children li a:before, #sidebar .widget.widget_categories ul.children li a:before {
    content: "・";
    padding-right: 0px;
}

.textwidget a.btn {
    margin-top: 3px;
}
.textwidget p {
    padding-bottom: 5px;
}
.sp-key main#content {
    padding: 60px 0;
}
.single-post .post .post-date-inline {
    margin: 0;
}
p.ppt {
    padding-top: 15px;
}

#main-nav li.ulc a {
    cursor: default;
}
#main-nav li.ulc ul.sub-menu li a {
    cursor: pointer;
}
#main-nav li:not(.themify-widget-menu)>ul {
    width: 200px;
    left: -61px;
    right: 0;
    margin: auto;
    box-shadow: 0px 0px 2px 1px rgba(66,66,66,0.3);
    -moz-box-shadow: 0px 0px 2px 1px rgba(66,66,66,0.3);
    -webkit-box-shadow: 0px 0px 2px 1px rgba(66,66,66,0.3);
}
#main-nav li:not(.themify-widget-menu)>ul li a {
    font-size: 13px;
padding: 0 10px;
}
#main-nav li:not(.themify-widget-menu)>ul li a:before {
    content: "・";
}
/* テンプレ部ここまで */

/* PC */
@media screen and (min-width: 1200px){
.pcnone{
  display:none;
  }
  #main-nav li.pcnone {
    display: none;
}
	#main-nav span.child-arrow {
    display: none;
}
}
/* PCここまで */

div.kasoh {

    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    padding-top: 150px;
    padding-bottom: 180px;
}