@charset "utf-8";

/*-------------------------------------------------------------------------------------
　TOP　トップページ
-------------------------------------------------------------------------------------*/

/*----------------------　MV メインビジュアル　----------------------*/

#mv {
width: 95%;
height: 60vh;
margin: clamp(60px, 6vw, 80px) auto  clamp(40px, 5vw, 60px) ;
background-color: #EEEFF3;
background-size: cover;
position: relative;
border-radius: 20px;
}
#mv h1{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 600;
line-height: 1.4;
font-size: clamp(26px, 5vw, 40px);
position: absolute;
bottom: -16vh;
left: 7%;
height: 100%;
text-align: left;
z-index: 90;
}
#mv h1 span{
background-color: #EEEFF3;
line-height: 1.6;
}
#mv h1 span strong{
color: var(--blue);
}
#mv figure.cara{
width: 420px;
min-width: 380px;
position: absolute;
left: 7%;
bottom: -31px;
z-index: 89;
}
#mv figure.campaign img{
width:clamp(140px, 16vw, 200px);
position: absolute;
right: 4%;
bottom: -10px;
z-index: 88;
}
/*----------------------　MV スライダーアニメーション　----------------------*/
#slider{
display: flex;
justify-content: right;
border-radius: 20px;
margin: 0 auto;
padding-left: 27%;
overflow: hidden;
height: 100%;
}
#slider div{
display: flex;
flex-direction: column-reverse;
overflow: hidden;
margin-left: 20px;
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.10);
transform: translate3d(80%, -15%, 0) rotate(369deg);
height: 150%;
}
#slider ul {
display: flex;
flex-direction: column-reverse;
margin: 0;
padding: 0;
align-items: center;
animation: slideShow 180s infinite linear both;
list-style: none;
}
#slider li img {
margin-bottom: 20px;
}
#slider .slider_a ul{animation-duration: 50s;}
#slider .slider_b ul{animation-duration: 60s;}
#slider .slider_c ul{animation-duration: 40s;}
#slider .slider_d ul{animation-duration: 30s;}
#slider .slider_e ul{animation-duration: 50s;}

@keyframes slideShow {
0% {transform: translateY(100%);}
100% {transform: translateY(0%);}
}

@media screen and (max-width: 768px) {
    #mv .sp_none{
        display: none;
    }
    #mv {
        height: 80vh;
        margin: clamp(60px, 6vw, 80px) auto 3vw;
        background-size: 70vh;
    }
    #mv #slider {
        height: 45vh;
        padding-left: 0;
        border-radius: 20px 20px 0 0;
        justify-content: center;
    }
    #mv #slider div{
        transform: translate3d(-2%, -15%, 0) rotate(369deg);
        margin-left: 20px;
        min-width: 30%;
        opacity: 100;
    }
    #mv h1 {
        bottom: -50vh;
        font-size: clamp(23px, 5.2vw, 34px);
        text-align: center;
        left: 0;
        right: 0;
    }
    #mv figure.cara {
        width: 60vw;
        min-width: 300px;
        bottom: -30px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
    #mv figure.campaign img {
        display: none;
    }
}

/*----------------------　TOP message------------------*/
#contents_top #message{
padding-top: 60px;
padding-left: clamp(40px, 6vw, 80px);
padding-right: clamp(40px, 6vw, 80px);
padding-bottom: clamp(80px, 12vw, 140px);
background: url(../images/top_message_bg.png) center no-repeat;
background-size:105%;
background-position: top;
}
#contents_top #message p{
font-weight: bold;
line-height: 1.8;
font-size: clamp(15px, 1.6vw, 20px);
}

/*----------------------　TOP story------------------*/
#contents_top #story,
#contents_story #story{/*ストーリーCMSページにも同じ指定あり*/
width:95%;
max-width: 1200px;
margin: 0 auto 9vw;
}

/*-------------　storyスライダー ここから -------------*/
/*https://mgmgblog.com/post-464/*/
/*https://design-baum.jp/develop/front-end/10996/*/

.slick-arrow:before{
content:""!important;
width: 100%!important;
height: 100%!important;
position: absolute;
}
.slick-next:before{
background: url(../images/commom_btn_right.png)!important;
background-size: contain!important;
}
.slick-prev:before{
background: url(../images/commom_btn_left.png)!important;
background-size: contain!important;
}
.slick-arrow{
z-index:2!important;
width:30px!important;
height:30px!important;
}
.slick-next{right: -10px!important;/*はみ出るとスマホがやばい*/}
.slick-prev{left:  -40px!important;/*はみ出るとスマホがやばい*/}


#contents_top #story div#slick-slide,
#contents_story #story div#slick-slide{/*ストーリーCMSページにも同じ指定あり*/
	width:100%;
	margin: 0 auto;
}
#contents_top #story div#slick-slide div.slider_each,
#contents_story #story div#slick-slide div.slider_each{/*ストーリーCMSページにも同じ指定あり*/
width: 100%;
background-color: var(--bg_gray);
border-radius: 15px;
padding:3vw 2.5vw 1.5vw;
margin:0 10px;
background-image: url(../images/story_bg.png) ;
background-repeat: no-repeat;
background-size: clamp(400px,50vw,630px);
}
#contents_top #story div h3.title,
#contents_story #story div h3.title{/*ストーリーCMSページにも同じ指定あり*/
font-size: clamp(15px, 1.6vw, 18px);
text-align: left;
margin-bottom:1vw;
color:#333;
}
#contents_top #story div p.category,
#contents_story #story div p.category{/*ストーリーCMSページにも同じ指定あり*/
float:right;
background-color: #999;
border-radius: 5px;
margin-top:0.5vw;
padding:2px 5px;
font-size: clamp(8px, 1.0vw, 12px);
color: #fff;
font-weight: bold;;
}
#contents_top #story div p.client,
#contents_story #story div p.client{/*ストーリーCMSページにも同じ指定あり*/
font-size: clamp(14px, 1.4vw, 16px);
text-align: left;
margin-bottom:1vw;
letter-spacing: 0;
}
#contents_top #story div figure,
#contents_story #story div figure{/*ストーリーCMSページにも同じ指定あり*/
margin-bottom: clamp(10px,3vw,30px);
box-shadow: 2px 2px 5px #ccc;
}


/*----------------------　TOP works------------------*/
#contents_top #works{
width:100%;
background-color: var(--bg_gray);
padding-bottom:20px;
margin-bottom:clamp(30px, 12vw, 150px);
}
#contents_top #works h2{
width: 100%;
height: clamp(40px, 6vw, 50px);
line-height: 1;
font-size: clamp(24px, 3.4vw, 34px);
color: var(--blue);
text-align: left;
background-image: url(../images/top_works_title.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top left;
padding-left: 4vw;
margin:0;
}
#contents_top #works h2 strong{
font-weight: normal;
color: #000;
font-size: clamp(12px, 1.4vw, 1.6px);
vertical-align: middle;
margin-left:1vw;
}

/*----------------------　TOP worksスクロール------------------*/
#contents_top #works .carousel {
width:100%;
display: flex;
overflow: hidden;
> * {
flex: 0 0 150%;
margin-top:clamp(20px, 3vw, 40px);
}
}
#contents_top #works ul{
width: 100%;
display: flex;
gap: 3vw;
margin:0 auto;
padding-right:3vw;
will-change: transform; 
animation: scrolling 30s linear infinite;
}
#contents_top #works ul li{
	/*width:320px;********幅指定効かない*/
	text-align: left;
}
#contents_top #works ul li h3{
font-size: clamp(14px,1.5vw,16px);
margin-bottom:10px;
text-align: left;
}
#contents_top #works ul li figure{
margin-bottom:10px;
}
#contents_top #works ul li p{
font-size: clamp(13px,1.3vw,14px);
letter-spacing: 0;
padding-bottom: 10px;
}
#contents_top #works ul li a p,
#contents_top #works ul li a h3{
	color:#333;
}
#contents_top #works ul li a p:hover,
#contents_top #works ul li a h3:hover{
	color: var(--light_blue);
}

@keyframes scrolling {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}
.carousel:hover {
&:hover .group {
animation-play-state: paused;/*効いてない*/
}
}

/*------------------------------------------------------
カルーセル追加
------------------------------------------------------*/
/* カルーセル外枠 */
.wp_carousel {
  overflow: hidden;
  width: 100%;
  margin-top: 30px;
  box-sizing: border-box;
  position: relative;
}

/* スライダー全体 */
.wp_slider {
  display: flex;
  animation: scroll-left 40s linear infinite;
  width: max-content; /* 子要素の合計幅に合わせる */
}

