@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
/*-------------------------
  サイト全体
-------------------------*/
/*----デザイン----*/
body{
	font-family: 'Barlow', "游ゴシック体",sans-serif;
	
}
body img{
		overflow:hidden;
		}
.post_content p{
		line-height:2.2;
}
*{
   mix-blend-mode: multiply; 
}
.multiply-kaihi{
	mix-blend-mode: normal; 
}
.mark_blue {/*ブルーのマーカー部分は文字が小さくなる*/
    background: none;
	 font-size:85%;
}
/*----レイアウト----*/
.bottom-0{/*画面の下中央に固定したい時のクラス*/
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
}
@media (min-width: 1601px) {/*（幅の広いPC）*/
.alignfull>.wp-block-cover__inner-container, .alignfull>.wp-block-group__inner-container {
    margin: 0 auto;
    max-width: 80%;
}
}
@media (max-width: 600px)  {/*（スマホ）*/
.wp-block-spacer{
	height:20px!important;
}
.post_content p{
	line-height:2.2;
	width:85%;
	margin:0 auto;
}
.work-thumbnail{
	width:90%;
	margin:0 auto;
	}
}
/*----フォント----*/
@media (min-width: 1601px) {/*（幅の広いPC）*/
header,h2,p,li,a{
	font-size:115%;
}
.l-footer__nav a{
	font-size:120%!important;
}
.l-footer .copyright{
	font-size:110%;
}
}
@media (max-width: 600px)  {/*（スマホ）*/
.post_content p{
	font-weight:500
}
}
/*-------------------------
  トップページ
-------------------------*/
.contents-title h2{
	margin-bottom:10px;
}
h2.sabawebfont {
	font-family:'sabawebfont';
	font-size:450%;
}	

@media (max-width: 600px)  {/*（スマホ）*/
h2.sabawebfont{
	font-family:'sabawebfont';
	font-size:4em!important;
}
}
/*-------------------------
  ヘッダー・フッターナビ
-------------------------*/
/*----スマホヘッダーメニュー----*/
.c-listMenu a{
	border-bottom:none;
	padding: .5em 1.5em .5em 1.5em;
	letter-spacing: 0.03em;
}
.c-listMenu.c-listMenu li {
	text-align:center;
}
.p-spMenu{
	mix-blend-mode: normal;
	font-family:'sabawebfont';
	font-size:2.2em;
	
}
.c-widget__title.-spmenu {
	display:none;
}
.p-spMenu__body {
	padding:0 0 20px;
}
.p-spMenu__nav{
   margin-top:30px;
	width:100%;
}
.c-gnav .sub-menu a:before, .c-listMenu a:before {
	content:none;
	}
.c-gnav>.menu-item>a:after {
    bottom: 0;
    content: "";
    display: none;
    left: 0;
    position: absolute;
    transition: width .25s, height .25s, -webkit-transform .25s;
    transition: transform .25s, width .25s, height .25s;
    transition: transform .25s, width .25s, height .25s, -webkit-transform .25s;
}
/*----フッターメニュー----*/
    .l-footer__nav li:first-child a {
        border-left: none;
    }
    .l-footer__nav a {
        border-right: none;
        font-size: 13px;
        padding: 0 1em;
    }
    .l-footer__nav a:hover {
     text-decoration:none;
		color:#083c5e;
    }
/*----ヘッダーメニュー----*/
nav a{
	position: relative;
	text-decoration: none;
	transition: 0.3s;
}
nav a::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 3px;
	background: #b5b5b5;
	transition: 0.3s;
}
nav a:hover::before{
	width: 100%;
}

/*-------------------------
  ヘッダーエリア
-------------------------*/
header {
    padding: 1%;
}
div#fix_header {
    /* font-family: 'sabawebfont'; */
    backdrop-filter: blur(3px);
}
.l-fixHeader__gnav.c-gnavWrap{
	font-family:'sabawebfont';
}
.l-fixHeader__inner .l-container .c-headLogo::after{
	display:none;
}
.l-header {
	opacity:0.85;
	mix-blend-mode: normal; 
}
.c-iconBtn {
	color:#669898;
}
.contents-box {
    margin-top: 10px;
    margin-bottom: 10px;
}

