@charset "UTF-8";
/* CSS Document */
/*------------------------------------------------------------------------------
  common
------------------------------------------------------------------------------*/
.fc_01{
	color: #1d1d1d!important;
}
.fc_02{
	color: #e4027f!important;
}
.fc_03,a{
	color:#ebebeb!important;
}
.fc_04,a{
	color:#fff!important;
}
.fc_05{
	color: #e4027f;
}
.fc_06{
	color: #e4027f;
}
/****************************************
フォントサイズ
****************************************/
.fs_10{
	font-size: 0.625em!important;
}
.fs_12{
	font-size: 0.75em!important;
}
.fs_13{
	font-size: 0.813em!important;
}
.fs_14{
	font-size: 0.875em!important;
}
.fs_16{
	font-size: 1em!important;
}
.fs_18{
	font-size: 1.125em!important;
}
.fs_20{
	font-size: 1.25em!important;
}
.fs_22{
	font-size: 1.375em!important;
}
.fs_24{
	font-size:24px!important;
}
.fs_30{
	font-size:30px!important;
}

/****************************************
マージン
****************************************/
.mb_10{
	margin-bottom: 10px;
}
.mb_15{
	margin-bottom: 15px;
}
.mb_20{
	margin-bottom: 20px;
}
.mb_30{
	margin-bottom: 30px;
}
.mb_40{
	margin-bottom: 40px;
}
.mb_50{
	margin-bottom: 50px;
}
.mb_60{
	margin-bottom: 60px;
}
.mb_80{
	margin-bottom: 80px;
}
.mb_100{
	margin-bottom: 100px;
}
.mb_120{
	margin-bottom: 120px;
}

.mt_10{
	margin-top: 10px;
}
.mt_30{
	margin-top: 30px;
}
.mt_40{
	margin-top: 40px;
}
.mt_60{
	margin-top: 60px;
}
.mt_120{
	padding-top: 120px;
}

/****************************************
パディング
****************************************/
.pb_30{
	padding-bottom: 30px;
}
.pb_60{
	padding-bottom: 60px;
}
.pb_120{
	padding-bottom: 120px;
}

/****************************************
テキスト装飾
****************************************/
.annotation{
	font-weight: bold;
	font-size: 1.125em;
	color: #cf5367;
}
.font_bold{
    font-weight: bold;
}
.text_centre{
	text-align: center;
}
.lene_height_01{
	line-height: 2.5em;
}

/****************************************
改行
****************************************/
.sp_br{
	display: block;
}

/****************************************
ホバー・アニメーション
****************************************/
.hover_act_01{
	transition: 0.5s;
}
.hover_act_01:hover{
	opacity: 0.5;
	transition: 0.5s;
}
/*点滅アニメーション*/
.blink {
	-webkit-animation: blink 1s ease-in-out infinite alternate;
	animation: blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*回転アニメーション*/
.img_rotate_01 {
    animation: r2 10s linear infinite;
    max-width: 160px;
	width: 100%;
    margin: 0 auto 20px auto;
  }
  @keyframes r2 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
  }
.img_rotate_02{
    animation: r2 10s linear infinite;
    max-width: 100px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: -50px;
    left: 10px;
    opacity: 0.4;
  }
  @keyframes r2 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
  }

/****************************************
大要素
****************************************/
body {
    margin: 0 auto;
    color: #ebebeb;
	background: #1d1d1d;
    /* font-family: 'Shippori Mincho', serif; */
	font-family: 'DotGothic16', sans-serif;
	font-family: 'Hina Mincho', serif;
	font-family: 'Yomogi', cursive;
}

h3{
    text-align: center;
}

p{
	font-size: 0.938em;
	font-weight: bold;
}

/*見出し画像*/
h2 img{
	max-width: 90%;
	margin-bottom: 50px;
}
.img_right h2 img{
	margin-left: auto;
	display: block;
	margin-bottom: 0;
}
.img_left h2 img{
	margin-right: auto;
	display: block;
}

/*sp版表示*/
.sp_display{
	display: block;
}

.frame{
    width: 95%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    background: #070707;
    padding: 70px 10px;
    box-shadow: 0 5px 25px 0 rgb(0 0 0 / 5%);
    outline: 1px solid #898989;
    outline-offset: -12px;
}
.frame p{
	padding: 0 10px;
}

/****************************************
flex
****************************************/
.l_inner{
	width:95%;
	margin:auto;
	max-width: 1200px;
}
.l_flex{
	display: flex;
	flex-wrap: wrap;
}
.l_items {
  align-items: flex-start;
}
.l_center{
	align-items: center;
}
.l_column{
	flex-direction: column;
}
.l_between {
  justify-content: space-between;
}
.l_justify-center{
  justify-content: center;
}
.l_justify-center_between{
	justify-content: space-between;
  }
.l_reverse {
  flex-direction: row-reverse;
}
.l_row_reverse{
	flex-direction:row-reverse
}