/* 各スライド */
.wp_slide {
  width: calc(100vw / 5);
  list-style: none;
  margin-right: 10px;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .wp_slide {
    width: calc(100vw / 3);
  }
}

/* 画像調整 */
.wp_slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* アニメーション定義 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}







/*----------------------　TOP clients-------------------*/

#contents_top #clients h2{
font-size:  clamp(20px, 2.4vw, 26px);
margin-bottom:3vw;
color:  var(--blue);
}
#contents_top #clients h2::before{
content:url("../images/common_icon_l.svg");
margin:0 2vw;
vertical-align: middle;
}
#contents_top #clients h2::after{
content:url("../images/common_icon_r.svg");
margin:0 2vw;
vertical-align: middle;
}
#contents_top #clients ul{
width:95%;
max-width: 1200px;
margin:0 auto 9vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#contents_top #clients ul li{
    margin: 0 20px 30px;
}

/*----------------------　TOP strength-------------------*/
#contents_top #strength,
#contents_strength #strength{
width: 100%;
background-image: url(../images/top_btob_bg.png);
background-size: clamp(600px, 85vw, 1360px);
background-repeat: no-repeat;
background-position: top 60px right -100px;
}
#contents_top #strength div,
#contents_strength #strength div{
width:90%;
max-width: 1200px;
margin:0 auto;
}
#contents_top #strength div p.text,
#contents_strength #strength div p.text{
width:55%;
padding-bottom:6vw;
text-align: left;
}
#contents_top #strength div p.btn,
#contents_strength #strength div p.btn{
width:50%;
padding-bottom: clamp(60px, 15vw, 250px);
}



/*----------------------　TOP service-------------------*/
#contents_top #service {
width:100%;
background-color: var(--bg_gray);
padding: 9vw 6vw 6vw;
margin-bottom: clamp(30px,6vw,90px);
text-align: center;
}
#contents_top #service ul{
width:100%;
max-width: 1000px;
margin:0 auto 3vw;
display: flex;
flex-wrap: wrap;
}
#contents_top #service ul li{
width:23%;
margin:0 1% 1vw;
}
#contents_top #service li p{
font-weight: bold;
font-size: clamp(15px, 1.6vw, 18px);
color: var(--blue);
padding-bottom:10px;
}
#contents_top #service p.text{
max-width:1200px;
margin:0 auto;
padding-bottom: clamp(20px, 6vw, 60px);
}



/*----------------------　TOP needs-------------------*/
#contents_top #needs {
margin:0 auto 60px;
}
#contents_top #needs ul{
width: 90%;
max-width:1100px;
display: flex;
flex-wrap:wrap;
justify-content: center;
gap:5%;
margin: 0 auto clamp(0px,3vw,30px);
}
#contents_top #needs li{
margin-bottom:  clamp(30px, 4.5vw, 60px);
width:30%;
min-width: 300px;
border-bottom: var(--light_blue) 1px solid;
display: flex;
align-items: center;
height:100px;
}
#contents_top #needs h3{
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 16px;
font-weight: bold;
text-align: left;
margin-bottom: 0px;
margin-left: 15px;
}
#contents_top #needs li img{
height: 100px;
}








/* ぽよんと弾むアニメーションの設定 */
@keyframes bounce {
  0% {    transform: translateY(0) scale(1); /* 通常の位置とサイズ */  }
  3% {    transform: translateY(-50px) scale(1.2); /* 少し上にジャンプして大きくなる */  }
  10% {    transform: translateY(0) scale(1); /* 元のサイズと位置に戻る */  }
  100% {    transform: translateY(0) scale(1); /* 元のサイズと位置に戻る */  }
		}
.bounce-circle {
  animation: bounce 10s ease ; /* ぽよんと弾むアニメーション */
}
.needs01 {  animation-delay: 0s;}
.needs02 {  animation-delay: 0.2s;}
.needs03 {  animation-delay: 0.4s;}
.needs04 {  animation-delay: 0.6s;}
.needs05 {  animation-delay: 0.8s;}
.needs06 {  animation-delay: 0.1s;}
.needs07 {  animation-delay: 0.12s;}


/*　右下ウェッパくん　-*/
#contents_top #needs figure{
flex: none;
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto;
z-index: 9;
}
#contents_top #needs figure img{
width: clamp(140px, 16vw, 180px);
position: absolute;
right:5vw;
top:-5vw;
}





/*----------------------　TOP b_to_b　----------------------*/

#contents_top #b_to_b{/*背景色*/
display: block;
background-color: var(--bg_gray);;
text-align: center;
padding: 6vw 9vw 6vw;
}
#contents_top #b_to_b #btob_promotion,
#contents_top #b_to_b #case_study{
margin-bottom: clamp(60px,9vw,90px);
}
/*----------- B tp B promotion ----------*/

#contents_top #btob_promotion figure {
display: block;
float: left;
width:55%;
margin-bottom:3vw;
}
#contents_top #btob_promotion p.text{
width:40%;
text-align: left;
float: right;
}

/*----------- ケーススタディ----------*/

#contents_top #case_study h3{
font-size:  clamp(20px, 2.4vw, 26px);
margin-bottom:3vw;
}
#contents_top #case_study h3::before{
content:url("../images/common_icon_l.svg");
margin:0 2vw;
vertical-align: middle;
}
#contents_top #case_study h3::after{
content:url("../images/common_icon_r.svg");
margin:0 2vw;
vertical-align: middle;
}
#contents_top #case_study ul{
display: flex;
justify-content: space-between;
margin-bottom: 6vw;
}
#contents_top #case_study li{
width:48%;
background-color:  var(--bg_gray);
padding:30px 20px 20px;
border-radius: clamp(5px, 1vw, 15px);
}
#contents_top #case_study h4{
font-size:  clamp(10px, 1.4vw, 14px);
color: var(--blue);
padding-bottom:1vw;
border-bottom:1px solid #999;
margin-bottom: 1vw;
}
#contents_top #case_study h4 strong{
display: block;
font-size:  clamp(20px, 2.6vw, 30px);
}
#contents_top #case_study h5{
font-size: 20px;
color: var(--blue);
margin-bottom:2vw;
}
#contents_top #case_study figure{
margin-bottom:3vw;
}

/*----------- 総合的ツール展開----------*/

#contents_top #all_tools{
text-align: left;
}
#contents_top #all_tools div{
width:50%;
}
#contents_top #all_tools figure{
width:45%;
float: right;
margin-bottom:3vw;
}
#contents_top #all_tools p.btn{
clear: none;
padding-bottom:0;
}

/*---------　TOP creation_step　---------*/

#contents_top #creation_step{
display: block;
background-image: url("../images/step_bg.svg") ;
text-align: center;
padding: 9vw 9vw 0;
}
#contents_top #creation_step figure.step{
width:100%;
max-width: 1000px;
overflow-y:hidden;
margin:0 auto 3vw;
}
#contents_top #creation_step figure.step img{
width:100%;
}

#contents_top #creation_step .staff{
float: left;
width: clamp(160px, 30vw, 400px);
margin-top: 0.5vw;
margin-left: -3vw;
}
#contents_top #creation_step .weppa{
float:right;
width:clamp(200px, 25vw, 360px);
}
#contents_top #creation_step .btn{
position: relative;
bottom: 4vw;
}





/*------------------------------------------------------
　TOP　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {

#contents_top #creation_step,
#contents_top #service p.txt{
text-align: left;
}

/*----------- TOP message ----------*/
#contents_top #message p{
text-align: left;
line-height: 1.6;
font-weight: normal;
}
/*----------- TOP works TAB ----------*/
#contents_top #works .carousel {
> * {
flex: 0 0 200%;
}
}

/*----------- TOP b to b TAB ----------*/
#contents_top #b_to_b{/*背景色*/
padding: 6vw 6vw 3vw;
}
#contents_top #btob_promotion figure {
float:none;
width:100%;
}

#contents_top #btob_promotion p.text{
width:100%;
float: none;
}

/*----------- TOP case study TAB ----------*/
#contents_top #case_study ul{
display: block;
}
#contents_top #case_study li{
width:100%;
margin-bottom:3vw;
}

/*----------- TOP strength TAB ----------*/
#contents_top #strength{
background-position: top 15vw  left 27vw;
}
#contents_top #strength div p.text,
#contents_strength #strength div p.text{
width:50%;
}

/*----------- TOP needs TAB ----------*/
.marquee-right ul li {
	padding: 50px 5px 0;
	width: calc(100vw / 3 - 10px);
}


/*----------- TOP all tools TAB ----------*/
#contents_top #all_tools div{
width:100%;
margin-bottom:3vw;
}
#contents_top #all_tools figure{
float: none;
width:100%;
max-width: 400px;
margin:0 auto 6vw;
}