#gnav {
		font-family:'sabawebfont';
     color:#669898;
}
.c-gnav>.menu-item>a .ttl {
    display: block!important;
    font-size: 150%!important;
	 padding:5px!important;
}
.c-headLogo__link::after{
	 content: 'Website Design , Graphic Design';
    font-size: 100%;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0 2vw;
    position: absolute;
    top: 57%;
    transform: translateY(-50%) translateX(0%);
    color: #669898;
	display:inline-block;
	left:10vw;
}
@media (max-width: 960px) {/*（タブレット・スマホ 以外）*/
	header {
    padding: 3%;
	 padding-bottom:5%;
}
.c-headLogo__link::after{
    font-size: 50%;
	 padding-top:5px;
	 padding-bottom:5px;
    position: absolute;
    top:110%;
    left:0;
}
}
@media (min-width: 601px) {/*（スマホ 以外）*/
.header-logo{
	margin-top:10px;
	padding-top:10px;
		}
.l-header__customBtn, .l-header__menuBtn {
    display: none;
}
}
@media (max-width: 600px)  {/*（スマホ）*/
.elementor-152 .elementor-element.elementor-element-46fac28 .hfe-site-logo .hfe-site-logo-container{
		width:25%;	
	  float:left;
		}
.elementor-152 .elementor-element.elementor-element-46fac28 .hfe-site-logo .hfe-site-logo-container img{
	width:100%;
  display:block;
  padding:5%;
}
.elementor-152 .elementor-element.elementor-element-1d890c3 .elementor-heading-title {
    padding: 5px;
    color: #669898;
    font-family: "Barlow", Sans-serif;
    font-weight: 600;
    font-size: 80%;
    float: left;
}
.elementor-152 .elementor-element.elementor-element-4eb6389 .hfe-nav-menu__toggle {
        text-align: right;
        margin: 10px;
        position: fixed;
        display: block;
        top: 0;
        width: 100%;
	     padding-right:8%;
}
}
/*----ヘッダーのブレイクポイントをスマホに変更----*/
@media screen and (min-width:601px) and ( max-width:960px) {
#gnav{display:block!important;}
	#sp_menu{display:none!important;}
.l-header__menuBtn{display:none!important;}
	.l-header__logo{order:0;}
	.-series-right .c-gnavWrap {margin-left: auto;}
#gnav{display:block!important;}
#sp_menu{display:none!important;}
.l-header__menuBtn{display:none!important;}
.l-header__logo{order:0;}
.-series-right .c-gnavWrap {margin-left: auto;}
}


/*-------------------------
  メインビジュアルエリア
-------------------------*/
/*----XO　ｓlider----*/
.swiper-3d{
    perspective: none;
}
#xo-slider-645{
	width: 100vw;
	margin: 0 calc(50% - 50vw);	
}
@media (max-width: 960px) {/*（タブレット/スマホ）*/
.swiper-horizontal {
 width:180vw;
}
#xo-slider-645{
	width: 100vw;
	margin: 0 calc(50% - 98vw);	
}
	.swiper-pagination {
    position: relative;
    margin: 0 calc(50% - 80vw);
}
}
.swiper-pagination{
	position:relative;
}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #669898;
}
.swiper-3d .swiper-slide-shadow {/*左右の画像フィルターをリセット*/
    background: rgba(0,0,0,0)
}
.swiper-3d .swiper-slide-shadow-left {/*左右の画像フィルターをリセット*/
    background-image: linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,0))
}
.swiper-3d .swiper-slide-shadow-right {/*左右の画像フィルターをリセット*/
    background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0))
}
.swiper-3d .swiper-slide-shadow-top {/*左右の画像フィルターをリセット*/
    background-image: linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0))
}
.swiper-3d .swiper-slide-shadow-bottom {/*左右の画像フィルターをリセット*/
    background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0))
}
.swiper-slide-next,.swiper-slide-prev{/*左右の画像の縦横比を元通りに*/
   transform: rotateY(0)!important;
	margin:0 3%
}
/*スライダーのサイズ*/
@media (min-width: 1601px) {/*（幅の広いPC）*/
#xo-slider-645{
	padding-top:100px;
	}
.swiper-wrapper{
	 width:30vw;
	margin: 10px;
}
}
@media (max-width: 1600px) and (min-width: 1401px) {/*（PC）*/
#xo-slider-645{
	padding-top:100px;
	}
}
@media (max-width: 1400px) and (min-width: 961px) {/*（幅の狭いPC）*/
#xo-slider-645{
	padding-top:100px;
	}
.swiper-wrapper{
	 width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
	margin: 10px;
}
}
@media (max-width: 960px) and (min-width: 601px) {/*（タブレット）*/

#xo-slider-645{
	padding-top:50px;
	}
.swiper-wrapper{
	 width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
	margin: 10px;
}
}
@media (max-width: 600px)  {/*（スマホ）*/
#xo-slider-645{
	padding-top:50px;
	}
.swiper-wrapper{
	 width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
	margin: 10px;
}	
}
/*-------------------------
  Aboutエリア
-------------------------*/
.about-text{
	display:block;
	margin-left:10%;
}
.service-text{
   display:block; 
   border-top:1px solid #669898;
	border-bottom:1px solid #669898;
	text-align:justify;
	padding-top:20px;
	padding-bottom:20px;
	margin-left:10%;
}
@media (max-width: 600px)  {/*（スマホ）*/
	.about-text,{
	margin-left:0;
	}
	.service-text{
	margin-left:0;
}
}