.bg_marble{
	background-color: rgb(255 255 255 / 90%);
    /* background-image: url(images/bg_marble.jpg)!important; */
    background-repeat: no-repeat;
    background-size: cover;
	height: auto;
	width: 100%;
}


/****************************************
ボタン
****************************************/
/*制作実績ボタン*/
.btnlinestretches {
    position: relative;
    text-align: center;
    color: #fff !important;
    border: 1px solid rgb(228 2 127 / 100%);
    margin: 10px;
    padding: 16px 0;
    max-width: 320px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    outline: none;
    transition: all 0.3s ease-in-out;
    background: rgb(228 2 127 / 100%);
    font-size: 22px;
}
/*hoverした際の背景の形状*/
.btnlinestretches:hover {
	background: none;
	color: rgb(228 2 127 / 100%) !important;
	border-color: transparent;
}
/*線の設定*/
.btnlinestretches::before,
.btnlinestretches::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	border: solid rgb(228 2 127 / 100%);
	width: 10px;
	height: 10px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*線の位置と形状*/
.btnlinestretches::before {
	top: -6px;
	left: -6px;
	border-width: 1px 0 0 1px;
}
/*線の位置と形状*/
.btnlinestretches::after {
	bottom: -6px;
	right: -6px;
	border-width: 0 1px 1px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches:hover::before,
.btnlinestretches:hover::after {
	width: calc(100% + 11px);
	height: calc(100% + 11px);
	border-color: rgb(228 2 127 / 100%);
}

/*依頼方法ボタン*/
.btnlinestretches_02 {
    position: relative;
    text-align: center;
    color: #fff !important;
    margin: 10px auto;
    padding: 8px 0;
    max-width: 270px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    outline: none;
    transition: all 0.3s ease-in-out;
    background: rgb(228 2 127 / 100%);
}
/*hoverした際の背景の形状*/
.btnlinestretches_02:hover {
	background: none;
	color: rgb(228 2 127 / 100%) !important;
	border-color: transparent;
}
/*線の設定*/
.btnlinestretches_02::before,
.btnlinestretches_02::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	border: solid rgb(228 2 127 / 100%);
	width: 10px;
	height: 10px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*線の位置と形状*/
.btnlinestretches_02::before {
	top: -6px;
	left: -6px;
	border-width: 1px 0 0 1px;
}
/*線の位置と形状*/
.btnlinestretches_02::after {
	bottom: -6px;
	right: -6px;
	border-width: 0 1px 1px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches_02:hover::before,
.btnlinestretches_02:hover::after {
	width: calc(100% + 11px);
	height: calc(100% + 11px);
	border-color: rgb(228 2 127 / 100%);
}

/*今すぐ依頼ボタン*/
.btnlinestretches_03 {
    position: relative;
    text-align: center;
    color: #fff !important;
    border: 1px solid rgb(228 2 127 / 100%);
    margin: 10px;
    padding: 16px 0;
    max-width: 320px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    outline: none;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(25deg, #ff4da1, rgb(228 2 127 / 100%));
    font-size: 20px;
}
/*hoverした際の背景の形状*/
.btnlinestretches_03:hover {
	background: none;
	color: rgb(228 2 127 / 100%) !important;
	border-color: transparent;
}
/*線の設定*/
.btnlinestretches_03::before,
.btnlinestretches_03::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	border: solid rgb(228 2 127 / 100%);
	width: 10px;
	height: 10px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*線の位置と形状*/
.btnlinestretches_03::before {
	top: -6px;
	left: -6px;
	border-width: 1px 0 0 1px;
}
/*線の位置と形状*/
.btnlinestretches_03::after {
	bottom: -6px;
	right: -6px;
	border-width: 0 1px 1px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches_03:hover::before,
.btnlinestretches_03:hover::after {
	width: calc(100% + 11px);
	height: calc(100% + 11px);
	border-color: rgb(228 2 127 / 100%);
}


/*pc追尾ボタン*/
.btn,
a.btn,
button.btn {
	display: none!important;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding: 15px 0 10px 0!important;
    text-align: center;
    width: 240px;
    background: linear-gradient(25deg, #ff4da1, rgb(228 2 127 / 100%));
}
.btn_wrap {
  position: fixed;
  top: 125px;
  right: 10px;
  z-index: 1;
}
a.btn-c {fv_05
  position: relative;
  padding: 0.25rem 2rem 1.5rem 3.5rem;
}
a.btn-c .btn_wrap_text { 
    position: absolute;
    top: -3.25rem;
    display: block;
    width: 240px;
    padding: 18px 0;
    background: rgb(17 17 17 / 95%);
    outline: 1px solid #e4027f;
    outline-offset: -8px;
    line-height: 22px;
}
a.btn-c span:before,
a.btn-c span:after {
  position: absolute;
  left: calc(50% - 10px);
  content: "";
}
a.btn-c span:after {
  bottom: -7px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #1d1d1d transparent transparent transparent;
}
.btn_wrap_02 {
    position: fixed;
    top: 210px;
    right: 10px;
    z-index: 1;
  }
.btn_wrap_03 {
    position: fixed;
    top: 270px;
    right: 10px;
    z-index: 1;
}


/****************************************
js装飾系
****************************************/
/*マーカーアニメーション----------------------------------------------------------------*/
.marker.active{
    background-position: -100% .7em;
}
.marker {
    background-image: -webkit-linear-gradient(left, transparent 50%, #3c3c3c 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #3c3c3c 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, #3c3c3c 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #3c3c3c 50%);
    background-image: linear-gradient(left, transparent 50%, #3c3c3c 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
    font-size: 1.125em;
}

/*画面遷移--------------------------------------------------------------------------*/
/*ローディング画面のためのCS*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #1d1d1d;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}
#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
body.appear{
    background:#fff;/*画面を開いた後の背景色を指定*/
}
/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}
/*上に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 9998;
    width: 100%;
    height: 100vh;
    bottom:50%;
	left:0;
    transform: scaleY(1);
    background-color: #1d1d1d;/*伸びる背景色の設定*/
}
@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}
/*下に消えるエリア*/
body.appear .splashbg2{
    animation-name:PageAnime2;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 9998;
    width: 100%;
    height: 100vh;
    top: 50%;
	left:0;
    transform: scaleY(1);
    background-color: #1d1d1d;/*伸びる背景色の設定*/
}
@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}
/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*スライダー----------------------------------------------------------------------------------------------*/
	.swiper{
		overflow: hidden;
	}
	/* スライドの動き等速 */
	.swiper-wrapper {
		transition-timing-function: linear;
	}
  /* 画像のサイズ調整 */
  .swiper-slide img {
    height: auto;
    width: 95%;
    margin-top: 60px;
    padding: 8px;
  }
  .swiper-wrapper{
	align-items: flex-end;
  }

/*topへ戻るボタンー----------------------------------------------------------------------------------------------*/
#pagetop{
    position: fixed;
    right: 10px;
    bottom: 110px;
    cursor: pointer;
    z-index: 1;
    width: 95px;
}

/*料金文字フェードアニメーションー----------------------------------------------------------------------------------------------*/
.eachTextAnime{
    color: #fff;
    text-shadow: none;
    padding: 10px;
}
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*一文字ずつのテキストアニメーションー----------------------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
	.request_text {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: #fff;
	}
	.request_text span {
	display: block;
	transform: translate(0, 105%);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
	}
	.request_text.-visible span {
	transform: translate(0, 0);
	}
	/*0.06ずつ遅延させる*/
	.request_text span:nth-child(2) {
	transition-delay: 0.06s;
	}
	.request_text span:nth-child(3) {
	transition-delay: 0.12s;
	}
	.request_text span:nth-child(4) {
	transition-delay: 0.18s;
	}
	.request_text span:nth-child(5) {
	transition-delay: 0.24s;
	}
	.request_text span:nth-child(6) {
	transition-delay: 0.30s;
	}
	.request_text span:nth-child(7) {
	transition-delay: 0.36s;
	}
	.request_text span:nth-child(8) {
	transition-delay: 0.42s;
	}
	.request_text span:nth-child(9) {
	transition-delay: 0.48s;
	}
	.request_text span:nth-child(10) {
	transition-delay: 0.54s;
	}
	.request_text span:nth-child(11) {
	transition-delay: 0.6s;
	}
	.request_text span:nth-child(12) {
	transition-delay: 0.66s;
	}
	.request_text span:nth-child(13) {
	transition-delay: 0.72s;
	}
	.request_text span:nth-child(14) {
	transition-delay: 0.78s;
	}
	.request_text span:nth-child(15) {
	transition-delay: 0.84s;
  }
  .request_text span:nth-child(16) {
	transition-delay: 0.9s;
  }



/*tablet-------------------------------------------------------------*/
@media screen and (min-width: 610px) {
	/****************************************
	改行
	****************************************/
	.sp_br{
		display: none;
	}

	/*見出し画像*/
	h2 img{
		max-width: 80%;
	}

}

/*pc--------------------------------------------------------------*/
@media screen and (min-width:800px){
	/****************************************
	改行
	****************************************/
	.sp_br{
		display: none;
	}

	/*sp版表示*/
	.sp_display{
		display: none;
	}

	/*見出し画像*/
	h2 img{
	max-width: 60%;
}
/*topへ戻るボタンー----------------------------------------------------------------------------------------------*/
	#pagetop{
		bottom:10px;
		width: 125px;
	}

	/*回転アニメーション*/
	.img_rotate_02{
		max-width: 120px;
	}

	
/*pc追尾ボタン*/
.btn,
a.btn,
button.btn {
	display: block!important;
}


}