/*----------- TOP step TAB ----------*/

#contents_top #creation_step .p.scroll_icon{
display: block;
}
#contents_top #creation_step .btn{
    bottom: 0;
	margin-bottom:6vw;
}
#contents_top #creation_step figure.step img{
min-width:800px;
margin:0 3vw 30px;
}



}
/*----------------------------------------------------
　TOP　タブレット　768以下　ここまで
------------------------------------------------------*/

/*------------------------------------------------------
　TOP　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/

/*----------- TOP MV SP ----------*/
#contents_top #mv figure.campaign img{
display:none;
}
#contents_top #mv figure.cara{
width: 60vw;
min-width: 300px;
bottom: -30px;
margin: 0 auto;
left: 0;
right: 0;
}
#contents_top #mv {
height: 80vh;
margin: clamp(60px, 6vw, 80px) auto 3vw;
/*0919追加 background: url(../images/top_mv_sp.png) #EEEFF3 top no-repeat;*/
background-size: 70vh;
}
#contents_top #mv h1{
bottom: -50vh;
font-size: clamp(23px, 5.2vw, 34px);
text-align: center;
left:0;
right:0;
}

/*----------- TOP story SP ----------*/
#contents_top #story div#slick-slide div.slider_each,
#contents_story #story div#slick-slide div.slider_each{/*ストーリーCMSページにも同じ指定あり*/
background-size: clamp(320px, 90vw, 900px);
}

/*----------- TOP clients SP ----------*/

#contents_top #story,
#contents_top #works,
#contents_top #clients{
clear: both;
margin-bottom:15vw;
}

#contents_top #clients h2{
margin-bottom:6vw;
}
#contents_top #clients ul{
flex: none
}
#contents_top #clients ul li{
width:45%;
margin: 0 10px 30px;
}


/*----------- TOP works TAB ----------*/
#contents_top #works .carousel {
> * {
flex: 0 0 300%;
}
}

/*----------- TOP service SP ----------*/
#contents_top #service {
padding: 15vw 6vw 12vw;
margin-bottom: clamp(60px,9vw,120px);
}
#contents_top #service ul li{
width:46%;
margin:0 2% 2%;
}
#contents_top #service p.text{
text-align: left;
}

/*----------- TOP strength SP ----------*/
#contents_top #strength,
#contents_strength #strength{
width:100%;
background-size: 150vw;
background-position: top 100px left -40vw;
}
#contents_top #strength div,
#contents_strength #strength div{
width: 90%;
}
#contents_top #strength div p.text,
#contents_strength #strength div p.text{
width: 100%;
padding-bottom: 6vw;
margin: 70vw auto 0;
}
#contents_top #strength div p.btn,
#contents_strength #strength div p.btn{
width:100%;
padding-bottom:15vw;
}
/*----------- TOP needs TAB ----------*/
.marquee-right ul li {
	padding: 50px 5px 0;
	width: calc(100vw / 2 - 10px);
}
#contents_top #needs figure img{
width: clamp(140px, 30vw, 180px);
position: absolute;
right:5vw;
top:2vw;
}
/*----------- TOP all_tools TAB ----------*/
#contents_top #all_tools img.sp {
    width: clamp(340px, 8vw, 500px);
    margin:0 auto;
}
/*----------- TOP creation_step SP ----------*/
#contents_top #creation_step .btn{
position:static;
margin-bottom:6vw;
}

.foot_bnr{display: none;}


}
/*-----------------------------------------------
　TOP　スマホ　640以下　ここまで
-------------------------------------------------*/






/*-------------------------------------------------------------------------------------
　strength　私たちの強み　#contents_strength
-------------------------------------------------------------------------------------*/

#contents_strength{
    margin-bottom: clamp(60px,8vw,80px);
}

/*----------- strength　WEBパートナーズの強み（他はTopに記述） ----------*/
#contents_strength #strength{
margin-bottom: clamp(60px, 9vw, 120px);
}
#contents_strength #strength h2{
    width: 100%;
    text-align: left;
    margin: 0 0 clamp(20px, 3vw, 30px);
}

/*----------- strength　WEBパートナーズのWeb制作 ----------*/
#contents_strength #our_creation h3{
text-align: left;
}
#contents_strength #our_creation h3 small{
font-size: clamp(12px, 1.6vw, 18px);
}
#contents_strength #our_creation li{
display: block;
clear: both;
text-align: left;
width:85%;
max-width: 900px;
margin:0 auto  clamp(30px,6vw,60px);
}
#contents_strength #our_creation li figure{/* 奇数 =odd は右に画像 */
width: clamp(240px,2.8vw,300px);
float:right;
}
#contents_strength #our_creation li p.text{/* 奇数 =odd は右に余白 */
margin-right:clamp(240px,2.8vw,300px);
}

#contents_strength #our_creation li:nth-child(even) figure{/* 偶数 =even は左画像 */
float:left; 
}
#contents_strength #our_creation li:nth-child(even) p.text{/* 偶数 =even は左余白 */
margin-right:0;
margin-left:clamp(240px,2.8vw,300px);
}

/*----------- strength　パートナーでありたい ----------*/
#contents_strength #be_partners{
width:90%;
max-width: 1000px;
border-radius: clamp(10px, 1.5vw, 20px);
background-color: var(--bg_gray);
padding:clamp(30px,6vw,60px) clamp(35px,7vw,70px);
margin: 0 auto clamp(30px,6vw,90px);
}
#contents_strength #be_partners h3{
margin-bottom:3vw;
}
#contents_strength #be_partners figure{
float:right;
width: clamp(180px, 24vw, 300px);
}
#contents_strength #be_partners p{
text-align:left;
width: clamp(300px, 48vw, 540px);
padding-bottom:0;
}

/*----------- strength　総合的な販促ツール展開 ----------*/
#contents_strength #all_tools {
padding-top: clamp(20px, 9vw, 90px);
}

#contents_strength #all_tools figure{
float:right;
width: clamp(160px, 34vw, 360px);
}
#contents_strength #all_tools h3,
#contents_strength #all_tools p.text{
text-align: left;
width: clamp(200px, 40vw, 480px);
}

#contents_strength #all_tools #one_stop{
width:100%;
border-radius: clamp(10px, 1.5vw, 20px);
background-color: var(--bg_gray);
padding: clamp(20px, 6vw, 60px) clamp(30px, 5vw, 60px) 0;
margin: 3vw auto 0;
clear: both;
}
#contents_strength #all_tools #one_stop h4{
margin-bottom: clamp(20px, 5vw, 60px);
}

#contents_strength #all_tools #one_stop figure{
float:left;
width: 35%;
}

#contents_strength #all_tools #one_stop p.text{
margin-left: 40%;
width: 62%;
padding-bottom: 4vw;
}


/*------------------------------------------------------
　strength　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {
}

/*----------------------------------------------------
　strength　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　strength　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/


#contents_strength #strength h2{
margin: 80vw auto 6vw;
}

#contents_strength #strength div p.text{
margin:0;
padding-bottom:6vw;
}

/*----------- strength　WEBパートナーズのWeb制作 ----------*/
#contents_strength #our_creation li figure{/* 奇数 =odd は右に画像 */
width: clamp(240px,2.8vw,300px);
float:none;
margin:0 auto 20px;
}
#contents_strength #our_creation li p.text{/* 奇数 =odd は右に余白 */
margin-right:0;
margin-left:0;
}
#contents_strength #our_creation li:nth-child(even) figure{/* 偶数 =even は左画像 */
float:none;
margin:0 auto 20px;
}
#contents_strength #our_creation li:nth-child(even) p.text{/* 偶数 =even は左余白 */
margin-right:0;
margin-left:0;
}

/*----------- strength　パートナーでありたい ----------*/
#contents_strength #be_partners figure{
	float:none;
	width: clamp(250px, 50vw, 400px);
	margin:20px auto;
}
#contents_strength #be_partners p{
	float:none;
	width:100%;
}
#contents_strength #all_tools figure{
	float:none;
        width: clamp(240px, 45vw, 400px);
	margin:20px auto 30px;
}
#contents_strength #all_tools h3{
	width:100%;
}
#contents_strength #all_tools p.text{
	width:100%;
	padding-bottom:6vw;
}
#contents_strength #all_tools #one_stop figure{
	float:none;
	width: clamp(240px, 40vw, 400px);
	margin:20px auto;
}
#contents_strength #all_tools #one_stop p.text{
float: none;
width: 100%;
margin: 20px auto;
    }
}
/*------------------------------------------------------
　strength　スマホ　640以下　ここまで
------------------------------------------------------*/
