/*-------------------------
  Workエリア
-------------------------*/
.more-botton{
		font-family:sabawebfont;
		font-size:150%;
	  color:#669898;
}
@media (max-width: 960px) and (min-width: 601px) {/*（タブレット）*/
.work-thumbnail{
	width:80%;
	margin:0 auto;
}
}

/*-------------------------
  Contactエリア
-------------------------*/
.contact-title{
   position:relative;
}
.contact-title-image{
	position:absolute;
	top:-10%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}

/*-------------------------
  About〜Blogまでのエリア
-------------------------*/
@media (min-width: 1601px) {/*（幅の広いPC）*/
	.saba-artwork-01 img{
	object-position: 100% 0%;
  width: 20vw;
  height:auto;
  position: absolute;
  right:83%;
	top: 300px;
	opacity:0.8;
}
.saba-artwork-02 img {
    object-position: 0% 50%;
    position: absolute;
    width: 35vw;
    height: auto;
    right: -100px;
	top: -100px;
	opacity:0.8;
}
.saba-artwork-03 img {
    object-fit: cover;
    object-position: 0% 100%;
    width:20vw;
    height:auto;
    position: absolute;
    top: 900px;
	right: -50px;
	opacity:0.8;
}
}
@media (max-width: 1600px) and (min-width: 1201px) {/*（全てのPC）*/
.saba-artwork-01 img{
	object-position: 100% 0%;
  width: 25vw;
  height:auto;
  position: absolute;
  right:80%;
	top: 300px;
	opacity:0.8;
}
.saba-artwork-02 img {
    object-position: 0% 50%;
    position: absolute;
    width: 40vw;
    height: auto;
    right: -200px;
	opacity:0.8;
}
.saba-artwork-03 img {
    object-fit: cover;
    object-position: 0% 100%;
    width: 20vw;
    height:auto;
    position: absolute;
    top: 900px;
	right: -50px;
	opacity:0.8;
}
}
@media (max-width: 1200px) and (min-width: 961px) {/*（幅の狭いPC）*/
.saba-artwork-01 img{
	object-position: 100% 0%;
  width: 22vw;
  height:auto;
  position: absolute;
  right:85%;
	top: 300px;
	opacity:0.8;
}
.saba-artwork-02 img {
    object-position: 0% 50%;
    position: absolute;
    width: 40vw;
    height: auto;
    right: -200px;
	opacity:0.8;
}
.saba-artwork-03 img {
    object-fit: cover;
    object-position: 0% 100%;
    width: 18vw;
    height: auto;
    position: absolute;
    top: 880px;
	right: -10px;
	opacity:0.8;
}
}
@media (max-width: 960px) and (min-width: 601px) {/*（タブレット）*/
.saba-artwork-01 img{
	object-position: 100% 0%;
  width: 22vw;
  height:auto;
  position: absolute;
  right:85%;
	top: 300px;
	opacity:0.8;
}
.saba-artwork-02 img {
    object-position: 0% 50%;
    position: absolute;
    width: 40vw;
    height: auto;
    right: -50px;
	top: -130px;
	opacity:0.8;
}
.saba-artwork-03 img {
    object-fit: cover;
    object-position: 0% 100%;
    width: 15vw;
    height: auto;
    position: absolute;
    top: 900px;
	right: -10px;
	opacity:0.8;
}
}
@media (max-width: 600px)  {/*（スマホ）*/
.saba-artwork-01 img{
	object-position: 100% 0%;
  width: 30vw;
  height:auto;
  position: absolute;
  right:80%;
	top: 380px;
	opacity:0.5;
}
 .saba-artwork-02 img {
        object-position: 0% 50%;
        position: absolute;
        width: 70vw;
        height: auto;
        right: 70%;
        top: -50px;
        left: 70%;
		  opacity:0.5;
    }
.saba-artwork-03 img {
    object-fit: cover;
    object-position: 0% 100%;
    width: 20vw;
    height: auto;
    position: absolute;
    top: 930px;
	right: -10px;
	opacity:0.5;
}
}

/*-------------------------
  フッターエリア
-------------------------*/
#footer *{
	mix-blend-mode: normal; 
}
#before_footer_widget *{
	mix-blend-mode: normal;
}
@media (max-width: 600px)  {/*（スマホ）*/
.hfe-copyright-wrapper{
	position: relative;
  font-size:60%;
		}
.footer-logo img{
	width:30%;
}
.elementor-233 .elementor-element.elementor-element-6be2081 {
    text-align: center;
}
.elementor-233 .elementor-element.elementor-element-2968615 a.hfe-menu-item, .elementor-233 .elementor-element.elementor-element-2968615 a.hfe-sub-menu-item{
		font-size:70%;
	}
.elementor-233 .elementor-element.elementor-element-279f4a9 > .elementor-container {
    min-height: 300px;
}
}