/*-------------------------------------------------------------------------------------
　b2b-promotion　B to Bプロモーション　#contents_b2b
-------------------------------------------------------------------------------------*/
#contents_b2b .inner_box {
	max-width:100%;
}

/*-----------　b2b-promotion　オンラインとオフライン ----------*/
#contents_b2b #online_offline {
    margin-bottom: clamp(60px,24vw,240px);
}
#contents_b2b #online_offline p.text{
padding:0 10px clamp(10px, 3vw, 30px);
}
#contents_b2b #online_offline figure{
	margin:0 auto clamp(20px, 6vw, 90px);
	width: clamp(200px, 84vw, 900px);
}
#contents_b2b #online_offline dl{
clear:both;
width:100%;
max-width:1000px;
margin: 0 auto;
}
#contents_b2b #online_offline dt{
font-size: clamp(16px, 2.4vw, 24px);
line-height: 1.5;
font-weight: bold;
margin-bottom:  clamp(10px, 3vw, 30px);
}
#contents_b2b #online_offline dt::before{
    content: url(../images/common_icon_l.svg);
    margin: 0 2vw;
    vertical-align: middle;
}
#contents_b2b #online_offline dt::after{
    content: url(../images/common_icon_r.svg);
    margin: 0 2vw;
    vertical-align: middle;
}
#contents_b2b #online_offline  dd{
float:left;
width:46%;
margin:0 2%  clamp(30px,12vw,120px);
}

/*-----------　b2b-promotion　総合的なツール展開 ----------*/

#contents_b2b #all_tools{
	width:100%;
	max-width:1200px;
	margin-bottom: clamp(20px, 6vw, 90px);
}
#contents_b2b #all_tools div.intoro{
width: 100%;
max-width: 940px;
margin:0 auto;
}
#contents_b2b #all_tools figure{
float:right;
width: clamp(200px, 34vw, 400px);
margin-bottom:30px;
}
#contents_b2b #all_tools h3,
#contents_b2b #all_tools p.text{
	text-align:left;
	width: clamp(200px, 44vw, 610px);
}
#contents_b2b #all_tools ul{
width:100%;
clear: both;
display: flex;
margin: 0 auto;
gap:  2%;
justify-content: center;
flex-wrap: wrap;
}
#contents_b2b #all_tools li{
width: clamp(260px, 30vw, 320px);
border: 1px solid var(--blue);
padding: clamp(10px, 1.6vw, 15px);
border-radius: 10px;
margin-bottom: 30px;
}
#contents_b2b #all_tools li img{
width:30%;
float:left;
}
#contents_b2b #all_tools h4{
	color: var(--blue);
	font-size: clamp(16px,1.6vw,20px);
	margin:0 0 5px 36%;
	text-align:left;
}
#contents_b2b #all_tools li p{
	font-size: clamp(12px,1.4vw,15px);
	margin:0 0 0 36%;
	text-align:left;
	font-weight:bold;
	padding-bottom:0;
}

/*-----------　b2b-promotion　アドパブがやってます ----------*/
#contents_b2b #by_adpub {
width:100%;
max-width:1200px;
margin:100px auto  clamp(20px,6vw,60px);
padding:60px  0 0;
border-radius: clamp(10px, 1.5vw, 20px);
background-color: var(--white);
clear: both;
}
#contents_b2b #by_adpub figure{
    width: clamp(120px, 14vw, 160px);
	margin:-120px auto 10px;
}
#contents_b2b #by_adpub p.text{
width:90%;
margin : 0 auto clamp(20px,3vw,30px);	
}

#contents_b2b #adpub_spec{
	width:100%;
	background-image: url("../images/btob_bg_office.jpg");
	background-size: cover;
	padding: clamp(20px, 3vw, 60px) clamp(10px, 3vw, 60px) 20px;
	border-radius: 0 0 clamp(10px, 1.5vw, 20px)  clamp(10px, 1.5vw, 20px);
}
#contents_b2b #adpub_spec ul{
	display:flex;
	justify-content: space-around;
	gap:clamp(10px,2vw,30px);
	padding-bottom:clamp(10px,2vw,30px);
}
#contents_b2b #adpub_spec li{
	width: clamp(260px,30vw,340px);
	background-color: #fff;
	padding: clamp(10px,2vw,30px);
}
#contents_b2b #adpub_spec li h4{
font-size: clamp(16px,1.8vw,20px);
}
#contents_b2b #adpub_spec li h4 span{
	background-color: var(--yellow);
}
#contents_b2b #adpub_spec li h4 span strong{
	font-size:30px;
}
#contents_b2b #adpub_spec li p{
	text-align: left;;
	padding-bottom:0;
}
#contents_b2b #adpub_spec p.btn{
	padding-bottom: 3vw;
}

/*-----------　b2b-promotion　アドパブと他社の違い ----------*/
#contents_b2b #difference {
width:100%;
max-width:1200px;
padding-top: clamp(60px,9vw,120px);
border-radius: clamp(10px, 1.5vw, 20px);
background-color: var(--white);
clear: both;
background-image: url(../images/btob_bg_stressless.png);
background-size: contain;
background-repeat: no-repeat;
margin:0 auto;
}
#contents_b2b #difference p.text{
width: 90%;
margin: 0 auto clamp(20px, 3vw, 30px);
}
#contents_b2b #difference div#adpub_merit,
#contents_b2b #difference div#other_company{
clear: both;
width: clamp(260px,90vw,900px);
margin:0 auto ;
}
#contents_b2b #difference div#adpub_merit{
padding-bottom: clamp(20px, 60vw, 100px);
}
#contents_b2b #difference div#other_company{
padding-bottom: clamp(10px, 2vw, 30px);
}
#contents_b2b #difference figure{
float:left;
width: clamp(260px, 38vw, 400px);
margin: 0 10px;
}
#contents_b2b #difference div dl{
width: clamp(320px, 43vw,500px);
border: 1px solid #68A2FF;
border-radius: 10px;
padding: clamp(10px,1.5vw,30px);
font-weight:bold;
color: var(--blue);
text-align:left;
font-size: clamp(14px, 1.6vw, 18px);
margin:20px 0 20px clamp(260px,43vw,440px);
}
#contents_b2b #difference div dl#others_demerit{
border: 1px solid #666;
color: #333;
}
#contents_b2b #difference dt,
#contents_b2b #difference dd{
margin-bottom:10px;
text-indent: -1em;
padding-left: 1em;
}
#contents_b2b #difference figure.weppa {
text-align: right;
width: clamp(300px, 60vw, 710px);
position: relative;
}
#contents_b2b #difference figure.weppa img {
position: absolute;
top:-70px;
width: clamp(180px,18vw,200px);
}
/*-----------　b2b-promotion　エンディング ----------*/
#contents_b2b #ending {
margin:0 auto 6vw;
}
#contents_b2b #ending ul {
width:90%;
display: flex;
justify-content: center;
margin:0 auto;
}
#contents_b2b #ending li{
width: clamp(300px, 38vw,380px);
margin: 0 20px;
}



/*------------------------------------------------------
　b2b-promotion　　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {

/*-----------　b2b-promotion　オンラインとオフライン ----------*/
#contents_b2b #online_offline p.text{
text-align:left;
}
/*-----------　b2b-promotion　総合的なツール展開 ----------*/
#contents_b2b #all_tools figure{
float: none;
width: 90%;
margin: 0 auto 30px;
max-width: 340px;
}
#contents_b2b #all_tools h3{
	text-align:center;
}
#contents_b2b #all_tools h3,
#contents_b2b #all_tools p.text{
	width: 100%;
}
/*-----------　b2b-promotion　アドパブがやってます ----------*/
#contents_b2b #by_adpub p.text{
text-align:left;
}
/*-----------　b2b-promotion　アドパブと他社の違い ----------*/
#contents_b2b #difference p.text{
text-align: left;
}
#contents_b2b #difference figure{
float:none;
width: clamp(260px,52vw,420px);
margin: 0 auto 20px ;
}

#contents_b2b #difference div dl{
margin-left: clamp(260px,53vw,440px);
width: clamp(360px, 50vw, 500px);
}
#contents_b2b #difference div dl{
margin: 0 auto 20px;
}
#contents_b2b #difference figure.weppa img{
position: absolute;
top: -30px;
width: clamp(160px, 18vw, 200px);
right: 40px;
}

}

/*----------------------------------------------------
　b2b-promotion　　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　b2b-promotion　　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/


/*-----------　b2b-promotion　オンラインとオフライン ----------*/
#contents_b2b #online_offline {
	margin:0 20px 
}
#contents_b2b #online_offline figure{
	width: clamp(300px, 60vw, 600px);
}
#contents_b2b #online_offline dl{
margin-bottom: clamp(40px,8vw,80px);
}
#contents_b2b #online_offline dd{
float:none;
width:85%;
max-width:340px;
margin:0 auto  clamp(10px,2vw,30px);
}

/*-----------　b2b-promotion　アドパブがやってます ----------*/
#contents_b2b #adpub_spec ul{
	display:block;
}
#contents_b2b #adpub_spec ul li{
margin: 0 auto 20px;
width: clamp(260px, 80vw, 400px);
}
/*-----------　b2b-promotion　アドパブと他社の違い ----------*/
#contents_b2b #difference h3{
    font-size: clamp(16px, 2.2vw, 26px);
    line-height: 0.5;
}
#contents_b2b #difference div dl{
width: 80%;
}
/*-----------　b2b-promotion　エンディング ----------*/
#contents_b2b #ending ul {
display: block;
margin:0 auto 6vw;
}
#contents_b2b #ending li{
margin: 0 auto 20px;
}

}

/*------------------------------------------------------
　b2b-promotion　　スマホ　640以下　ここまで
------------------------------------------------------*/











/*-------------------------------------------------------------------------------------
　service　サービス　#contents_service
-------------------------------------------------------------------------------------*/

/*----------------------　service ラインアップ------------------*/
#contents_service #lineup p.text{
padding: 0 20px clamp(20px, 6vw, 60px);
}
#contents_service #lineup ul{
width:90%;
max-width:1000px;
display: flex;
flex-wrap:wrap;
justify-content: center;
margin:0 auto 30px;
gap:20px;
}
#contents_service #lineup ul li{
width: clamp(200px,21vw,220px);
}
#contents_service #lineup ul li h3{
font-size: clamp(16px,1.8vw,18px);
margin-bottom:10px;
}
#contents_service #lineup ul li h3 img{
margin-bottom:10px;
}
#contents_service #lineup ul li p{
text-align:left;
font-size: clamp(14px,1.4vw,16px);
margin-bottom:10px;
}
#contents_service #lineup .btn{
margin:0 auto clamp(60px,12vw,120px);
}
/*----------------------　service ツールを選定　------------------*/
#contents_service #tools {
width:100%;
max-width: 1000px;
margin: 0 auto;
}
#contents_service #tools div.scroll{
width: 96%;
overflow-y: hidden;
margin: 0 auto clamp(20px, 3vw, 60px);
}
#contents_service #tools table{
width: 100%;
min-width: 360px;
margin: 20px 0;
}
#contents_service #tools table img{
    width:50%;
    margin:0 auto;
}

#contents_service #tools table tr{
border-bottom:1px solid #ccc;
}
#contents_service #tools table th,
#contents_service #tools table td{
    padding:15px 0;
    border-right:3px solid #fff;
    text-align:center;
    vertical-align: middle;
    font-size: clamp(12px,1.6vw,16px);
}
#contents_service #tools table td strong{
    font-size: clamp(16px,1.8vw,18px);
}
#contents_service #tools table tr.unyou td{
font-size: clamp(12px,1.4vw,14px);
}
#contents_service #tools table td:nth-of-type(even) {
background-color: #F5F5F5;
}
#contents_service #tools table td:nth-of-type(odd) {
background-color: var(--bg_blue);
}
#contents_service #tools table tr{
    background-color: #f5f5f5;
}
#contents_service #tools table tr.vertical th:nth-of-type(even){
    background-color: var(--bg_blue);
}
#contents_service #tools table tr.vertical th:nth-of-type(1) {
background-color: #fff;
}
#contents_service #tools table th em{
font-size:11px;
font-style:normal; 
}
/*----------------------　service こんなニーズも柔軟にお応えします　------------------*/
#contents_service #needs {
width:100%;
max-width: 1100px;
margin: 0 auto;
}
#contents_service #needs ul{
width:90%;
max-width:1100px;
display: flex;
flex-wrap:wrap;
justify-content: center;
gap:45px;
margin: 0 auto clamp(60px, 12vw, 120px);
}
#contents_service #needs li{
margin-bottom: 20px;
position: relative;
}
#contents_service #needs .needs_h3{
display: flex;
align-items: center;
}
#contents_service #needs .needs_h3 img{
height: 100px;
}
#contents_service #needs h3{
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 16px;
font-weight: bold;
text-align: left;
margin-bottom: 0px;
margin-left: 15px;
}
#contents_service #needs .needs_box{
justify-content: space-between;
width: 300px;
padding: 20px 10px 20px 20px;
border-radius: 5px;
border: var(--light_blue) 1px solid;
}
#contents_service #needs p{
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
font-size: 15px;
text-align: left;
padding-bottom: 0px;
letter-spacing: 0.05em;
}
#contents_service #needs .answer{
height: 75px;
position: absolute;
top: 180px;
right: 20px;
}
#contents_service #needs .btn {
margin: 0 auto clamp(60px, 12vw, 120px);
}






/*------------------------------------------------------
　service　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {
#contents_service #lineup p.text{
text-align: left;
}
}

/*----------------------------------------------------
　service　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　service　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
#contents_service #tools table th,
#contents_service #tools table td{
    padding:10px 5px;
}
}

/*------------------------------------------------------
　service　スマホ　640以下　ここまで
------------------------------------------------------*/









/*-------------------------------------------------------------------------------------
　works　制作実績　#contents_works
-------------------------------------------------------------------------------------*/


/*-------------カテゴリーメニュー-------------*/
ul#works_category{
width:96%;
display: flex;
justify-content: center;
margin: 0 auto clamp(20px,3vw,60px);
flex-wrap:wrap;
}
ul#works_category li{
margin:0 10px 15px;
border:1px solid var(--blue);
border-radius: 5px;
font-size:14px;
background-color: #fff;
}
ul#works_category li a{
display: block;
padding: 2px 10px;
color: var(--blue);
}
ul#works_category li a:hover{
color: #fff;
font-weight:bold;
background-color: var(--blue);
}

/*-------------制作実績リスト-------------*/

#contents_works ul#works_list {
width:96%;
max-width:1420px;
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: clamp(60px,9vw,90px);
}
#contents_works ul#works_list li{
width:300px;
margin:0 26px 3vw;
}
#contents_works ul#works_list li p.url{
width:12px;
float:right;
margin-top: -8px;
}
#contents_works ul#works_list li p.thumnail{
background-color:#ccc;
display:inline-block;
padding-bottom:0;
margin-bottom: clamp(10px, 2vw, 20px);
}
#contents_works ul#works_list li p.thumnail a img{
opacity: 0.9;
display:block;
}
#contents_works ul#works_list li p.thumnail a img:hover{
opacity: 1;}

#contents_works ul#works_list li .title a{
color: #333;
}
#contents_works ul#works_list li .title a:hover{
	color:var(--light_blue);
}
#contents_works ul#works_list li h2{
width:100%;
font-size:16px;
margin-bottom:10px;
text-align: left;
}
#contents_works ul#works_list li p.client{
font-size:14px;
text-align: left;
letter-spacing: 0px;
}
/*-------------　WPのぺーじゃー（不使用）　-------------*/
#contents_works .wp-pagenavi{
margin-bottom: clamp(60px,9vw,90px);
font-size: clamp(14px,1.6vw,18px);
}
#contents_works .wp-pagenavi img{
width:34px;
}
#contents_works .wp-pagenavi a.page{
display: inline-block;
text-align: center;
border:1px solid var(--blue);
color: #666;
border-radius: 30px;
padding:3px 10px;
margin:0 10px;
font-weight:700;
}
#contents_works .wp-pagenavi span.current{
display: inline-block;
text-align: center;
background-color:  var(--blue);
color: #fff;
font-weight:bold;
border-radius: 30px;
padding:5px 12px;
margin:0 20px;
}
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink{
border:none !important;
}

.wp-pagenavi a:hover, 
.wp-pagenavi span.current{
border:none;
}
/*-------------　pagination　-------------*/

#contents_works div.nav-links {
margin-bottom: clamp(60px,9vw,90px);
font-size: clamp(14px,1.6vw,18px);
}
#contents_works div.nav-links a.page-numbers{
border: 1px solid var(--blue);
color: #666;
border-radius: 30px;
padding: 7px 10px;
margin: 10px;
font-weight: 700;
}
#contents_works div.nav-links a.prev,
#contents_works div.nav-links a.next{
border:none !important;
}
#contents_works div.nav-links span{
background-color:  var(--blue);
color: #fff;
font-weight:bold;
border-radius: 30px;
padding: 7px 10px;
margin: 10px;
font-weight: 700;
}


/*-------------　works 詳細ページ　-------------*/
#contents_works_detail{
background-color: var(--bg_blue);
background-image: url(../images/story_bg.png);
background-repeat: no-repeat;
background-size: 150%;
padding-bottom: clamp(30px,6vw,60px);
margin-bottom: clamp(60px,9vw,90px);
}
#contents_works_detail #works_detail{
width:90%;
max-width:750px;
margin:0 auto;
}
#contents_works_detail #works_detail p{
text-align: left;
}
#contents_works_detail #works_detail h2{
width:100%;
text-align: left;
padding:10px 0;
margin:0 0  clamp(20px, 3vw, 30px);
border-bottom: 1px solid #666;
}
#contents_works_detail #works_detail p.each_category{
float:right;
border:1px solid var(--light_blue);
border-radius: 5px;
padding:2px 5px;
font-size:14px;
}
#contents_works_detail #works_detail .btn_mini{
float:right;
}
#contents_works_detail #works_detail em{
font-weight:bold;
}
#contents_works_detail .works_entry{
text-align: left;
padding-bottom: clamp(10px,3vw,30px);
}
#contents_works_detail .works_entry img{
margin-bottom: clamp(20px, 3vw, 30px);
}



/*------------------------------------------------------
　works　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {

/*-------------　ぺーじゃー　-------------*/
#contents_works .wp-pagenavi a.page{
display: none;
}
}

/*----------------------------------------------------
　works　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　works　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
}

/*------------------------------------------------------
　works　スマホ　640以下　ここまで
------------------------------------------------------*/




















/*-------------------------------------------------------------------------------------
　story　制作ストーリー　#contents_story
-------------------------------------------------------------------------------------*/

#contents_story div#story_list #story div#slick-slide{
display: flex;
margin:0 auto;
flex-wrap: wrap;
}
#contents_story #story div#slick-slide div.slider_each{/******一覧ページ***********/
width:48%;
margin:0 1% 30px;
}
#contents_story  div.inner{
width:100%;
counter-reset: titlenum; /*h3のナンバリングに必要*/
margin:0 auto clamp(30px,6vw,60px);
background-color: var(--bg_gray);
background-image: url(../images/story_bg.png) ;
background-repeat: no-repeat;
background-size:150%;
}

#contents_story #story_data {
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

#contents_story #story_data h1{
font-size: clamp(14px,2.4vw,26px);
color: var(--blue);
padding-bottom: clamp(20px,6vw,60px);
width:94%;
}
#contents_story #story_data h1 span{
font-size: clamp(10px,1.2vw,14px);
font-weight:normal;
color: #333;
margin:0 auto;
text-align:center;
}

#contents_story #story_data p.story_client{
display:inline-block;
float:right;
width:auto;
background-color: #999;
color:#fff;
padding:2px 5px;
margin:0 2vw 2vw 0;
font-size:14px;
}
#contents_story #story_data figure.story_mv{
clear: both;
width: clamp(340px,72vw,720px);
margin: 0 auto 3vw;
box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
#contents_story #story_data dl{
width: clamp(300px,40vw,400px);
margin:0 auto 3vw;
display: flex;
flex-wrap: wrap;
font-size:14px;
text-align:left;
border-top:1px solid #ccc;
}
#contents_story #story_data dt{
width:30%;
border-bottom:1px solid #ccc;
padding:5px 10px;
position:relative;
font-weight:normal;
}
#contents_story #story_data dt::before{
    content: "";
    width: 2px;
    height:14px;
    background-color: var(--blue);
    position: absolute;
    top:10px;
    left: 2px;
}
#contents_story #story_data dd{
width:70%;
border-bottom:1px solid #ccc;
padding:5px 10px;
background-color: #fff;
}

/*------------------------- 投稿記事 -----------------------*/
#contents_story #story_content .inner_box{
width: 80%;
max-width:900px;
padding: clamp( 10px,6vw,60px);
}
#contents_story #story_content h3{
clear: both;
text-align:left;
font-size: clamp(16px,1.8vw,20px);
margin-bottom: clamp(10px,3vw,30px);
}
#contents_story #story_content h3::before{
counter-increment: titlenum; /* counter-resetと同じ文字列 */
content: "0" counter(titlenum); /* 番号をつける */
margin-right: 20px;
display: inline-block;
color: var(--blue);
font-size:28px;
border-bottom:2px solid  var(--blue);
}
#contents_story #story_content {
text-align:left;
margin-bottom: clamp(20px,6vw,60px);
}
#contents_story #story_content h4{
clear: both;
font-size: clamp(18px,2.4vw,26px);
}
#contents_story #story_content img{
    clear: both;
}
#contents_story #story_content .copy{
clear: both;
text-align: center;
font-size: clamp(18px,2.6vw,26px);
color: var(--blue);
font-weight:bold;
padding-top: clamp(30px,6vw,60px);
}
#contents_story #story_content .arrow:after{
content: url(../images/common_arrow_bottom.svg);
text-align: center;
display: block;
margin:20px;
}
#contents_story #story_content a{
text-decoration: none;
color: var(--blue);
}
#contents_story #story_content a:hover{
color: var(--pink);
}
#contents_story #story_content dl.staff_voice {
    display: flex;
    width: clamp(340px,60vw,600px);
    margin:0 auto;
    position: relative;
}
#contents_story #story_content dl.staff_voice dt{
width:15%;
height:auto;
margin-right:5%;
}
#contents_story #story_content dl.staff_voice dd{
width:80%;
background-color: var(--bg_gray);
border-radius: 10px;
padding:20px;
font-weight:bold;
height: fit-content;
}
/**#contents_story #story_content dl.staff_voice dd:before{
content:url("../images/story_fukidashi.svg");
position: absolute;
top: 30px;
left: 100px;
}**/


/*------------------------------------------------------
　story　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {
#contents_story .wp-block-image .alignleft,
#contents_story .wp-block-image .alignright{
    float: none;
    text-align: center;
    margin:0 auto 30px;
}
}

/*----------------------------------------------------
　story　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　story　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/

#contents_story h2{
text-align: left;
}
#contents_story div#story_list #story  div.slider_each{/******一覧ページ***********/
width:100%;
margin:0 auto 60px;
}
}

/*------------------------------------------------------
　story　スマホ　640以下　ここまで
------------------------------------------------------*/









/*-------------------------------------------------------------------------------------
　creation-step ステップ  #contents_step
-------------------------------------------------------------------------------------*/

#contents_step #intoro{
width:90%;
margin:0 auto 3vw;
}
#contents_step #steps{
    width: 100%;
    background-image: url(../images/step_bg.svg);
    padding: clamp(30px,6vw,60px) 0 clamp(0px,3vw,30px);
    margin: clamp(10px,6vw,90px) 0;
}
#contents_step #steps h2{
margin: 0 auto 60px;
}
#contents_step #steps section.step{
width:90%;
max-width: 800px;
padding: 20px;
border: 2px solid #68A2FF;
border-radius: 10px;
margin:0 auto 3vw;
background-color: #fff;
position: relative;
}
#contents_step #steps section.step h3{
text-align: left;
padding:0;
font-size: clamp(20px, 2.2vw, 24px);
}
#contents_step #steps section.step p.number{
width:clamp(100px,11vw,120px);
margin-top:-60px;
margin-right: 20px;
float:left;
padding:10px;
}
#contents_step #steps section.step p.text{
width: 85%;
text-align: left;
padding:0;
}
#contents_step #steps section#step_03 p.text{
width: 100%;
margin-bottom:20px;
}
#contents_step #steps section.step figure.staff{
position:absolute;
top:20px;
right:20px;
text-align: center;
}
#contents_step #steps section.step figure.staff img{
height:90px;
}
#contents_step #steps section.step p.note{
    display: block;
    font-size:12px;
	letter-spacing: 1px;
    color:#666;
    text-align:left;
    padding:5px 0 0;
}
/*-------------　step03　４分割　-------------*/
#contents_step #steps section#step_03 ul{
display: flex;
flex-wrap: wrap;
text-align: left;
gap:2%;
}
#contents_step #steps section#step_03 li{
width:49%;
background-color: var(--bg_gray);
border-radius: 5px;
position: relative;
margin-bottom: 2%;
padding:15px 20px;
}
#contents_step #steps section#step_03 li figure{
width: clamp(80px,9vw,90px);
position:absolute;
top:20px;
right:10px;
text-align: center;
}
#contents_step #steps section#step_03 li figure img{
height:90px;
}
#contents_step #steps section#step_03 li h4{
    font-size: clamp(16px,1.8vw,18px);
    color: var(--blue);
    margin-bottom:10px;
}
#contents_step #steps section#step_03 li p{
    width:70%;
    padding-bottom:0;
}

/*-------------　step04　２分割　-------------*/
#contents_step #steps section#step_04 {
display: flex;
}
#contents_step #steps section#step_04 div#step_design{
width: 60%;
position: relative;
border-right: 1px solid  var(--blue);
margin-right: 10px;
}
#contents_step #steps section#step_04 div#step_movie{
width:40%;
position:relative;
}

#contents_step #steps section#step_04 p.text {
width:70%;
}
#contents_step #steps section#step_04  figure.staff{
width:30%;
position:absolute;
top:50px;
right:0;
text-align: center;
}

/*-------------　step06　チームアイコン　-------------*/
#contents_step #steps section#step_06  p.text{
    width:60%;
}
#contents_step #steps section#step_06 figure.staff{
width: clamp(200px,25vw,260px);
position:absolute;
top:20px;
right:20px;
}


/*-------------　エンディングコピー　-------------*/
#contents_step .ending_copy{
    margin-top: clamp(60px,9vw,90px);
}

/*------------------------------------------------------
　creation-step ステップ　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {

#contents_step #intoro p.text{
text-align:left;
}

}

/*----------------------------------------------------
　creation-step ステップ　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　creation-step ステップ　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
#contents_step #steps section.step p.number{
float:none;
}
#contents_step #steps section.step figure.staff{
top:10px;
right:10px;
}
#contents_step #steps section.step figure.staff img{
height:70px;
}
#contents_step #steps section.step p.text{
width: 100%;
}

/*-------------　step03　４分割　-------------*/
#contents_step #steps section#step_03 li{
width: 100%;
margin-bottom: 3vw;
}
#contents_step #steps section#step_03 li p{
    width: 75%;
}
#contents_step #steps section#step_03 li figure img {
    height: 70px;
}

/*-------------　step04　２分割　-------------*/
#contents_step #steps section#step_04{
display: block;
}
#contents_step #steps section#step_04 #step_design figure.staff{
top: 100px;
}
#contents_step #steps section#step_04 figure.staff{
width:20%;
top:0;
}
#contents_step #steps section#step_04 div#step_design,
#contents_step #steps section#step_04 div#step_movie{
width:100%;
}
#contents_step #steps section#step_04 div#step_design{
border-right: none;
border-bottom:1px solid var(--blue);
margin-bottom:3vw;
}
#contents_step #steps section#step_04 p.text{
width:80%;
margin-bottom:3vw;
}
/*-------------　step06　チームアイコン　-------------*/
#contents_step #steps section#step_06  p.text{
    width:100%;
}
#contents_step #steps section#step_06 figure.staff {
    top: 10px;
    right: 0px;
}
}

/*------------------------------------------------------
　creation-step ステップ　スマホ　640以下　ここまで
------------------------------------------------------*/





/*-------------------------------------------------------------------------------------
　plan & price　プランと料金　#contents_plan_price
-------------------------------------------------------------------------------------*/
#contents_plan_price {
width:90%;
margin:0 auto 30px;
}
#contents_plan_price p.text{
margin:0 auto 30px;
}
#contents_plan_price p.text span{
display: block;
padding-top:20px;
font-size: clamp(12px,1.3vw,14px);
}

#contents_plan_price p.scroll_icon{
display: none;/*980px幅以上では見えない*/
width:100%;
text-align: right;
margin-top: -20px;
padding-right:20px;
}
@media screen and (max-width: 900px) {
#contents_plan_price p.scroll_icon{display: block;}
}

#contents_plan_price p.scroll_icon img{
width:60px;
}
#contents_plan_price .scroll_x{
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
/*-webkit-overflow-scrolling: touch;*/
}
#contents_plan_price #plan_price{
width: 980px;
margin:0 auto 30px;
display: flex;
gap:30px;
padding:0 20px;
}
#contents_plan_price #plan_price div#single,
#contents_plan_price #plan_price div#basic,
#contents_plan_price #plan_price div#business{
width:33%;
border:1px solid #ccc;
border-radius: 5px 5px 0 0;
margin-bottom:30px;
align-self: flex-start;
}
#contents_plan_price #plan_price div h2{
width: 100%;
font-size: clamp(16px, 1.8vw, 18px);
line-height: 1.0;
letter-spacing: 1px;
font-weight: 750;
text-align: center;
margin: -10px auto clamp(5px, 1vw, 20px);
color: #fff;
border-radius: 5px 5px 0 0;
padding:0 0 15px;
}
#contents_plan_price #plan_price div h2 span{
color: #fff;
font-weight: 100;
font-size: 15px;
border-top: none;
width: 100%;
padding-top:20px;
}
#contents_plan_price #plan_price div#single h2{background-color: #3D85E3;}
#contents_plan_price #plan_price div#basic   h2{  background-color: #1450C8;}
#contents_plan_price #plan_price div#business h2{background-color: #184194;}

#contents_plan_price #plan_price dt {
padding-bottom:10px;
font-size: clamp(14px,1.6vw,16px);
color: var(--blue);
}
#contents_plan_price dd{
padding-bottom:15px;
font-size: clamp(14px);
font-weight: bold;
}
#contents_plan_price #plan_price .price {
padding: 15px 20px 0;
background-color: var(--bg_blue);
color: var(--blue);
font-weight:bold;
margin:0 20px 10px;
}
#contents_plan_price #plan_price .price dd{
    font-size:13px;
}
#contents_plan_price #plan_price .price span{ 
    font-size:32px;
    margin: 0 5px;
}
#contents_plan_price #plan_price dt.kikan{
border-top:1px solid #ccc;
padding-top:10px;
margin:0 20px;
}



/*-------------------------　アコーディオン　--------------------------*/

.box {    display: none;/*はじめは非表示*/}

.accordion-area{
    list-style: none;
    width: 100%;
    margin:0 auto;
    padding: 0 20px;
}
#contents_plan_price #plan_price .accordion-area p.text{
white-space: normal;
text-align: left;
font-size:14px;
color: var(--blue);
padding-bottom:0px;
margin-bottom:20px;
}
#contents_plan_price .accordion-area dl.box dd{
    font-weight:normal;
}
#contents_plan_price h3.title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:1rem;
font-weight: normal;
transition: all .5s ease;
color: #fff;
border-radius: 5px;
padding:10px;
}
#contents_plan_price #plan_price div#single h3.title {background-color: #3D85E3;}
#contents_plan_price #plan_price div#basic   h3.title {  background-color: #1450C8;}
#contents_plan_price #plan_price div#business h3.title {background-color: #184194;}
#contents_plan_price .title::before,
#contents_plan_price .title::after{
    position: absolute;
    content:'';/*アイコンの＋と×*/
    width: 15px;
    height: 2px;
    background-color: #fff;
}
#contents_plan_price .title::before{
    top:48%;
    right: 15px;
    transform: rotate(0deg);
}
#contents_plan_price .title::after{    
    top:48%;
    right: 15px;
    transform: rotate(90deg);
}
#contents_plan_price .title.close::before{
	transform: rotate(45deg);/*　closeというクラスがついたら形状変化　*/
}
#contents_plan_price .title.close::after{
	transform: rotate(-45deg);
}

/*-------------------------　スタジオでの制作も対応　--------------------------*/
#contents_plan_price .studio_copy{
width:100%;
max-width:1000px;
margin:  clamp(30px,6vw,90px) auto;
position: relative;
}
#contents_plan_price .studio_copy img{
position: absolute;
top:0;
right:0;
}

/*-------------------------　通常コーディングとの違い　--------------------------*/
#contents_plan_price #difference h3{
max-width:1000px;
align-items: center; 
display: flex;
margin:0 auto 30px;
}
#contents_plan_price #difference h3::before,
#contents_plan_price #difference h3::after{
background-color: var(--blue); 
border-radius: 5px;
content: "";
flex-grow: 1; 
height: 2px; 
}
#contents_plan_price #difference h3::before {
margin-right: 10px; 
}
#contents_plan_price #difference h3::after {
margin-left: 10px;
}
#contents_plan_price #difference ul{
width:100%;
max-width:1000px;
display: flex;
margin: 0 auto 60px;
justify-content: space-between;
gap:2%;
}
#contents_plan_price #difference li{
width:49%;
border-radius: 10px;
padding:30px;
}
#contents_plan_price #difference dd strong{
background-color: var(--yellow);
}
#contents_plan_price #difference ul li#html_cording{
background-color: var(--bg_blue);
}
#contents_plan_price #difference ul li#studio_cording{
background-color: var(--bg_gray);
}
#contents_plan_price #difference h4 span{
font-size: clamp(14px,1.5vw,16px);
font-weight:normal;
}
#contents_plan_price #difference dl{
background-color: #fff;
padding:10px 20px;
border-radius: 10px;
margin-bottom:20px;
text-align: left;
}
#contents_plan_price #difference dt{
padding:10px 0;
border-bottom:1px solid #ccc;
margin-bottom:10px;
text-align: center;
font-size: 18px;
}
#contents_plan_price #difference dd{
text-indent: -1em;
padding-left: 1em;
}
#contents_plan_price #difference p{
text-align: left;
padding-bottom: 0;
}
#contents_plan_price #difference p strong{
color: var(--blue);
}


/*-------------------------　Studioで制作★とは　--------------------------*/
#contents_plan_price p.price_btn{
width:100%;
margin:30px auto;
font-size:14px;
}
#contents_plan_price p.price_btn strong{
    color: var(--blue);
}
#contents_plan_price p.price_btn a{/******ボタン*/
    display: block;
    margin: 10px auto;
    background-color: #2478E5;
    padding: 5px 30px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30px;
    position: relative;
    width: fit-content;
}
#contents_plan_price p.price_btn a::after{
content: " ▶︎";
font-size: clamp(8px, 10vw, 10px);
position: absolute;
right:10px;
top:9px;
}

/*-------------------------　SEO、アクセス解析　--------------------------*/
#contents_plan_price #seo_analitics{
width:100%;
max-width:960px;
border:5px solid var(--bg_blue);
margin:0 auto clamp(60px, 7.5vw, 90px);
padding:30px 45px;
text-align: left;
}
#contents_plan_price #seo_analitics figure{
float:right;
margin: 0 0 10px 10px;
}
#contents_plan_price #seo_analitics h4{
font-size: 18px;
color: var(--blue);
}
#contents_plan_price #seo_analitics p{
padding-bottom:0;
}

/*-------------------------　ランニングコスト　--------------------------*/
#contents_plan_price #costs ul{
width:100%;
max-width: 960px;
display: flex;
text-align: left;
flex-wrap: wrap;
gap:4%;
margin:0 auto clamp(30px, 6vw, 60px);
}
#contents_plan_price #costs ul h5{
font-size: 16px;
margin:20px 0 0;
}
#contents_plan_price #costs ul p{
font-size: 15px;
padding:10px 0;
}
#contents_plan_price #costs ul li.cost_01,
#contents_plan_price #costs ul li.cost_02{
width:48%;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom:20px;
}
#contents_plan_price #costs ul li.cost_03{
flex: none;
width:100%;
text-indent: -1.5em;
padding-left: 1.5em;
}
#contents_plan_price #costs ul li.cost_03 p{
padding:0;
}

/*-------------------------　スタジオプラン紹介　--------------------------*/
#studio_plan_link{
margin-top: clamp(60px,9vw,120px);
}

#studio_plan_link #studio_plan{
float: none;
display: block;
clear: both;
}

#studio_plan_link #studio_plan figure#bom img{
float: right;
margin-top:-90px;
width: clamp(120px, 20vw, 200px);
}
#studio_plan_link #studio_plan h2 {
text-align: left;
padding:0;
margin:0 0 clamp(20px,6vw,60px);
font-size: clamp(24px, 2.8vw, 30px);
}
#studio_plan_link #studio_plan h2 span{
display: block;
font-size: clamp(14px, 1.6vw, 16px);
color: var(--blue);
margin: 0 0 20px;
padding-top: 0;
border-top:none;
text-align: left;
}
#studio_plan_link #studio_plan h2 strong{
color: var(--blue);
}
#studio_plan_link #studio_plan p.text{
width:80%;
text-align: left;
margin:0 0 30px 0;
float:right;
}
#studio_plan_link #studio_plan p.clear{
text-align:left;
margin-bottom:clamp(30px, 6vw, 60px);
text-indent: -1em;
padding-left: 1em;
}
#studio_plan_link #studio_plan figure#studio_mark{
width:15%;
float:left;
}
#studio_plan_link #studio_plan h3{
clear: both;
margin-bottom: clamp(20px,3vw,30px);
}
#studio_plan_link #studio_plan ul#studio_merit{
max-width: 750px;
display: flex;
flex-wrap: wrap;
margin:0 auto clamp(20px,6vw,60px);
gap:4%;
}
#studio_plan_link #studio_plan ul#studio_merit li{
width:48%;
padding:20px 0;
margin:0 0 20px;
border:1px solid var(--blue);
border-radius: 5px;
font-size: clamp(14px,1.8vw,20px);
font-weight:bold;
}
#studio_plan_link #studio_plan ul#studio_merit li:first-child{
padding:25px 10px 20px;
}
#studio_plan_link #studio_plan ul#studio_merit li span{
color: var(--blue);
}
#studio_plan_link #studio_plan ul#studio_merit li strong{
font-size: clamp(24px,2.8vw,20px);
}
#studio_plan_link #studio_plan ul#slick-slide {
margin-bottom: clamp(20px,9vw,90px);
}
#studio_plan_link #studio_plan ul#slick-slide li{
margin:0 10px 10px;
}
#contents_plan_price .studio_copy,
#studio_plan_link .studio_copy{
font-size: clamp(18px,2.4vw,24px);
font-weight:bold;
}
#contents_plan_price .studio_copy strong{
color: var(--blue);
}
#studio_plan_link #studio_bnr{
width: clamp(260px, 52vw,520px);
margin:0 auto 30px;
}


/*------------------------------------------------------
　plan & price　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {
#contents_plan_price p.text{
text-align: left;
}
#contents_plan_price .scroll_x{
overflow:visible;
}
#contents_plan_price #difference ul{
display: block;
width:100%;
margin: 0 auto;
}
#contents_plan_price #difference li{
width:100%;
margin-bottom:20px;
}
#contents_plan_price #studio_plan figure#bom img{
margin-top:-30px;
}
}

/*----------------------------------------------------
　plan & price　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　plan & price　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
#contents_plan_price .scroll_x{
overflow:visible;
}
#contents_plan_price p.scroll_icon{display: none;}
#contents_plan_price #plan_price{
width: 100%;
min-width:320px;
margin:0 auto clamp(30px,6vw,60px);
display: block;
padding:0 20px;
}
#contents_plan_price #plan_price div#single,
#contents_plan_price #plan_price div#basic,
#contents_plan_price #plan_price div#business{
width: 90%;
margin: 0 auto 30px;
}
#contents_plan_price p.price_btn{
text-align: left;
}
#contents_plan_price #seo_analitics{
padding:0 15px 15px;
}
#contents_plan_price #seo_analitics figure{
float:none;
margin: 0 auto 10px;
text-align: center;
}

#contents_plan_price #costs h4{
text-align: left;
}
#contents_plan_price #costs ul{
display: block;
}
#contents_plan_price #costs ul h5{
font-size: 16px;
margin:20px 0 0;
}
#contents_plan_price #costs ul p{
font-size: 15px;
padding:10px 0;
}
#contents_plan_price #costs ul li.cost_01,
#contents_plan_price #costs ul li.cost_02{
width:100%;
}
#contents_plan_price #costs ul li.cost_01{
border-bottom: none;
margin-bottom: 0;
}
#contents_plan_price .studio_copy{
text-align: left;
}
#studio_plan_link #studio_plan figure#bom img{
margin-top:0px;
}

}

/*------------------------------------------------------
　plan & price　スマホ　640以下　ここまで
------------------------------------------------------*/





/*-------------------------------------------------------------------------------------
　Privacy Policy　プライバシーポリシー　
-------------------------------------------------------------------------------------*/


#contents_privacypolicy {
width:90%;
max-width: 800px;
padding: 20px;
text-align: left;
margin:0 auto 90px;
}

#contents_privacypolicy dt::before {
    content: "-" !important;
    font-weight: normal;
    font-size: 26px;
    height: 3px;
    color: var(--blue);
    padding-right: 10px;
    position: relative;
    top: 2px;
}
#contents_privacypolicy dt{
margin-bottom:10px;
border-bottom: 1px solid #ececec;;
}
#contents_privacypolicy dd{
margin-bottom:30px;
}




















/*-------------------------------------------------------------------------------------
　page name　ページ名　# ID
-------------------------------------------------------------------------------------*/



/*------------------------------------------------------
　page name　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {
}

/*----------------------------------------------------
　page name　タブレット　768以下　ここまで
------------------------------------------------------*/
/*------------------------------------------------------
　page name　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
}

/*------------------------------------------------------
　page name　スマホ　640以下　ここまで
------------------------------------------------------*/