/*=================================================================================================
Primanet Rule css
=================================================================================================*/
*{
	font-style: normal;
}
html{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 	-webkit-text-size-adjust: none;/*iphoneの横向きの文字拡大制御*/
 	font-family: 'Noto Sans JP', sans-serif;;
	color: #333333;/*gray:グレー*/
  /*letter-spacing: 1px;*/
	font-size: 16px;/*通常 16px=1rem*/
	font-weight: 100;
}
h1, h3, h4, h5, h6, p,a,address,
dl, dt, dd, ol, ul, li, tr, th, td,
div, input, select, textarea,
.fs_10r{
	font-size: 1rem;
	line-height: 1.8rem;
	font-weight: 100;	
}
.fs_06r{ font-size: 0.6rem; }
.fs_08r{ font-size: 0.8rem; }
.fs_07r{ font-size: 0.7rem; }
.fs_08r{ font-size: 0.8rem; }
.fs_09r{ font-size: 0.9rem; }
.fs_10r{ font-size: 1rem; }/*基準*/
.fs_11r{ font-size: 1.1rem; }
.fs_12r{ font-size: 1.2rem; }
.fs_13r{ font-size: 1.3rem; }
.fs_14r{ font-size: 1.4rem; }
.fs_15r{ font-size: 1.5rem; }
.fs_16r{ font-size: 1.6rem; }
.fs_17r{ font-size: 1.7rem; }
.fs_18r{ font-size: 1.8rem; }
.fs_19r{ font-size: 1.9rem; }
.fs_20r{ font-size: 2rem; }
.fs_21r{ font-size: 2.1rem; }
.fs_22r{ font-size: 2.2rem; }
.fs_23r{ font-size: 2.3rem; }
.fs_24r{ font-size: 2.4rem; }
.fs_25r{ font-size: 2.5rem; }
.fs_26r{ font-size: 2.6rem; }
.fs_27r{ font-size: 2.7rem; }
.fs_28r{ font-size: 2.8rem; }
.fs_29r{ font-size: 2.9rem; }
.fs_30r{ font-size: 3rem; }
.fs_31r{ font-size: 3.1rem; }
.fs_32r{ font-size: 3.2rem; }
.fs_33r{ font-size: 3.3rem; }
.fs_34r{ font-size: 3.4rem; }
.fs_35r{ font-size: 3.5rem; }
.fs_36r{ font-size: 3.6rem; }
.fs_37r{ font-size: 3.7rem; }
.fs_38r{ font-size: 3.8rem; }
.fs_39r{ font-size: 3.9rem; }
.fs_40r{ font-size: 4rem; }
.fs_50r{ font-size: 5rem; }

.lh_1{line-height: 1; }
.lh_15{line-height: 1.5; }
.lh_17{line-height: 1.7; }
.lh_20{line-height: 2; }

.lh_07r{ line-height: 0.7rem; }
.lh_08r{ line-height: 0.8rem; }
.lh_09r{ line-height: 0.9rem; }
.lh_10r{ line-height: 1rem; }
.lh_11r{ line-height: 1.1rem; }
.lh_12r{ line-height: 1.2rem; }
.lh_13r{ line-height: 1.3rem; }
.lh_14r{ line-height: 1.4rem; }
.lh_15r{ line-height: 1.5rem; }
.lh_16r{ line-height: 1.6rem; }
.lh_17r{ line-height: 1.7rem; }
.lh_18r{ line-height: 1.8rem; }
.lh_19r{ line-height: 1.9rem; }
.lh_20r{ line-height: 2rem; }
.lh_22r{ line-height: 2.2rem; }
.lh_23r{ line-height: 2.3rem; }
.lh_24r{ line-height: 2.4rem; }
.lh_25r{ line-height: 2.5rem; }
.lh_26r{ line-height: 2.6rem; }
.lh_27r{ line-height: 2.7rem; }
.lh_28r{ line-height: 2.8rem; }
.lh_29r{ line-height: 2.9rem; }
.lh_30r{ line-height: 3rem; }
.lh_31r{ line-height: 3.1rem; }
.lh_32r{ line-height: 3.2rem; }
.lh_33r{ line-height: 3.3rem; }
.lh_34r{ line-height: 3.4rem; }
.lh_35r{ line-height: 3.5rem; }
.lh_36r{ line-height: 3.6rem; }
.lh_37r{ line-height: 3.7rem; }
.lh_38r{ line-height: 3.8rem; }
.lh_39r{ line-height: 3.9rem; }
.lh_40r{ line-height: 4rem; }
.lh_41r{ line-height: 4.1rem; }
.lh_42r{ line-height: 4.2rem; }
.lh_43r{ line-height: 4.3rem; }
.lh_44r{ line-height: 4.4rem; }
.lh_45r{ line-height: 4.5rem; }
.lh_46r{ line-height: 4.6rem; }
.lh_47r{ line-height: 4.7rem; }
.lh_48r{ line-height: 4.8rem; }
.lh_49r{ line-height: 4.9rem; }
.lh_50r{ line-height: 5rem; }
.lh_51r{ line-height: 5.1rem; }
.lh_52r{ line-height: 5.2rem; }
.lh_53r{ line-height: 5.3rem; }
.lh_54r{ line-height: 5.4rem; }
.lh_55r{ line-height: 5.5rem; }
.lh_56r{ line-height: 5.6rem; }
.lh_57r{ line-height: 5.7rem; }
.lh_58r{ line-height: 5.8rem; }
.lh_59r{ line-height: 5.9rem; }
.lh_60r{ line-height: 6rem; }


.fw_b{ font-weight: 700; }

.nsjp{
  font-family: 'Noto Sans JP', sans-serif;	
}
.robot{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.robot_b{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.robot_co{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}
.robot_co_b{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
}

.mgt_0{ margin-top: 0; }
.mgt_10{ margin-top: 0.625rem; }/*10px*/
.mgt_20{ margin-top: 1.25rem; }/*20px*/
.mgt_30{ margin-top: 1.875rem; }/*30px*/
.mgt_40{ margin-top: 2.5rem; }/*40px*/
.mgt_50{ margin-top: 3.125rem; }/*50px*/
.mgt_60{ margin-top: 3.75rem; }/*60px*/
.mgt_70{ margin-top: 4.375rem; }/*70px*/
.mgt_80{ margin-top: 5rem; }/*80px*/
.mgt_90{ margin-top: 5.625rem; }/*90px*/
.mgt_100{ margin-top: 6.25rem; }/*100px*/

.mgb_0{ margin-bottom: 0; }
.mgb_10{ margin-bottom: 0.625rem; }/*10px*/
.mgb_20{ margin-bottom: 1.25rem; }/*20px*/
.mgb_30{ margin-bottom: 1.875rem; }/*30px*/
.mgb_40{ margin-bottom: 2.5rem; }/*40px*/
.mgb_50{ margin-bottom: 3.125rem; }/*50px*/
.mgb_60{ margin-bottom: 3.75rem; }/*60px*/
.mgb_70{ margin-bottom: 4.375rem; }/*70px*/
.mgb_80{ margin-bottom: 5rem; }/*80px*/
.mgb_90{ margin-bottom: 5.625rem; }/*90px*/
.mgb_100{ margin-bottom: 6.25rem; }/*100px*/

.pd_0{ padding: 0; }
.pd_10{ padding: 0.625rem; }/*10px*/
.pd_20{ padding: 1.25rem; }/*20px*/
.pd_30{ padding: 1.875rem; }/*30px*/
.pd_40{ padding: 2.5rem; }/*40px*/
.pd_50{ padding: 3.125rem; }/*50px*/
.pd_60{ padding: 3.75rem; }/*60px*/
.pd_70{ padding: 4.375rem; }/*70px*/
.pd_80{ padding: 5rem; }/*80px*/
.pd_90{ padding: 5.625rem; }/*90px*/
.pd_100{ padding: 6.25rem; }/*100px*/

.pdt_0{ padding-top: 0; }
.pdt_10{ padding-top: 0.625rem; }/*10px*/
.pdt_20{ padding-top: 1.25rem; }/*20px*/
.pdt_30{ padding-top: 1.875rem; }/*30px*/
.pdt_40{ padding-top: 2.5rem; }/*40px*/
.pdt_50{ padding-top: 3.125rem; }/*50px*/
.pdt_60{ padding-top: 3.75rem; }/*60px*/
.pdt_70{ padding-top: 4.375rem; }/*70px*/
.pdt_80{ padding-top: 5rem; }/*80px*/
.pdt_90{ padding-top: 5.625rem; }/*90px*/
.pdt_100{ padding-top: 6.25rem; }/*100px*/

.pdb_0{ padding-bottom: 0; }
.pdb_10{ padding-bottom: 0.625rem; }/*10px*/
.pdb_20{ padding-bottom: 1.25rem; }/*20px*/
.pdb_30{ padding-bottom: 1.875rem; }/*30px*/
.pdb_40{ padding-bottom: 2.5rem; }/*40px*/
.pdb_50{ padding-bottom: 3.125rem; }/*50px*/
.pdb_60{ padding-bottom: 3.75rem; }/*60px*/
.pdb_70{ padding-bottom: 4.375rem; }/*70px*/
.pdb_80{ padding-bottom: 5rem; }/*80px*/
.pdb_90{ padding-bottom: 5.625rem; }/*90px*/
.pdb_100{ padding-bottom: 6.25rem; }/*100px*/

.txal_l{ text-align: left; }
.txal_r{ text-align: right; }
.txal_c{ text-align: center; }

.dsp_bl{
	display: block;
}
.dsp_non{
	display: none;
}
.flex_{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex_2,.flex_3,.flex_4{
	display: flex;
	justify-content: space-between;
}
.flex_2 li,
.flex_2 .f_item{
	width: 47.5%;	
}
.flex_3 li,
.flex_3 .f_item{
	width: 30%;
}
.flex_4 li,
.flex_4 .f_item{
	width: 22%;
}

.br_on{
	display: block;
}
.br_off{
	display: none;
}

.w_10{ width: 10%; }
.w_15{ width: 15%; }
.w_20{ width: 20%; }
.w_25{ width: 25%; }
.w_30{ width: 30%; }
.w_35{ width: 35%; }
.w_40{ width: 40%; }
.w_45{ width: 45%; }
.w_50{ width: 50%; }
.w_55{ width: 55%; }
.w_60{ width: 60%; }
.w_65{ width: 65%; }
.w_70{ width: 70%; }
.w_75{ width: 75%; }
.w_80{ width: 80%; }
.w_85{ width: 85%; }
.w_90{ width: 90%; }

img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
a{
  text-decoration: none;
}
a:hover{
  opacity: 0.7;
}
:root {
  --navy: #2e3192;/*紺*/
  --gray: #333333;/*グレー*/
 	--bg_gray: #f2f2f2;/*背景のグレー*/
  --blue: #0768ac;/*ブルー*/
  --light_gray: #999999;/*薄いグレー*/
  --l_light_gray: #aaa;/*もっと薄いグレー*/
  --bg_blue: #ecf2fa;/*背景のブルー*/
} 
.navy{
	color: #2e3192;/*紺*/
}
.blue{
	color: #0768ac;/*ブルー*/
}
.gray{
	color: #333333;/*グレー*/
}
.white{
	color: #fff;
}
ul li,
.f_item{
	/*background-color: #ccc;*/
	/*border: 1px solid #000;*/
}
h1{
	/*padding-bottom: 10px;*/
}
.palt{
	font-feature-settings: "palt";
}
.max400{
	max-width: 400px;
	margin: 0 auto;	
}
.max500{
	max-width: 500px;
	margin: 0 auto;
}
/*=================================================================================================*/
/* tablet向けレイアウト：768px以上 */
@media only screen and (min-width: 768px) {
html{
  	letter-spacing: 1px;
	font-size: 16px;
	font-weight: 100;
}
h1, h2, h3, h4, h5, h6, p, a, address,
dl, dt, dd, ol, ul, li, tr, th, td,
div, input, select, textarea,.fs_10r{
	font-size: 16px;
	line-height: 1.8rem;
	font-weight: 100;
}
.fs__10p{ font-size: 10px; }
.fs__11p{ font-size: 11px; }
.fs__12p{ font-size: 12px; }
.fs__13p{ font-size: 13px; }
.fs__14p{ font-size: 14px; }
.fs__15p{ font-size: 13px; }
.fs__16p{ font-size: 16px; }
.fs__17p{ font-size: 17px; }
.fs__18p{ font-size: 18px; }
.fs__19p{ font-size: 19px; }
.fs__20p{ font-size: 20px; }
.fs__21p{ font-size: 21px; }
.fs__22p{ font-size: 22px; }
.fs__23p{ font-size: 23px; }
.fs__24p{ font-size: 24px; }
.fs__25p{ font-size: 25px; }
.fs__26p{ font-size: 26px; }
.fs__27p{ font-size: 27px; }
.fs__28p{ font-size: 28px; }
.fs__29p{ font-size: 29px; }
.fs__30p{ font-size: 30px; }
.fs__31p{ font-size: 31px; }
.fs__32p{ font-size: 32px; }
.fs__33p{ font-size: 33px; }
.fs__34p{ font-size: 34px; }
.fs__35p{ font-size: 35px; }
.fs__36p{ font-size: 36px; }
.fs__37p{ font-size: 37px; }
.fs__38p{ font-size: 38px; }
.fs__39p{ font-size: 39px; }
.fs__40p{ font-size: 40px; }
.fs__41p{ font-size: 41px; }
.fs__42p{ font-size: 42px; }
.fs__43p{ font-size: 43px; }
.fs__44p{ font-size: 44px; }
.fs__45p{ font-size: 45px; }
.fs__46p{ font-size: 46px; }
.fs__47p{ font-size: 47px; }
.fs__48p{ font-size: 48px; }
.fs__49p{ font-size: 49px; }
.fs__50p{ font-size: 50px; }
.fs__51p{ font-size: 51px; }
.fs__52p{ font-size: 52px; }
.fs__53p{ font-size: 53px; }
.fs__54p{ font-size: 54px; }
.fs__55p{ font-size: 55px; }
.fs__56p{ font-size: 56px; }
.fs__57p{ font-size: 57px; }
.fs__58p{ font-size: 58px; }
.fs__59p{ font-size: 59px; }
.fs__60p{ font-size: 60px; }

.lh__20p{ line-height: 20px; }
.lh__22p{ line-height: 22px; }
.lh__24p{ line-height: 24px; }
.lh__26p{ line-height: 26px; }
.lh__28p{ line-height: 28px; }
.lh__30p{ line-height: 30px; }
.lh__32p{ line-height: 32px; }
.lh__34p{ line-height: 34px; }
.lh__36p{ line-height: 36px; }
.lh__36p{ line-height: 38px; }
.lh__40p{ line-height: 40px; }
.lh__50p{ line-height: 50px; }
.lh__60p{ line-height: 60px; }
.lh__70p{ line-height: 70px; }
.lh__80p{ line-height: 80px; }
.lh__90p{ line-height: 90px; }
.lh__100p{ line-height: 100px; }

.fw__b{ font-weight: 700; }

.mgt__0{ margin-top: 0px; }
.mgt__10{ margin-top: 10px; }
.mgt__20{ margin-top: 20px; }
.mgt__30{ margin-top: 30px; }
.mgt__40{ margin-top: 40px; }
.mgt__50{ margin-top: 50px; }
.mgt__60{ margin-top: 60px; }
.mgt__70{ margin-top: 70px; }
.mgt__80{ margin-top: 80px; }
.mgt__90{ margin-top: 90px; }
.mgt__100{ margin-top: 100px; }

.mgb__0{ margin-bottom: 0px; }
.mgb__10{ margin-bottom: 10px; }
.mgb__20{ margin-bottom: 20px; }
.mgb__30{ margin-bottom: 30px; }
.mgb__40{ margin-bottom: 40px; }
.mgb__50{ margin-bottom: 50px; }
.mgb__60{ margin-bottom: 60px; }
.mgb__70{ margin-bottom: 70px; }
.mgb__80{ margin-bottom: 80px; }
.mgb__90{ margin-bottom: 90px; }
.mgb__100{ margin-bottom: 100px; }

.pd__0{ padding: 0px; }
.pd__10{ padding: 10px; }
.pd__20{ padding: 20px; }
.pd__30{ padding: 30px; }
.pd__40{ padding: 40px; }
.pd__50{ padding: 50px; }
.pd__60{ padding: 60px; }
.pd__70{ padding: 70px; }
.pd__80{ padding: 80px; }
.pd__90{ padding: 90px; }
.pd__100{ padding: 100px; }

.pdt__0{ padding-top: 0px; }
.pdt__10{ padding-top: 10px; }
.pdt__20{ padding-top: 20px; }
.pdt__30{ padding-top: 30px; }
.pdt__40{ padding-top: 40px; }
.pdt__50{ padding-top: 50px; }
.pdt__60{ padding-top: 60px; }
.pdt__70{ padding-top: 70px; }
.pdt__80{ padding-top: 80px; }
.pdt__90{ padding-top: 90px; }
.pdt__100{ padding-top: 100px; }

.pdb__0{ padding-bottom: 0px; }
.pdb__10{ padding-bottom: 10px; }
.pdb__20{ padding-bottom: 20px; }
.pdb__30{ padding-bottom: 30px; }
.pdb__40{ padding-bottom: 40px; }
.pdb__50{ padding-bottom: 50px; }
.pdb__60{ padding-bottom: 60px; }
.pdb__70{ padding-bottom: 70px; }
.pdb__80{ padding-bottom: 80px; }
.pdb__90{ padding-bottom: 90px; }
.pdb__100{ padding-bottom: 100px; }

.txal__l{ text-align: left; }
.txal__r{ text-align: right; }
.txal__c{ text-align: center; }

.flex__{
	display: flex;
	justify-content: space-between;
	/*align-items: center;*/
}
.flex__2,.flex__3,.flex__4{
	display: flex;
	justify-content: space-between;
}
.flex__2 li,
.flex__2 .f_item{
	width: 47.5%;
}
.flex__3 li,
.flex__3 .f_item{
	width: 30%;
}
.flex__4 li,
.flex__4 .f_item{
	width: 22.5%;
}

.br__on{
	display: block;
}
.br__off{
	display: none;
}

.w__10{ width: 10%; }
.w__15{ width: 15%; }
.w__20{ width: 20%; }
.w__25{ width: 25%; }
.w__30{ width: 30%; }
.w__35{ width: 35%; }
.w__40{ width: 40%; }
.w__45{ width: 45%; }
.w__475{ width: 47.5%; }
.w__50{ width: 50%; }
.w__55{ width: 55%; }
.w__60{ width: 60%; }
.w__65{ width: 65%; }
.w__70{ width: 70%; }
.w__75{ width: 75%; }
.w__80{ width: 80%; }
.w__85{ width: 85%; }
.w__90{ width: 90%; }
/*
.inner_wrap{
	width: 90%;
	margin: 0 auto;
}
*/
.max400,
.max500{
	max-width: none;
}
}
/*=================================================================================================*/
/* PC向けレイアウトの指定:テーマにより*/
@media only screen and (min-width: 1200px) {
/*==============================================================*/
.fs___10p{ font-size: 10px; }
.fs___11p{ font-size: 11px; }
.fs___12p{ font-size: 12px; }
.fs___13p{ font-size: 13px; }
.fs___14p{ font-size: 14px; }
.fs___15p{ font-size: 13px; }
.fs___16p{ font-size: 16px; }
.fs___17p{ font-size: 17px; }
.fs___18p{ font-size: 18px; }
.fs___19p{ font-size: 19px; }
.fs___20p{ font-size: 20px; }
.fs___21p{ font-size: 21px; }
.fs___22p{ font-size: 22px; }
.fs___23p{ font-size: 23px; }
.fs___24p{ font-size: 24px; }
.fs___25p{ font-size: 25px; }
.fs___26p{ font-size: 26px; }
.fs___27p{ font-size: 27px; }
.fs___28p{ font-size: 28px; }
.fs___29p{ font-size: 29px; }
.fs___30p{ font-size: 30px; }
.fs___31p{ font-size: 31px; }
.fs___32p{ font-size: 32px; }
.fs___33p{ font-size: 33px; }
.fs___34p{ font-size: 34px; }
.fs___35p{ font-size: 35px; }
.fs___36p{ font-size: 36px; }
.fs___37p{ font-size: 37px; }
.fs___38p{ font-size: 38px; }
.fs___39p{ font-size: 39px; }
.fs___40p{ font-size: 40px; }
.fs___41p{ font-size: 41px; }
.fs___42p{ font-size: 42px; }
.fs___43p{ font-size: 43px; }
.fs___44p{ font-size: 44px; }
.fs___45p{ font-size: 45px; }
.fs___46p{ font-size: 46px; }
.fs___47p{ font-size: 47px; }
.fs___48p{ font-size: 48px; }
.fs___49p{ font-size: 49px; }
.fs___50p{ font-size: 50px; }
.fs___51p{ font-size: 51px; }
.fs___52p{ font-size: 52px; }
.fs___53p{ font-size: 53px; }
.fs___54p{ font-size: 54px; }
.fs___55p{ font-size: 55px; }
.fs___56p{ font-size: 56px; }
.fs___57p{ font-size: 57px; }
.fs___58p{ font-size: 58px; }
.fs___59p{ font-size: 59px; }
.fs___60p{ font-size: 60px; }
.fs___70p{ font-size: 70px; }
.fs___80p{ font-size: 80px; }
.fs___90p{ font-size: 90px; }
.fs___100p{ font-size: 100px; }

.lh___20p{ line-height: 20px; }
.lh___22p{ line-height: 22px; }
.lh___24p{ line-height: 24px; }
.lh___26p{ line-height: 26px; }
.lh___28p{ line-height: 28px; }
.lh___30p{ line-height: 30px; }
.lh___32p{ line-height: 32px; }
.lh___34p{ line-height: 34px; }
.lh___36p{ line-height: 36px; }
.lh___36p{ line-height: 38px; }
.lh___40p{ line-height: 40px; }
.lh___50p{ line-height: 50px; }
.lh___60p{ line-height: 60px; }
.lh___70p{ line-height: 70px; }
.lh___80p{ line-height: 80px; }
.lh___90p{ line-height: 90px; }
.lh___100p{ line-height: 100px; }

.mgt___0{ margin-top: 0px; }
.mgt___10{ margin-top: 10px; }
.mgt___20{ margin-top: 20px; }
.mgt___30{ margin-top: 30px; }
.mgt___40{ margin-top: 40px; }
.mgt___50{ margin-top: 50px; }
.mgt___60{ margin-top: 60px; }
.mgt___70{ margin-top: 70px; }
.mgt___80{ margin-top: 80px; }
.mgt___90{ margin-top: 90px; }
.mgt___100{ margin-top: 100px; }

.mgb___0{ margin-bottom: 0px; }
.mgb___10{ margin-bottom: 10px; }
.mgb___20{ margin-bottom: 20px; }
.mgb___30{ margin-bottom: 30px; }
.mgb___40{ margin-bottom: 40px; }
.mgb___50{ margin-bottom: 50px; }
.mgb___60{ margin-bottom: 60px; }
.mgb___70{ margin-bottom: 70px; }
.mgb___80{ margin-bottom: 80px; }
.mgb___90{ margin-bottom: 90px; }
.mgb___100{ margin-bottom: 100px; }

.pd___0{ padding: 0px; }
.pd___10{ padding: 10px; }
.pd___20{ padding: 20px; }
.pd___30{ padding: 30px; }
.pd___40{ padding: 40px; }
.pd___50{ padding: 50px; }
.pd___60{ padding: 60px; }
.pd___70{ padding: 70px; }
.pd___80{ padding: 80px; }
.pd___90{ padding: 90px; }
.pd___100{ padding: 100px; }

.pdt___0{ padding-top: 0px; }
.pdt___10{ padding-top: 10px; }
.pdt___20{ padding-top: 20px; }
.pdt___30{ padding-top: 30px; }
.pdt___40{ padding-top: 40px; }
.pdt___50{ padding-top: 50px; }
.pdt___60{ padding-top: 60px; }
.pdt___70{ padding-top: 70px; }
.pdt___80{ padding-top: 80px; }
.pdt___90{ padding-top: 90px; }
.pdt___100{ padding-top: 100px; }

.pdb___0{ padding-bottom: 0px; }
.pdb___10{ padding-bottom: 10px; }
.pdb___20{ padding-bottom: 20px; }
.pdb___30{ padding-bottom: 30px; }
.pdb___40{ padding-bottom: 40px; }
.pdb___50{ padding-bottom: 50px; }
.pdb___60{ padding-bottom: 60px; }
.pdb___70{ padding-bottom: 70px; }
.pdb___80{ padding-bottom: 80px; }
.pdb___90{ padding-bottom: 90px; }
.pdb___100{ padding-bottom: 100px; }

.txal___l{ text-align: left; }
.txal___r{ text-align: right; }
.txal___c{ text-align: center; }

.flex___2,.flex___3{
	display: flex;
	justify-content: space-between;
}
.flex___2 li,
.flex___2 .f_item{
	width: 47.5%;
}
.flex___3 li,
.flex___3 .f_item{
	width: 30%;
}

.br___on{
	display: block;
}
.br___off{
	display: none;
}
}
/*=================================================================================================
Primanet Rule css
=================================================================================================*/

/*=================================================================================================
menu・nav　ccss
=================================================================================================*/

#menu {
  display: flex;
  margin: 0 30px;
  position: fixed;
  right: 0;
  top: 16px;
  z-index: 5;
}
#menu-btn {
  display: none;
}
#menu-content {
  margin: 0;
  list-style-type: none;
}
#menu-content > li {
  position: relative;
  float: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li > a {
  display: block;
  padding: 10px 15px;
  /*line-height: 40px;*/
  color: var(--navy);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
#menu-content > li >.service{
	padding: 10px 15px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--navy);
 }

#menu-content > li > a > .menu_icon {
  margin-right: 5px;
}
/*
#menu-content > li.contact > a{
  background-color: var(--navy);
  color: #fff;
  border-radius: 5px;
}*/
#menu-content > li > ul.second-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding-left: 0;
  list-style-type: none;
  /*
  -webkit-box-shadow: 1px 1px 7px #bbb;
          box-shadow: 1px 1px 7px #bbb;
  margin-left: -50px;
  */
}
#menu-content > li:hover > ul.second-content {
	background-color: rgba(255,255,255,0.7);
  visibility: visible;
  opacity: 1;
  
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 20px;
	margin-left: -65px;
	
}
#menu-content > li > ul.second-content > li {
  text-align: center;
  width: 200px;
}
#menu-content > li > ul.second-content > li > a {
  display: block;
  line-height: 40px;
  color: var(--gray);
  font-size: 14px;
  text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover {
  color: var(--navy);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
/***************************** 960px以下 **************************************/
@media screen and (max-width: 960px) {
  nav {
    position: fixed;
    top: 0;
    left: -900px;
    bottom: 0;
    width: 100%;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 3;
    opacity: 0;
  }
  .open nav {
    left: 0;
    opacity: 1;
  }
  nav .inner {
  	padding: 10px;
    padding-top: 50px;
    background: url(../images/common/logo_n.svg) 20px 15px no-repeat;
    background-size: 180px auto;
  }
  nav .inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav .inner ul li {
    position: relative;
    margin: 0;
  }
  nav .inner ul li a {
    display: block;
    /*color: #333;*/
    font-size: 14px;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .toggle_btn {
    display: block;
    position: fixed;
    top: 10px;
    right: 20px;
    width: 30px;
    height: 30px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    position: absolute;
    left: 0;
    width: 25px;
    height: 2px;
    background-color: var(--navy);
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .toggle_btn span:nth-child(1) {
    top: 4px;
  }
  .toggle_btn span:nth-child(2) {
    top: 14px;
  }
  .toggle_btn span:nth-child(3) {
    bottom: 4px;
  }
  .open .toggle_btn span {
    /*background-color: #fff;*/
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(45deg);
  }
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }

  #menu-content > li {
    width: 100%;
    /*margin-bottom: 15px;*/
  }
  #menu-content > li:hover {
    background: none;
  }
  #menu-content > li > a {
    height: 100%;
    padding: 5% 0px;
    font-size: 100%;
    border-bottom: 1px solid var(--l_light_gray);
    background: url(../images/common/arrow_n_r.svg) 90% 50% no-repeat;
    background-size: 7px auto;
    text-align: center;
    letter-spacing: 3px;
  }
   #menu-content > li:nth-child(2) > a{
  	border-bottom: none;
  }
#menu-content > li >.service{
	padding: 15px 0;
	border-bottom: 1px solid #999;
 }
  #menu-content > li.contact > a{
  background: none;
  background: url(../images/common/arrow_n_r.svg) 90% 50% no-repeat;
   background-size: 7px auto;
  color: var(--navy);
	}
	#menu-content > li:hover > ul.second-content {
		padding: 0;
		margin-left: 0;
		
	}
  #menu-content > li > ul.second-content {
    visibility: visible;
    opacity: 1;
    width: 100%;
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none;
    margin-left: 0px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  #menu-content > li > ul.second-content > li {
    width: 49%;
    /*text-align-last: left;*/
    margin-bottom: 10px;
  }

  /*
  #menu-content > li > ul.second-content > li > a {
  display: block;
  line-height: 40px;
  color: var(--gray);
  font-size: 14px;
  text-decoration: none;
}
  */
  #menu-content > li > ul.second-content > li > a {

    border-bottom: 1px solid #999;
    color: var(--navy);
    border: 1px solid var(--l_light_gray);
    /*background: url(../images/common/arrow_g_r.svg) 90% 50% no-repeat;
  	background-size: 7px auto;
  	    transition: unset;*/
  	font-size: 14px;
  	line-height: 1;
    transform: none;
    animation: none;
 
    padding: 7% 0;
    /*padding: 4px 0;
       padding-left: 20px;*/
  }
  #menu-content > li.contact > a{

  border-radius: 0;
}
/*
#menu-content > li > ul.second-content > li > a:hover {
    background: none;
    background: url(../images/common/arrow_g_r.svg) 90% 50% no-repeat;
  	background-size: 7px auto;


  }
 */ 
}/*960幅end*/
/*=================================================================================================
menu・nav　ccss
=================================================================================================*/













/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/**********                    *********************************************************************/
/**********   **************   ********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********   **************   *********************************************************************/
/**********                    **********************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/*=================================================================================================
desgin css
==================================================================================================*/
@media only screen and (min-width: 0px) {
/*****************************************************/
/*****************************************************/
/***************** 共通 0 ****************************/
/*****************************************************/
/*****************************************************/
.grecaptcha-badge {/*リキャプチャを隠す*/
  visibility: hidden;
}
[id] {
  scroll-margin-top: 80px; /* 固定ヘッダーの高さに合わせる */
}
.top_page::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	background: url("../images/common/pixta_83426882_M.jpg") center 0px no-repeat; 
	background-size: 1100px;
	width: 100%;
	height: 100%;
}
section{
	background-color: #fff;
}
section.main_visual{
	background: none;
}
.inner_wrap{
	width: 90%;
	margin: 0 auto;
}

.en_title{
  font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
  color: var(--navy);
	font-size: 2.5rem;
	line-height: 1;
}
/*
.robot{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.robot_b{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.robot_co{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}
.robot_co_b{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
}
*/

.a_title{/*h2タイトル*/
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 100;
	padding-bottom: 30px;
}
.button_navy{
	text-align: center;
	padding: 20px 0;
}
.button_navy a{
	display: inline-block;
	background-color: var(--navy);
	color: #fff;
	padding: 15px 30px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #acc6e2;
}
/*
.breadcrumb{
	margin-left: 25px;
}
*/

.cta_btn{
	text-align: center;
}
.cta_btn a{
	font-weight: bold;
	background: url(../images/common/arrow_n_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	background-color: #f6c000;
	color: var(--navy);
	padding: 10px 50px;

}
.navy_btn{/*紺ベタ*/
	text-align: center;
}
.navy_btn a{
	font-weight: bold;
	background: url(../images/common/arrow_w_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	background-color: var(--navy);
	color: #fff;
	padding: 10px 100px;
}
.btn_detail_gray,
.btn_detail_navy{
	text-align: right;
}
.btn_detail_gray a,
.btn_detail_gray span{
	background: url(../images/common/arrow_g_r_line.svg) 100% 50% no-repeat;
	background-size: 30px auto;
	color: var(--gray);
	padding-right: 40px;
	font-size: 0.7rem;
}
.btn_detail_navy a,
.btn_detail_navy span{
	background: url(../images/common/arrow_n_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	color: var(--navy);
	padding-right: 40px;
	font-size: 0.7rem;
}
.closing{
	padding: 50px 0;
}
.closing h2{
	color: var(--navy);
	font-weight: bold;
}
.closing .last_txt{
	color: var(--navy);
	font-size: 1rem;

}
/*****************************************************/
/*****************************************************/
/***************** section　共通 0 *******************/
/*****************************************************/
/*****************************************************/

/***************** header *******************/
header{
	position: relative;
	background-color: #fff;
}
header .logo{
	position: fixed;
	z-index: 2;
	width: 180px;
	padding: 8px 0 0 20px;
	opacity: 1;
	transition: opacity 0.3s ease; /* 0.5秒かけて変化 */
}
header.scrolled .logo{
	opacity: 0;
}
/*
.backdrop.scrolled{
	position: fixed;
	top: 0;
	height: 50px;
	width: 100%;
	z-index: 4;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
*/
/***************** top main_visual  0 *******************/
.top .main_visual{
	padding: 30px 0 170px;
	position: relative;
}
.top .main_visual::before {
  content: "";
  position: absolute;
  inset: 0; /* 親要素いっぱいに広げる */
  background: rgba(255,255,255,0.4); /* 白を50%重ねる */
  z-index: 0;
}
.top .main_visual .content {
  position: relative;
  z-index: 1; /* 擬似要素より上に */
}
.top .main_visual h1{
	text-align: center;
	padding-top: 50px;
}
.top .main_visual h1 br{
	display: none;
}
.top .main_visual .cta_btn a{
}
.top .main_visual .main_icon{
	position: absolute;
	bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 90%;
  max-width: 400px;

}

/***************** top clients 0 *******************/
.top .clients{
	background-color: #fff;
	padding: 70px 0 50px;
}
.top .clients .inner_wrap{
	width: auto;

}
.top .clients h2{
	position: relative;	
	max-width: 350px;
	margin: 0 auto;	
	margin-bottom: 10px;
font-feature-settings: "palt";
}
.top .clients h2:before{
  position: absolute;
  left: 15px;
  bottom: 0;
	content: "";
	background: url(../images/top/laurel_l.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 60px;
}
.top .clients h2:after{
  position: absolute;
  right: 5px;
  bottom: 0;
	content: "";
	background: url(../images/top/laurel_r.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 60px;

}
.top .clients ul {
	text-align: center;
	max-width: 450px;
	margin: 0 auto;
}
.top .clients ul li{
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1rem;
	font-weight: bold;
	margin: 0 6px;

}
.top .clients ul li sup{
	font-size: 0.5rem;
	vertical-align: 7px;
}
.top .clients .note{
	text-align: right;
	line-height: 0;
}
.top .clients .note li{
	font-size: 0.5rem;
	font-weight: 100;
	padding-right: 20px;
}
 
 /***************** top  services_intro 0 *******************/
.top .services_intro .inner{
  	width: 100%;
  	margin: 0 auto;
  	max-width: 400px
}
.top .services_intro .services_item{
 	width: 33%;
}
.top .services_intro .services_item h3{
	width: 70%;
	margin: auto;
	background-color: var(--navy);
	aspect-ratio: 1 / 1;        /* 正方形を保証 */
  border-radius: 50%;         /* 円形にする */
  display: flex;
  flex-direction: column;     /* アイコンとテキストを縦並び */
  align-items: center;
 	justify-content: center;     /* ★メイン軸(上下)を中央 */
 	color: #fff;
}
.top .services_intro .services_item h3 img{
	height: 30px;
}
.top .services_intro .services_item p{
 	font-weight: bold;
 	text-align: center;
 	font-size: 0.8rem;
 	line-height: 1.3rem;
}
/***************** top  about_web 0 *******************/
.top .about_web{
	padding: 50px 0;
}
.top .about_web h2{
	text-align: center;
}
.top .about_web p{

}
.top .about_web p br{
	display: none;
}
/***************** top  works 0 *******************/
/***************** web  works 0 *******************/
/**************** movie  works 0 *******************/
/*********** トップページ・WEB制作ページ　共通　*********/
.top .works{
	padding: 50px 0;
}
.web .works{
	padding: 50px 0 100px;
}
.top .works li,
.web .works li{
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.top .works h3,
.web .works h3{
	font-size: 0.7rem;
	color: var(--navy);
	font-weight: bold;
}
.top .works .photo,
.web .works .photo{
	max-width: 350px;
	margin: 0 auto;
}
.top .works p,
.web .works p{
	font-size: 0.7rem;
	line-height: 1.5;

}
/***************** top  service 0 *******************/
.top .service{
	padding: 50px 0;	
}
.top .service .web_design_icon,
.top .service .other_service_icon{
	width: 80%;
	max-width: 350px;
	margin: 0 auto;
	margin-bottom: 20px;
}
/****************　ポイント ***************/
.top .service .web_feature{
	background-color: var(--bg_gray);
	padding: 30px;
}
.top .service .web_feature li{
	background-color: #fff;
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
}
.top .service .web_feature li:last-child{
	margin-bottom: 0;
}
.top .service .web_feature li .feature_badge{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	background-color: var(--navy);
	color: #fff;
	width: 150px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5;
}
.top .service .web_feature li h4{
	color: var(--navy);
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;        /* アイコンと文字の高さを中央に */
	gap: 10px;                 /* アイコンと文字の間隔 */
	justify-content: center;
	margin: 20px 0 10px; 
}
.top .service .web_feature li h4 img{
	height: 30px;
	width: auto;
}
/****************　トップページのWEBプラン ***************/
/****************　WEBページのWEBプラン ***************/
/****************　動画ページの動画プラン ***************/
/****************　プラン周辺共通CSS ***************/
.movie .plan .point_advice{
	border: 1px solid var(--l_light_gray);
	margin: 30px 0;
	width: 80%;
	margin: 0 auto;
	font-size: 0.9rem;
	padding: 10px;
	margin-top: 50px;
	margin-bottom: 50px;
}
.top .service .web_plan li,
.web .web_plan li,
.movie .movie_plan li{
	border: 2px solid var(--light_gray);
	text-align: center;	
	margin-bottom: 20px;
	position: relative;
}
.movie .movie_plan li{
	padding-bottom: 30px;
}
.top .service .web_plan li .plan_tag,
.web .web_plan li .plan_tag,
.movie .movie_plan li .plan_tag{
	background-color: var(--light_gray);
	color: #fff;
	width: 250px;
	margin: 0 auto;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 2;
}
.movie .movie_plan li .plan_tag{
	width: 100%;
	line-height: 1.2;
	padding: 5px 0;
}
.top .service .web_plan li .plan_title,
.web .web_plan li .plan_title,
.movie .movie_plan li .plan_title{
	font-weight: bold;
	font-size: 1.5rem;
	margin: 20px 0; 
	position: relative;
}
.movie .movie_plan li .plan_title{
	margin-bottom: 10px;
}
.movie .movie_plan li .plan_time{
	display: inline-block;
	border: 1px solid var(--gray);
	line-height: 1;
	padding: 3px 20px;
	margin-bottom: 10px;
	font-weight: bold;
}
.movie .movie_plan li .plan_time span{
	font-family: 'Roboto', sans-serif;
	font-size: 1.7rem;	
	vertical-align: -3px;
	margin: 0 5px;
}
.movie .movie_plan .inner{
	padding: 0 20px 10px;
}
.movie .movie_plan .use_scene{
	text-align: left;	
	margin-bottom: 10px;
}
.movie .movie_plan .use_scene li{
	display: inline-block;
	background-color: var(--l_light_gray);
	border: none;
	border-radius: 15px;
	padding: 0 10px;
	color: #fff;
	margin: 0 5px 10px;
	line-height: 1.5;
}
.movie .movie_plan .plan_item._2 .use_scene li{
	display: inline-block;
	background-color: var(--navy);
	border: none;
	border-radius: 15px;
	padding: 0 10px;
	color: #fff;
	margin: 0 5px 10px;
	line-height: 1.5;
}
.top .service .web_plan li .plan_title br,
.web .web_plan li .plan_title br,
.movie .movie_plan li .plan_title br{
	display: none;
}
.top .service .web_plan li.plan_item._2 .plan_title,
.top .service .web_plan li.plan_item._3 .plan_title,
.web .web_plan li.plan_item._2 .plan_title,
.web .web_plan li.plan_item._3 .plan_title{
	padding-right: 30px;
}
.top .service .web_plan li .special_icon_link,
.web .web_plan li .special_icon_link{
	position: absolute;
	width: 45px;
	top: -10px;
	margin-left: 10px;
}
.top .service .web_plan li .plan_price,
.web .web_plan li .plan_price,
.movie .movie_plan li .plan_price{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
.top .service .web_plan li .plan_price .price_value,
.web .web_plan li .plan_price .price_value,
.movie .movie_plan li .plan_price .price_value{
	font-family: 'Roboto', sans-serif;
	font-size: 2.3rem;
}
.top .service .web_plan li .plan_desc,
.web .web_plan li .plan_desc,
.movie .movie_plan li .plan_desc{
	text-align: left;
	display: inline-block;
	margin-bottom: 20px;
	font-weight: bold;
}
.top .service .web_plan li .plan_link,
.web .web_plan li .plan_link{
	background: url(../images/common/arrow_g_r_line.svg) 95% 40% no-repeat;
	background-size: 25px auto;
	display: block;
	border: 1px solid var(--gray);
	border-radius: 20px;
	width: 170px;
	margin: 0 auto;
	padding: 5px 0;
	margin-bottom: 20px;
	color: var(--gray);
	font-size: 0.8rem;
	line-height: 1;
}
.top .service .web_plan .plan_item._2,
.web .web_plan .plan_item._2,
.movie .movie_plan .plan_item._2{
	border: 2px solid var(--navy);	
}
.top .service .web_plan .plan_item._2 .plan_tag,
.web .web_plan .plan_item._2 .plan_tag,
.movie .movie_plan .plan_item._2 .plan_tag{
	background-color: var(--navy);
	display: flex;
	justify-content: center;
}
.top .service .web_plan .plan_item._2 .plan_tag img,
.web .web_plan .plan_item._2 .plan_tag img,
.movie .movie_plan .plan_item._2 .plan_tag img{
	width: 35px;
	margin: 0 5px 3px 0;
}
.top .service .web_plan .plan_item._2 .plan_title,
.top .service .web_plan .plan_item._2 .plan_price,
.web .web_plan .plan_item._2 .plan_title,
.web .web_plan .plan_item._2 .plan_price,
.movie .movie_plan .plan_item._2 .plan_title,
.movie .movie_plan .plan_item._2 .plan_price{
	color: var(--navy);
}
/**************** 特典 ***************/
.top .service .plan_bonus,
.web .plan .plan_bonus{
 background-color: var(--bg_blue);
 padding: 30px 20px 10px;
}
.top .service .plan_bonus .bonus_title,
.web .plan .plan_bonus .bonus_title{
	position: relative;
	background-color: #fff;
	border: 1px solid var(--navy);
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0 5px 0 30px;
	text-align: center;
	margin-bottom: 10px;
	font-feature-settings: "palt";
}
.top .service .plan_bonus .plan_bonus_inner,
.web .plan .plan_bonus .plan_bonus_inner{
	max-width: 400px;
	margin: 0 auto;
	position: relative;
}
.top .service .plan_bonus .special_icon,
.web .plan .plan_bonus .special_icon{
	position: absolute;
	left: -10px;
	top: -20px;
	z-index: 10000;
	width: 60px;
	margin: 0 auto;
}
.top .service .plan_bonus .bonus_lead,
.web .plan .plan_bonus .bonus_lead{
	text-align: center;
	font-size: 1.5rem;
	line-height: 2.2rem;
}

/*
.top .service .plan_bonus .bonus_list li,
.web .plan .plan_bonus .bonus_list li{
	text-indent: -1rem;
	padding-left: 1rem;

}
.top .service .plan_bonus .bonus_list li .plan_name,
.web .plan .plan_bonus .bonus_list li .plan_name{
	font-size: 1rem;
}
/**************** その他のサービス ***************/
.top .service .other_service ul li a.hover_line{
	display: block;
	padding: 20px 30px 10px;
	margin-bottom: 20px;
	color: var(--gray);
	transition: all 0.5s 0s ease-in-out;
	border: 1px solid var(--l_light_gray);
}
.top .service .other_service ul li a.hover_line:hover{
	opacity: 1;
	border: 1px solid var(--navy);
}
.top .service .other_service ul li a.hover_line .btn_detail_gray span{
	background: url(../images/common/arrow_g_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	color: var(--g);
	padding-right: 40px;
	font-size: 0.7rem;
}
.top .service .other_service ul li a.hover_line:hover .btn_detail_gray span{
	background: url(../images/common/arrow_n_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	color: var(--navy);
	padding-right: 40px;
	font-size: 0.7rem;
}









.top .service .other_service ul li:last-child{
	margin-bottom: 0;
}
.top .service .other_service ul li h4{
	display: flex;
	gap: 10px;
	align-items: center;
	text-align: left;
	margin-bottom: 10px;
	font-weight: bold;
}
.top .service .other_service ul li h4 img{
	width: auto;
	width: 35px;
}
.top .service .other_service ul li p{
	font-size: 0.9rem;
}


/*薄い青背景*/
.bg_blue{
	background-color: #ecf2fa;
	padding-bottom: 50px;
}

/***************** top  flow 0 *******************/
/***************** web  flow 0 *******************/
/*********** トップページ・WEB制作ページ　共通　*********/
.top .flow,
.web .flow,
.movie .flow,
.sns_ad .flow{
	padding: 50px 0;
	background-color: var(--bg_gray);
}
.top .flow ul li,
.web .flow ul li,
.movie .flow ul li,
.sns_ad .flow ul li{
	border: 1px solid var(--l_light_gray);
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
}
/*
.movie .flow ul li,
.sns_ad .flow ul li{
	border: 1px solid var(--l_light_gray);
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
}
*/
.top .flow ul li:last-child,
.web .flow ul li:last-child,
.movie .flow ul li:last-child,
.sns_ad .flow ul li:last-child{
	margin-bottom: 0;
}
.top .flow ul li h3,
.web .flow ul li h3,
.movie .flow ul li h3,
.sns_ad .flow ul li h3{
	color: var(--navy);
	font-weight: bold;
}
.top .flow ul li h3 span,
.movie .flow ul li h3 span,
.sns_ad .flow ul li h3 span{
	display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  font-size: 2rem;
}
.web .flow ul li h3,
.movie .flow ul li h3,
.sns_ad .flow ul li h3{
	display: flex;
	align-items: center;
}
.web .flow ul li h3 span,
.movie .flow ul li h3 span,
.sns_ad .flow ul li h3 span{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin-right: 5px;
}
.web .flow .flow_open_btn,
.movie .flow .flow_open_btn,
.sns_ad .flow .flow_open_btn{
	cursor: pointer;
	font-weight: bold;
	font-size: 1.2rem;
}
.web .flow .flow_open_txt,
.movie .flow .flow_open_txt,
.sns_ad .flow .flow_open_txt{
	display: none;
}
/***************** top faq 0 *******************/
.top .faq{
	padding: 50px 0;
}
/***************** top blog 0 *******************/
.top .blog{
	padding: 50px 0;
}
.top .blog ul li{
	margin-bottom: 50px;
}
.top .blog ul li a{
	color: var(--gray);
}
.top .blog ul li a .meta{
	font-size: 0.8rem;
	align-items: center;
	margin: 5px 0;
}
.top .blog ul li a figure {
  width: 100%;         
  height: 180px;       
  display: flex;       
  align-items: center;  
  justify-content: center; 
  overflow: hidden;     
  margin: 0;
}
.top .blog ul li a figure img {
  max-width: 100%;  
  max-height: 100%; 
  object-fit: cover; 
}
.top .blog ul li a time{
	color: var(--navy);
	font-weight: 400;
  font-family: 'Roboto Condensed', sans-serif;
 	font-size: 1rem;
 	line-height: 1;
 	margin-top: 2px;
}
.top .blog ul li a .category{
	line-height: 1;
	/*background-color: var(--bg_blue);*/
	color: var(--navy);
	font-size: 0.8rem;
	padding: 5px 10px;
}
/***************** top feature 0 *******************/
.top .feature {
	padding: 50px 0;
}
.top .feature .point{
	margin-bottom: 50px;
}
.top .feature .point._3{
	margin-bottom: 0;
}
.top .feature h3{
	font-size: 1.2rem;
	font-weight: bold;
	margin: 10px 0;
}
/***************** web_select_guide 0 *******************/
/***************** トップページ *******************/
.web_select_guide{
	padding: 50px 0;
}
.web_select_guide p{
	margin-bottom: 20px;
}
.web_select_guide .br_1{
	display: none;
}

/***************** bottom 0 *******************/


/***************** top contact 0 *******************/
.footer_contact  h3{
	/*color: var(--navy);*/
	font-weight: bold;
	text-align: center;
	padding: 20px 0;
}
.footer_contact .item{
	background-color: #fff;
	text-align: center;
	padding: 20px 0;
	margin-bottom: 20px;
}
.footer_contact .form .lead,
.footer_contact .tel .lead{
	padding: 0;
}
.footer_contact .form .lead{
	padding: 0;
	margin: 0 0 20px;
}
.footer_contact .form .cta_btn{
	margin-bottom: 10px;
}
.footer_contact .tel a{
	color: var(--navy);
	font-weight: 500;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2rem;
  display: block;	
  margin-top: 10px;
}
.footer_contact .closing{
	text-align: center;
	font-weight: bold;
}














/*****************************************************/
/*****************************************************/
/***************** 下層ページ共通　0  *******************/
/*****************************************************/
/*****************************************************/
.lower_header{
	background-color: #fff;
	height: 50px;
}
.lower_header .logo{
	position: static;
	width: 160px;
	padding: 8px 0 0 20px;
}
.lower_visual{
	/*background: url(../images/common/pixta_91715326_M_kakou_2_plus.jpg) 0% 80% no-repeat;*/
	background: url(../images/common/pixta_83426882_M.jpg) 50% 47% no-repeat; 
	background-size: 1200px;
	position: relative;
}
.lower_visual_inner{
	background: rgba(255, 255, 255, 0.4);
	padding: 0 0 130px;/*仮*/
}
.lower_visual_inner.img_none{/*タイトルのアイコン無し設定*/
	background: rgba(255, 255, 255, 0.4);
	padding: 0 0 70px;/*仮*/
}
/*ボトム白波*/
/*
.lower_visual .wave{
	position: absolute;
	width: 100%;
	bottom: -1px;
}
*/
.lower_visual h1{
	width: 100%;
	font-size: 0.6rem;
	color: #fff;
	text-align: center;
}
.lower_visual h2{
	text-align: center;
	color: var(--navy);
	font-weight: bold;
	padding: 10px 0;
	font-size: 1.1rem;
}
.lower_visual h2 span{
	font-size: 1.8rem !important;	
}
.lower_visual .title_image{
	position: absolute;
	width: 150px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.service_list .lower_visual .title_image{/*サービス一覧*/
	width: 200px;
	bottom: 20px;
}
.web .lower_visual .title_image{/*ホームページ制作*/
	width: 250px;
	bottom: 20px;
}
.movie .lower_visual .title_image{/*動画制作*/
	width: 150px;
	bottom: 20px;
}
.sns_ad .lower_visual .title_image{/*SNS広告運用*/
	width: 150px;
	bottom: 20px;
}
.sns_marketing .lower_visual .title_image{/*SNS広告運用*/
	width: 150px;
	bottom: 20px;
}
.sns_marketing .lower_visual .title_image{/*SNSアカウント運用*/
	width: 150px;
	bottom: 20px;
}
.offline_ad .lower_visual .title_image{/*SNSアカウント運用*/
	width: 100px;
	bottom: 20px;
}
.works .lower_visual .title_image{/*制作実績*/
	width: 230px;
	bottom: 30px;
}
.blog_page .lower_visual_inner{
	padding-top: 30px;
}
.lower_visual .breadcrumb .inner_wrap{
	display: none;
}
.lower_visual .breadcrumb{
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #fff;
	padding: 40px 0 0 0;
	height: 30px;
}

.lower_visual .breadcrumb.img_none{
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #fff;
	padding: 40px 0 0 0;
	height: 0px;
}
/*
.sns_ad .lower_visual .breadcrumb{
	background-color: var(--bg_blue);
}
*/
.lower_visual .breadcrumb ol li{
	display: inline-block;
	background: none;
	font-size: 0.7rem;
	color: var(--navy);
}
.lower_visual .breadcrumb ol li:after{
	content: "/";
	color: var(--navy);
	display: inline-block;
	margin: 0 5px;
}
.lower_visual .breadcrumb ol li:last-child:after{
	content: none;
}
.lower_visual .breadcrumb ol li a{
	font-size: 0.7rem;
	color: var(--navy);
}
.lower_visual .breadcrumb ol li.top a img{
	width: 10px;
	height: auto;
	vertical-align: middle;
}
.lower_visual .catch{
	font-weight: bold;
}
/*このような課題を解決します*/
.lower_top_lead{
	margin-bottom: 20px;
}
.lower_top_lead h2{
	font-weight: bold;
	padding-top: 1.2rem;
	text-align: center;
	margin-bottom: 20px;
}
.lower_top_lead h2 span{
	font-size: 1.5rem;
}
.lead{/*旧*/
	padding-top: 20px;
}
.lower_top_problem{
	background-color: var(--bg_blue);
	padding: 30px 0;
	margin-top: 20px;
}
.lower_top_problem ul li .list_inner{
	padding: 20px 10%;
	text-align: left;
	width: 70%;
	max-width: 300px;
	margin: 0 auto;
	margin-bottom: 20px;	
}
.lower_top_problem ul li .list_inner img{
	display: none;
}
.web .lower_top_problem ul li .list_inner._1{
	background: url(../images/common/problem/icon_6.svg) 90% 100% no-repeat;
	background-size: 65px auto;
	background-color: #fff;
}
.web .lower_top_problem ul li .list_inner._2{
	background: url(../images/common/problem/icon_3.svg) 90% 100% no-repeat;
	background-size: 65px auto;
	background-color: #fff;
}
.web .lower_top_problem ul li .list_inner._3{
	background: url(../images/common/problem/icon_7.svg) 90% 100% no-repeat;
	background-size: 57px auto;
	background-color: #fff;
}

.movie .lower_top_problem ul li .list_inner._1{
	background: url(../images/common/problem/icon_4.svg) 90% 100% no-repeat;
	background-size: 55px auto;
	background-color: #fff;
}
.movie .lower_top_problem ul li .list_inner._2{
	background: url(../images/common/problem/icon_5.svg) 90% 100% no-repeat;
	background-size: 65px auto;
	background-color: #fff;
}
.movie .lower_top_problem ul li .list_inner._3{
	background: url(../images/common/problem/icon_8.svg) 90% 100% no-repeat;
	background-size: 60px auto;
	background-color: #fff;
}

.sns_ad .lower_top_problem ul li .list_inner._1{
	background: url(../images/common/problem/icon_4.svg) 90% 100% no-repeat;
	background-size: 55px auto;
	background-color: #fff;
}
.sns_ad .lower_top_problem ul li .list_inner._2{
	background: url(../images/common/problem/icon_1.svg) 90% 100% no-repeat;
	background-size: 65px auto;
	background-color: #fff;
}
.sns_ad .lower_top_problem ul li .list_inner._3{
	background: url(../images/common/problem/icon_9.svg) 90% 100% no-repeat;
	background-size: 65px auto;
	background-color: #fff;
}

.sns_marketing .lower_top_problem ul li .list_inner._1{
	background: url(../images/common/problem/icon_2.svg) 90% 100% no-repeat;
	background-size: 60px auto;
	background-color: #fff;
}
.sns_marketing .lower_top_problem ul li .list_inner._2{
	background: url(../images/common/problem/icon_7.svg) 90% 100% no-repeat;
	background-size: 55px auto;
	background-color: #fff;
}
.sns_marketing .lower_top_problem ul li .list_inner._3{
	background: url(../images/common/problem/icon_5.svg) 90% 100% no-repeat;
	background-size: 65px auto;
	background-color: #fff;
}

.lower_top_problem ul li:last-child .list_inner{
	margin-bottom: 0;
}
.lower_top_problem ul li p{
	font-weight: bold;	
	color: var(--navy);
}











/*薄い青背景*/
.bg_blue{
	background-color: var(--bg_blue);
	padding-bottom: 50px;
}
/*薄い青背景+ボトム白波*/
.bg_blue_wave{
  background: url(../images/common/wave_white.svg) 50% 100.1% no-repeat;
 	background-size: 100% auto;
	background-color: #f6f8fe;
	padding-bottom: 50px;

}
/*このような課題を解決します*/
.problem{/*旧*/
	padding-bottom: 50px;
}
.problem h2{/*旧*/
	color: #000;
	font-weight: bold;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.5;
	padding: 50px 0;
}
/*白から青グラデ背景+ボトム白波*/
/*
.grad_white_blue_bottom_wave{
  background: url(../images/common/wave_white.svg) 50% 100.1% no-repeat,
  						-moz-linear-gradient(top, #fff 0% , #e0eaf7);
  background: url(../images/common/wave_white.svg) 50% 100.1% no-repeat,
  						-webkit-linear-gradient(top, #fff 0%, #e0eaf7);
  background: url(../images/common/wave_white.svg) 50% 100.1% no-repeat,
  						linear-gradient(to bottom, #fff 0%, #e0eaf7);
	
	background-size: 100% auto,100% auto;
}
*/
.problem ul li{/*旧*/
	background-color: #fff;
	border: 2px solid #0768ac;
	border-radius: 10px;
	padding: 30px;
	text-align: left;
	position: relative;
	max-width: 350px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.problem ul li img{/*旧*/
	width: auto;
	height: 70px;
	position: absolute;
	right: 10px;
	bottom: 0px;
	width: 70px;
}
/*白背景＋ドロップシャドウ*/
.frame{
	/*box-shadow: 0px 0px 10px #acc6e2;	*/
	border: 1px solid  var(--l_light_gray);
	margin-bottom: 30px;
	background-color: #fff;
}
.frame .target_group ul li{
	border: none;
}
.frame h3{
	color: var(--navy);
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 20px;
}
.frame .txt_area{
	padding: 20px;	
}
/*
.frame .icon_area{
	width: 100%;
	height: 200px;
  background: url(../images/common/circle_t_b_w.svg) 50% 100% no-repeat,
  						-moz-linear-gradient(bottom, #f1f8fd 0% , #e0eaf7);
  background: url(../images/common/circle_t_b_w.svg) 50% 100% no-repeat,
  						-webkit-linear-gradient(bottom, #f1f8fd 0%, #e0eaf7);
  background: url(../images/common/circle_t_b_w.svg) 50% 100% no-repeat,
  						linear-gradient(to top, #f1f8fd 0%, #e0eaf7);
}
*/
.frame .icon_area img{
	height: 110px;
	margin-top: 40px;
	/*filter: drop-shadow(0 3px 5px #7595c6);*/
}




/*10万円から*/
.grad_nany{
  background: linear-gradient(90deg, #5d72a9 0%, #112a91 60%, #0c258f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flow dl{
	position: relative;
}
.flow dl:after{
	position: absolute;
	bottom: -20px;
	content: "";
	background: url(../images/common/arrow_n_b.svg) no-repeat;
	background-size: 10px auto;
	width: 10px;
	height: 10px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.flow dl:last-child:after{
	background: none;
}
.flow dl dt .robot{
	font-weight: 300;
	vertical-align: -2px;
	font-size: 1.5rem;
	margin-right: 10px;
}
.flow dl dt{
	color: var(--blue);
	background: url(../images/common/plus.svg) 95% 50% no-repeat;
	background-size: 10px auto;
	background-color: #ecf2fa;
	padding: 7px 10px;
	font-size: 0.9rem;
	transition: all 0.5s 0s ease-in-out;
}
.flow dl dt.active{
	background: url(../images/common/minus.svg) 95% 50% no-repeat;
	background-size: 10px auto;
	background-color: #ecf2fa;
	padding: 10px 10px 10px 10px;
}
.flow dl dd{
	background: url(../images/common/circle_tb_b.svg) 50% 0 no-repeat;
	background-size: 100% auto;
	padding: 7px 10px 10px 10px;
	font-size: 0.9rem;
	display: none;
}
.price table{
	width: 100%;
	margin: 20px 0 10px;
	text-align: center;
}
.price table tr{
	border-top: 1px solid #99aed5;
}
.price table tr:last-child{
	border-bottom: 1px solid #99aed5;
}
.price table th,
.price table td{
	padding: 5px 0;
	font-size: 0.9rem;
	color: var(--navy);
}
.qa{
	paddin-bottom: 20px;
}
.qa dl,
.faq dl{
	margin-bottom: 20px;
}
.faq dl:last-child{
	margin-bottom: 0;
}
.qa dl dt:hover,
.faq dl dt:hover{
	cursor: pointer;
}
.qa dl dt,
.faq dl dt{
	background: url(../images/common/question_icon.svg) 15px 50% no-repeat;
	background-size: 20px auto;
	background-color: var(--bg_blue);
	font-weight: bold;
	padding: 15px 40px 15px 50px;
	/*border-radius: 50px;*/
	font-size: 0.9rem;
	transition: all 0.5s 0s ease-in-out;

	position: relative;
}
.faq dl dt:after{
	position: absolute;
	content: "+";
	font-weight: bold;
	font-size: 1.2rem;	
	right: 10px;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);	
}
.faq dl dt.active:after{
	content: "−";  /* 開いたらマイナス */
}
/*
.qa dl dt.active,
.faq dl dt.active{
	background: url(../images/common/question_icon.svg) 15px 50% no-repeat,
	url(../images/common/arrow_n_t.svg) 95% 50% no-repeat;
	background-size: 20px auto,10px auto;
	background-color: #f6f8fe;
}
*/
.qa dl dd,
.faq dl dd{
	/*background: url(../images/common/a_icon.svg) 15px 50% no-repeat;*/
	background-size: 17px auto;
	padding: 10px 10px 10px 10px;
	display: none;
	font-size: 1rem;
}
/********************* works movie web 共通　0 *********************/

.works .frame .movie_inner{
	padding:  10px;
}
.project .frame a,
.case .frame a,
.works .frame.web a{
	display: block;
	padding: 10px;
	background: url(../images/common/arrow_n_r_2.svg) 95% 95% no-repeat;
	background-size: 15px auto;	
}
.works .frame.web .site_image{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.works .frame.web .site_image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.works .movie .yt-variable,
.movie .price .yt-variable{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie .works .frame .yt-variable iframe,
.movie .price .frame .yt-variable iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.works .yt-variable{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.works .frame .yt-variable iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.works .frame .works_txt_area{
	padding-top: 5px;
}
.works .frame .works_txt_area .project,
.works .frame .works_txt_area .category{
	color: var(--blue);	
	font-weight: bold;
}
.works .frame .works_txt_area .client{
	color: var(--gray);
	margin-bottom: 0px;
	font-size: 0.9rem;
	line-height: 1.5;
	font-weight: bold;
}
.works .frame .works_txt_area .time{
	display: inline-block;
	line-height: 1;
	color: var(--blue);
	font-size: 0.9rem;
	margin-right: 5px;
	position: relative;
}
.works .frame .works_txt_area .time:before{
	position: absolute;
	top: 0;
	left: -17px;
	content: "";
	background: url(../images/common/time.svg) no-repeat;
	background-size: 15px auto;
	width: 15px; 
	height: 15px;
}
.works .frame .works_txt_area .time span{
	font-size: 0.7rem;
}
.works .frame .works_txt_area .business{
	line-height: 1;
	color: var(--blue);
	border: 1px solid var(--blue);
	border-radius: 2px;
	padding: 3px;
	font-size: 0.8rem;
}
.works .frame  .works_txt_area .task li{
	display: inline-block;
	background-color: #ecf2fa;
	color: #4f5b81;
	line-height: 1;
	border-radius: 10px;
	font-size: 0.8rem;
	padding: 3px 7px;
	margin-right: 10px;
}
.works .frame  .works_txt_area .txt{
	color: #4f5b81;
	font-size: 0.9rem;
	line-height: 1.7;
}

/********************* movie web 共通　0 *********************/
/*
.movie .price .frame,
.web .price .frame{
	padding: 10px;
}
*/

/********************* web 0 *********************/
/******************** movie 0 *********************/
/*トップページのweb_planに共通CSSあり注意*/
.web h2,
.movie h2{
	font-weight: bold;
	padding-top: 1.2rem;
	text-align: center;
	margin-bottom: 20px;
}
.web h2 span,
.movie h2 span{
	font-size: 1.5rem;
}
.web .plan {
	padding: 50px 0; 
}
.web .web_plan .feature{
	display: inline-block;
}
.web .web_plan .feature li{
	border: none;
	font-size: 0.8rem;
	text-align: left;
	margin-bottom: 5px;
	line-height: 1;

}
.web .web_plan .plan_item .feature li:before{
	content: "";
	display: inline-block;
	background: url(../images/common/check_icon_gray.svg) no-repeat;
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	vertical-align: -2px;
	margin-right: 3px;
}
.web .web_plan .plan_item._2 .feature li:before{
	background: url(../images/common/check_icon_navy.svg) no-repeat;	
}
.web .web_plan .plan_item .detail {
  display: block;
  margin: 10px auto;   /* dl 全体を中央寄せ */
  text-align: left;  /* まず dt を中央に */
  max-width: 280px;    /* 中央に寄せたい幅を制御（お好みで） */
}
.web .web_plan .plan_item .detail dt {
	font-size: 0.8rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  text-align: left; 
  display: inline-block;
}
.web .web_plan .plan_item .detail dt span{
  border: 1px solid var(--gray);	
   padding: 2px 10px;
}
.web .web_plan .plan_item .detail dd {
  margin: 0;
  text-align: left;    /* 内容は左寄せ */
 	font-weight: bold;
 	letter-spacing: 2px;
 	font-size: 1.2rem;
}
.web .web_plan  .plan_item .about{
	background-color: var(--bg_gray);
	padding: 20px 10px;
}
.web .web_plan  .plan_item._2 .about{
	background-color: var(--bg_blue);
	padding: 20px 10px;
}
.web .web_plan  .plan_item .about ul li{
	border: none;
	text-align: left;
	text-indent: -1rem;
	padding-left: 1rem;
	margin-bottom: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	margin-bottom: 5px;

}
.web .web_plan .about ul li:last-child{
	margin-bottom: 0;
}
.web .web_plan .about h5{
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: bold;
	text-align: left;
	margin: 0 0 10px 10px;

}
.web .web_plan .cta_btn{
	margin: 30px 0 10px;
}
/********　特典　************/
/********「動画を制作します」から下****/
.web .plan .plan_bonus .bonus_price_inner{
	font-weight: bold;
	display: inline-block;
	text-align: left;
	margin: 10px 0;
}
.web .plan .plan_bonus .bonus_price{
	text-align: center;
}
.web .plan .plan_bonus .bonus_price p{
	font-weight: bold;
}
.web .plan .plan_bonus .bonus_btn{
	text-align: center;
}
.web .plan .plan_bonus .bonus_detail{
	display: none;
}
.web .plan .plan_bonus .plan_name{
	font-size: 1.1rem;
}
.web .plan_bonus .bonus_btn{
	font-size: 0.9rem;
	line-height: 1.5;
	border: 1px solid var(--l_light_gray);
	border-radius: 15px;
	width: 150px;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 20px;
	position: relative;
	cursor: pointer;
}

.web .plan_bonus .bonus_btn:after{
	position: absolute;
	content: "+";
	font-weight: bold;
	font-size: 1.2rem;	
	right: 10px;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);	
}
.web .plan_bonus .bonus_btn.active:after{
	content: "−";  
}

.web .plan_bonus .bonus_detail_inner{
	background-color: #fff;
	padding: 0 10px;
	max-width: 450px;
}
.web .plan_bonus .bonus_detail table {
  border-collapse: separate;
  border-spacing: 0 10px; 

}
.web .plan_bonus .bonus_detail table tr{
	margin-bottom: 10px;

}
.web .plan_bonus .bonus_detail table th{
	background-color: var(--bg_gray);
	color: var(--navy);
  font-size: 0.9rem;
  line-height: 1.5;
  width: 25%;
  vertical-align: middle;
}
.web .plan_bonus .bonus_detail table th span{
  font-size: 0.7rem;	
  line-height: 1.5;
}
.web .plan_bonus .bonus_detail table td{
  font-size: 0.9rem;	
  line-height: 1.5;
  width: 75%;
  padding-left: 5px;
  vertical-align: middle;
}
/********　プラン共通サービス　************/
.web .common_services{
	background: var(--bg_blue);
	padding: 50px 0; 
}
.web .common_services .lead{
	margin-bottom: 20px;
}
.web .common_services .ul_wrap{
	background-color: #fff;
	padding: 20px;
}
.web .common_services ul li{
	margin-bottom: 20px;
}
.web .common_services ul.second li:last-child{
	margin-bottom: 0;
}
.web .common_services ul li h3{
	color: var(--navy);
	font-weight: bold;
}
.web .common_services ul li.list_2 h3,
.web .common_services ul li.list_5 h3,
.web .common_services ul li.list_9 h3{
	font-feature-settings: "palt";	
} 
.web .common_services ul li h3 span{
	font-size: 0.8rem;
}
.web .common_services ul li h3:before{
	content: "";
	display: inline-block;
	background: url(../images/common/check_icon_navy.svg) no-repeat;
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	margin-right: 5px;
	vertical-align: -1px;
}
.web .common_services ul li p{
	padding-left: 1.3rem;
}
.web .common_services .common_btn{
	cursor: pointer;
	font-weight: bold;
	font-size: 1.2rem;
}
.web .common_services .common_services_txt{
	display: none;
}
.web .cta_section{
	background: url(../images/web/web_cta_plus.jpg) 60% 50% no-repeat;
	background-size: cover;
	padding: 100px 0;
}
.web .faq{
	padding: 50px 0;
}
/********************* movie 0 *********************/
/********************* テーブルから下 *********************/
.movie .plan .plan_table h4{
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 10px;
}
.movie .plan .plan_table .table_wrap{
	width: 100%;         /* コンテナは100% */
  overflow-x: auto;    /* 横スクロールを有効に */
  -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
}
.movie .plan .plan_table table{
	width: 690px;
	/*max-width: 1096px;/*pcの幅*/
	border-top: 1px solid var(--gray);
}
.movie .plan .plan_table tr{
	border-bottom: 1px solid var(--gray);
}
.movie .plan .plan_table table th,
.movie .plan .plan_table table td{
	border-left: 1px solid var(--gray);
	border-right: 1px solid var(--gray);
	text-align: center;
	vertical-align: middle;
	padding: 5px 10px;
	font-size: 0.9rem;
	line-height: 1.5;

}
.movie .plan .plan_table table th br{
	display: block;
}
.movie .plan .plan_table table .plan_spec td{
	text-align: left;
	vertical-align: top;
}
.movie .plan .plan_table .item{
	width: 19%;
	background-color: var(--bg_gray);
}
.movie .plan .plan_table .plan{
	width: 27%;
}
.movie .plan .plan_table th{
	background-color: var(--bg_gray);
}
.movie .plan .plan_table .plan{
	background-color: var(--l_light_gray);
	color: #fff;
}
.movie .plan .plan_table .plan._2{
	background-color: var(--navy);

}
.movie .plan .plan_table td:nth-child(3){
	background-color: var(--bg_blue);	
	color: var(--navy);
}
.movie .plan .plan_table table td.option{
	text-align: left;
	text-indent: -1rem;
	padding-left: 1rem;
	padding: 10px 30px;
	font-size: 0.9rem;
	line-height: 1.5;
}
.movie .plan .plan_table table td.option p{
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 5px;	
}
.movie .plan .plan_table table .note{
	border: none;
}
.movie .plan .plan_table table .note td{
	border: none;
}
.movie .plan .plan_table table .note td p{
	text-align: left;
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 5px;	
	text-indent: -2rem;
	padding-left: 2rem;
}
.movie .plan_works{
	padding: 50px 0 100px;
}
.movie .plan_works .lead{
	margin-bottom: 50px;
}
.movie .plan_works ul li{
	margin-bottom: 50px;
}
.movie .plan_works .yt-variable{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie .plan_works .yt-variable iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.movie .plan_works li h3{
	background-color: var(--light_gray);
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	padding: 5px 0;
}
.movie .plan_works li.list_2 h3{
	background-color: var(--navy);
	color: #fff;
}
.movie .plan_works li.list_2 h3 img{
	width: 35px;
	margin-right: 10px;
	vertical-align: -2px;
}
.movie .plan_works li .client{
	font-size: 0.9rem;
	text-align: center;
	font-weight: bold;
}
.movie .plan_works li .txt{
	font-size: 0.9rem;
	line-height: 1.5;
}
.movie .cta_section{
	background: url(../images/movie/video_cta_plus.jpg) 60% 50% no-repeat;
	background-size: cover;
	padding: 100px 0;
}
/********************* sns_ad 0 *********************/
.sns_ad .sns_ad_contents{
	padding: 50px 0;
}
.sns_ad .sns_ad_contents .contents_list{
	/*max-width: 350px;*/
}
.sns_ad .sns_ad_contents .contents_list li {
	display: inline-block;
	margin: 5px 10px;
}
.sns_ad .sns_ad_contents .contents_list li a{
	/*border: 2px solid var(--navy);*/
	color: var(--navy);
	font-weight: bold;
	font-size: 0.8rem;
	padding: 5px;
	border-radius: 5px;
}
.sns_ad .sns_ad_contents .contents_list._2{
	margin-bottom: 20px;
}
.sns_ad .sns_ad_contents li a:after{
	content: "";
	display: inline-block;
	background: url(../images/common/arrow_n_b.svg) 50% 50%no-repeat;
	background-size: 10px auto;
	width: 10px;
	height: 10px;
	margin-left: 10px;
}
.sns_ad .sns_ad_frame .frame{
	padding: 10px;
	padding-top: 20px;
}
.sns_ad .sns_ad_frame .frame_inner{
	padding: 0 10px;
	margin-bottom: 30px;
}
.sns_ad .sns_ad_frame h3{
	border-bottom: 1px solid var(--navy);
	text-align: center;
}
.sns_ad .sns_ad_frame .frame .txt{
	margin-bottom: 10px;
}
.sns_ad .sns_ad_frame .data{
	text-align: center;
	margin-bottom: 20px;
}
.sns_ad .sns_ad_frame .data cite{
	display: block;
	font-size: 0.6rem;
	line-height: 1.5;
}
.sns_ad .sns_ad_frame img{
	width: 100%;
	max-width: 400px;
	height: auto;
}
.sns_ad .sns_ad_frame .target_group{
	padding: 10px;
}
.sns_ad .sns_ad_frame .target_group .frame:last-child{
	margin-bottom: 0;
}
.sns_ad .sns_ad_frame .target_group h4{
	color: var(--navy);
	font-weight: bold;
	font-size: 1.1rem;
	margin-bottom: 10px;
}
.sns_ad .sns_ad_frame .target_group .frame{
	padding: 20px;
}
.sns_ad .sns_ad_frame .target_group h5{
	color: var(--navy);
	font-weight: bold;
	line-height: 1.5;
	padding-left: 25px;
	margin-bottom: 20px;
}
.sns_ad .sns_ad_frame .frame .data h4{
	color: var(--navy);
	font-weight: bold;
	font-size: 0.7rem;
	line-height: 1.5;
	font-feature-settings: "palt";
}
.sns_ad .sns_ad_frame .frame figure{
	margin-bottom: 10px;
}
.sns_ad .youtube .target_group .frame._1 h5{
	background: url(../images/sns_ad/target/yt_icon_1.svg) 0% 50% no-repeat;
	background-size: 20px auto;
	background-color: #fff;
}
.sns_ad .youtube .target_group .frame._2 h5{
	background: url(../images/sns_ad/target/yt_icon_2.svg) 0% 50% no-repeat;
	background-size: 20px auto;
	background-color: #fff;
}
.sns_ad .youtube .target_group .frame._3 h5{
	background: url(../images/sns_ad/target/yt_icon_3.svg) 0% 50% no-repeat;
	background-size: 15px auto;
	background-color: #fff;
}
.sns_ad .youtube .target_group .frame._4 h5{
	background: url(../images/sns_ad/target/yt_icon_4.svg) 0% 50% no-repeat;
	background-size: 20px auto;
	background-color: #fff;
}
.sns_ad .youtube .yt_ad_btn a{
	display: block;
	background-color: #2d3192;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 10px;
}
.sns_ad .facebook .target_group .frame._1 h5{
	background: url(../images/sns_ad/target/fb_icon_1.svg) 0% 50% no-repeat;
	background-size: 30px auto;
	background-color: #fff;
	padding-left: 40px;
}
.sns_ad .facebook .target_group .frame._2 h5{
	background: url(../images/sns_ad/target/fb_icon_2.svg) 0% 50% no-repeat;
	background-size: 25px auto;
	background-color: #fff;
	padding-left: 40px;
}
.sns_ad .facebook .target_group .frame._3 h5{
	background: url(../images/sns_ad/target/fb_icon_3.svg) 0% 50% no-repeat;
	background-size: 20px auto;
	background-color: #fff;
	padding-left: 40px;
}

.sns_ad .instagram .target_group .frame._1 h5{
	background: url(../images/sns_ad/target/ig_icon_1.svg) 0% 50% no-repeat;
	background-size: 30px auto;
	background-color: #fff;
	padding: 10px 0 10px 40px;
}
.sns_ad .instagram .target_group .frame._2 h5{
	background: url(../images/sns_ad/target/ig_icon_2.svg) 0% 50% no-repeat;
	background-size: 25px auto;
	background-color: #fff;
	padding: 10px 0 10px 35px;
}
.sns_ad .instagram .target_group .frame._3 h5{
	background: url(../images/sns_ad/target/ig_icon_3.svg) 0% 50% no-repeat;
	background-size: 20px auto;
	background-color: #fff;
	padding: 10px 0 10px 30px;
}
.sns_ad .listing .frame .data .comment{
	padding: 20px;
	text-align: left;
	color: #4f5b81;
	margin-bottom: 20px;
}
.sns_ad .listing .frame .data .comment p{
	font-size: 0.9rem;
	text-indent: -1rem;
	padding-left: 1rem;	
	line-height: 1.5;
}
.sns_ad .listing .target_group .frame._1 h5{
	background: url(../images/sns_ad/target/lt_icon_1.svg) 0% 30% no-repeat;
	background-size: 30px auto;
	background-color: #fff;
	padding: 10px 0 10px 40px;
}
.sns_ad .listing .target_group .frame._2 h5{
	background: url(../images/sns_ad/target/lt_icon_2.svg) 0% 50% no-repeat;
	background-size: 25px auto;
	background-color: #fff;
	padding: 10px 0 10px 40px;
}
.sns_ad .price .frame{
	padding: 20px;
}
.sns_ad .price .price_head{
	text-align: center;

}
.sns_ad .price .price_head .top{
	font-size: 0.9rem;
}
.sns_ad .price .price_head .middle span{
	display: inline-block;
	color: #2e3192;
	font-size: 1.1rem;
	line-height: 1;
	border: 1px solid #2e3192;	
	padding: 5px;
}
.sns_ad .price .price_head h3{
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 50px;
}
.sns_ad .price .price_head h3 .l_blue{
	color: #0071bc;
}
.sns_ad .price .price_head h3 .num{
	font-size: 2.5rem;
}
.sns_ad .price .price_table dl{
	display: flex;
}
.sns_ad .price .price_table dt,
.sns_ad .price .price_table dd{
	border-top: 1px solid #99aed5;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--navy);
	display: flex;
	align-items: center;
	padding: 10px 0;
}
.sns_ad .price .price_table dt{
	width: 45%;
}
.sns_ad .price .price_table dd{
	width: 55%;	
			justify-content: center;
}
.sns_ad .price .price_table .dl_4 dt,
.sns_ad .price .price_table .dl_4 dd{
	border-bottom: 1px solid #99aed5;
}
.sns_ad .price .price_table .dl_2 dd{
	display: block;
}
.sns_ad .price .price_table .dl_2 .rate{
	font-weight: bold;
	text-align: center;
}
.sns_ad .price .price_table .dl_2 .rate span{
	font-size: 2rem;
}
.sns_ad .price .price_table .dl_2 .notes{
	font-size: 0.7rem;
	line-height: 1.5;
}
.sns_ad .price .price_table .dl_3 dd,
.sns_ad .price .price_table .dl_4 dd{
	color: #c1272d;
}
.sns_ad .price .price_table .dl_3 dd span,
.sns_ad .price .price_table .dl_4 dd span{
	font-size: 2rem;
}
.sns_ad .price .caution{
	margin-top: 5px;
	margin-bottom: 30px;
}
.sns_ad .price .caution p{
	margin-bottom: 5px;
}
.sns_ad .price .caution p,
.sns_ad .price .caution p a{
	font-size: 0.8rem;
	line-height: 1.5;
}

.sns_ad .price .compare{
	padding: 10px;
}
.sns_ad .price .compare h3{
	text-align: center;
	margin-bottom: 10px;
}
.sns_ad .price .compare table{
	width: 100%;
	background-color: #fff;
}
.sns_ad .price .compare table tr{
	padding: 0;
}
.sns_ad .price .compare table .tr_1{
	border-top: none;
	padding: 0;
}
.sns_ad .price .compare table .tr_1 th{
	padding: 0;
}
.sns_ad .price table th:first-child{
	padding: 0;
}
.sns_ad .price .compare th,
.sns_ad .price .compare td{
	line-height: 1.5;
 vertical-align: middle;
}
.sns_ad .price .compare th{
	border-top: none;
}
.sns_ad .price .compare .th_1 div{
	background-color: var(--navy);
	margin: 5px;
	color: #fff;
}
.sns_ad .price .compare .th_2 div{
	background-color: #8b93ac;
	margin: 5px;
	color: #fff
}
.sns_ad .faq{
	padding: 50px 0;
}
/********************* sp_tools 0 *********************/
.sp_tools .lead{
	padding-bottom: 50px;
}
.sp_tools .tool_list{
		padding: 30px 0;
}
.sp_tools .tool_list ul li{
	padding: 20px;
}
.sp_tools .tool_list ul li h2{
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--navy);
	margin-bottom: 20px;
}
.sp_tools .tool_list ul li h2 img{
	width: 20px;
	height: auto;
	margin-right: 5px;
	vertical-align: -2px;
}
/********************* offline_ad 0 *********************/
.offline_ad .lead{
	padding-bottom: 50px;
}
.offline_ad .ad_list{
		padding: 30px 0;
}
.offline_ad .ad_list .frame_inner{
	padding: 20px;	
}
.offline_ad .ad_list ul li h2{
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--navy);
	margin-bottom: 20px;
}
.offline_ad .ad_list ul li h2 img{
	width: 25px;
	height: auto;
	margin-right: 5px;
	vertical-align: -2px;
}
.offline_ad .ad_list .tools_used{
	padding: 20px;
	background-color: #ecf2fa;
}
.offline_ad .ad_list .tools_used h3{
	font-size: 0.9rem;
	color: #0768ac;
	margin-bottom: 10px;
	line-height: 1;
}
.offline_ad .ad_list .tools_used ul li{
	display: inline-block;
	background-color: #fff;
	color: #0768ac;
	border-radius: 10px;
	border:1px solid #0768ac;
	font-size: 0.8rem;
	line-height: 1;
	padding: 3px 10px;
	letter-spacing: -0.5px;
	margin-right: 5px;
}
/********************* sns_ad youtube 0 *********************/
/***************** splide 0 *******************/
.side_loop_splide .splide{
	padding-top: 30px;
}
.side_loop_splide .splide_inner{
	position: relative;
}
.side_loop_splide .splide__track{
	padding-top: 20px;
}
.side_loop_splide .splide__arrows{
	position: absolute;
	bottom: 20px;
	left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
	z-index: 5;
  width: 95%;
  text-align: center;
}
.side_loop_splide .splide__arrow--next,
.side_loop_splide .splide__arrow--prev{/*矢印のcssリセット*/
		background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    width: 35px;
    height: 35px;
    background-color: #004bbc;
    border-radius: 50%;
    margin: 0 10px;
}
.side_loop_splide .splide__arrows .arrow_r ,
.side_loop_splide .splide__arrows .arrow_l {
  position: relative;
  display: inline-block;
  width: 7.7px;
  height: 13.3px;
}
.side_loop_splide .splide__arrows .arrow_r::before,
.side_loop_splide .splide__arrows .arrow_r::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 1px) 50%;
}
.side_loop_splide .splide__arrows .arrow_r::before {
  transform: rotate(45deg);
}
.side_loop_splide .splide__arrows .arrow_r::after {
  transform: rotate(-45deg);
}
.side_loop_splide .splide__arrows .arrow_l::before,
.side_loop_splide .splide__arrows .arrow_l::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 1px 50%;
}
.side_loop_splide .splide__arrows .arrow_l::before {
  transform: rotate(45deg);
}
.side_loop_splide .splide__arrows .arrow_l::after {
  transform: rotate(-45deg);
}
/***************** splide 0 *******************/



.youtube .lead{
	padding-top: 0;
}

.youtube section{
	padding: 50px 0 20px;
}
.youtube .type .frame .frame_inner{
	padding: 30px 30px 10px 30px;
}
.youtube .type .image{
	max-width: 300px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.youtube .type .point{
	padding: 10px 30px 30px 30px;
	background-color: #ecf2fa;
}
.youtube .type .point ul li{
	text-indent: -1rem;
	padding-left: 1rem;
}
.youtube .targeting .frex_left h3{
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--navy);
	text-align: center;
	margin-bottom: 10px;
}
.youtube .targeting .frex_left_1 .frame{
	box-shadow: none;
	border: 1px solid var(--navy);
	padding: 10px;
	margin-bottom: 10px;
}
.youtube .targeting .frex_left_1 .frame h4{
	font-weight: bold;
	color: var(--navy);
}
.youtube .targeting .frex_left_1 .frame li{
	display: inline-block;
}
.youtube .targeting .frex_right h3{
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--blue);
	text-align: center;
	margin-bottom: 10px;
}
.youtube .targeting .frex_right .frame{
	box-shadow: none;
	border: 1px solid var(--blue);
	padding: 10px;
	margin-bottom: 10px;
}
.youtube .targeting .frex_right .frame h4{
	font-weight: bold;
	color: var(--blue);
}
.youtube .targeting .frex_left_1 .frame p.note,
.youtube .targeting .frex_right .frame p.note,
.youtube .targeting .note{
	font-size: 0.7rem;
	line-height: 1.5;
}
.youtube .targeting .frex_right .bg_l_blue{
	background-color: #ecf2fa;
	padding: 10px;
	margin-bottom: 10px;
}
.youtube .targeting .frex_right .bg_l_blue:last-child{
	margin-bottom: 0;
}
.youtube .targeting .frex_right h5{
	color: var(--blue);
	font-weight: bold;
}
.youtube .targeting .frex_right .audience ul li p,
.youtube .targeting .frex_right .custom ul li p{
	font-size: 0.9rem;
}
.youtube .operation .frame{
	padding: 20px;
}
.youtube .operation .frame .item{
	margin-bottom: 20px;
	padding: 10px;
}
.youtube .operation .frame .item:last-child{
	margin-bottom: 0;
}
.youtube .operation .frame h3{
	display: inline-block;
	border: 1px solid var(--navy);
	border-radius: 50px;
	line-height: 1;
	padding: 7px 20px;
	background-color: #fff;
	margin-bottom: 10px;
}
.youtube .operation .point_frame{
	background-color: #ecf2fa;
	padding: 10px;
}
.youtube .operation .point_frame .point_inner{
	display: inline-block;
	background-color: #fff;
	border-radius: 10px;
	line-height: 1;
	padding: 5px 10px;
}
.youtube .operation .point_frame ul li{
	color: var(--blue);
	text-indent: -1rem;
	padding-left: 1rem;
}
.youtube .operation .point_frame .example{
	color: var(--gray);
	font-size: 0.9rem;
	line-height: 1.7;
}
.youtube .case .frame{
	padding: 20px;
}
.youtube .case .photo img{
	width: 100%;
	height: 150px;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 15px;
}
.youtube .case .case_list{
	margin-bottom: 15px;
}
.youtube .case .case_list dt{
	display: inline-block;
	color: var(--navy);
	line-height: 1;
	border: 1px solid var(--navy);
	padding: 3px  10px;
	border-radius: 20px;
	font-size: 0.8rem;
	margin-bottom: 5px;
}
.youtube .case .case_list dd{
	line-height: 1;
	margin-left: 5px;
	font-size: 0.9rem;
	margin-bottom: 5px;
}
.youtube .case .cell_wrap{
	display: flex;
	flex-wrap: wrap;
}
.youtube .case .cell{
	width: 33.33%;
	text-align: center;
	border-top: 1px solid var(--blue);

}
.youtube .case .cell:nth-child(n+4){
	border-bottom: 1px solid var(--blue);
}
.youtube .case .case_list{
	margin-top: 10px;	
}
.youtube .case .cell_dt{
	background-color: #f6f8fe;
	color: var(--blue);
	font-size: 0.8rem;
}
.youtube .case .point{
	margin-top: 10px;
	font-size: 0.9rem;
	line-height: 1.5;
}
.youtube .report ul{
	margin-top: 20px;
}
.youtube .report li{
	border: 1px solid var(--navy);
	padding: 20px;
	margin-bottom: 20px;
}
.youtube .report h3{
	font-weight: bold;
	padding: 0 0 20px;
	color: var(--navy);

}
.youtube .report h3 img{
	width: 30px;
	margin-right: 10px;
	vertical-align: -4px;
}
.youtube .analytics_report{
	padding: 20px;
}
.youtube .analytics_report h2{
	font-weight: bold;
	color: var(--blue);
	font-size: 1.1rem;
	line-height: 1.5;
	margin-bottom: 20px;
}
.youtube .analytics_report li{
	border: none;
}
.youtube .analytics_report h3{
	font-weight: bold;
	padding: 0 0 10px;
	color: var(--blue);
 margin-bottom: 0;
 font-size: 0.9rem;
}
.youtube .analytics_report h3 img{
	width: 25px;
	margin-right: 5px;
}
.youtube .analytics_report p{
	font-size: 0.9rem;
	line-height: 2;
}
.youtube .analytics_report .iphone{
	background-color: #ecf2fa;
	padding: 20px;
}
.youtube .analytics_report .iphone p{
	font-size: 0.8rem;
}
.youtube .analytics_report .iphone h4{
	color: var(--blue);
	font-weight: bold;
	font-size: 0.9rem;
}
.youtube .analytics_report .bottom{
	margin-top: 20px;
}
.youtube .analytics_report .bottom p{
	font-size: 0.8rem;
	line-height: 2;
}
/********************* sns_marketing 0 *********************/
.sns_marketing .service{
	padding: 50px 0;
}
.sns_marketing .service .support{
	color: var(--navy);
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 20px;
}
.sns_marketing .service .frame{
	padding: 20px;
	border: none ;
}
.sns_marketing .service figure{
	margin-bottom: 20px;
	text-align: center;
}
.sns_marketing .service figure img{
	width: 100%;
	max-width: 400px;
	height: auto;
}
.sns_marketing .service cite{
	display: block;
	font-size: 0.6rem;
	line-height: 1.5;
}
.sns_marketing .service ul li{
	border: 1px solid var(--navy);
	padding: 20px;
	margin-bottom: 20px;
}
.sns_marketing .service ul li h3{
	margin-bottom: 10px;
}
.sns_marketing .service ul li a{
	margin-top: 20px;
	display: block;
	font-size: 0.8rem;
	line-height: 1.5;
	font-weight: bold;
	color: var(--navy);
}
.sns_marketing .service ul li a:after{
	content: "";
	display: inline-block;
	background: url(../images/common/arrow_n_r.svg) no-repeat;
	background-size: 7px auto;
	width: 12px;
	height: 12px;
	vertical-align: -1px;
	margin-left: 5px;
}
.sns_marketing .feature{
	padding: 50px 0;
}
.sns_marketing .feature .frame ul li{
	border: 1px solid var(--navy);
}
.sns_marketing .feature h3{
	padding: 1% 0 0 3%;
}
.sns_marketing .feature .frame_inner{
	padding: 10px;
}
.sns_marketing .feature .feature_list li{
	margin-bottom: 20px;
}
.sns_marketing .feature .feature_list li:last-child{
	margin-bottom: 0;
}
.sns_marketing .feature .feature_list{
	padding: 10px;
}
.sns_marketing .feature .frame.list{
	padding: 20px;
}
.sns_marketing .feature .frame.list h4{
	font-weight: bold;
	color: var(--navy);
	padding-left: 35px;
	margin-bottom: 10px;
}
/************************** line *********************************/
.sns_marketing .feature .line .frame.list._1 h4{
	background: url(../images/sns_marketing/line_1.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .line .frame.list._2 h4{
	background: url(../images/sns_marketing/line_2.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .line .frame.list._3 h4{
	background: url(../images/sns_marketing/line_3.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .line .frame.list._4 h4{
	background: url(../images/sns_marketing/line_4.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
/************************** youtube *********************************/
.sns_marketing .feature .youtube .frame.list._1 h4{
	background: url(../images/sns_marketing/yt_1.svg) 0 50% no-repeat;
	background-size: 28px auto;
}
.sns_marketing .feature .youtube .frame.list._2 h4{
	background: url(../images/sns_marketing/yt_2.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .youtube .frame.list._3 h4{
	background: url(../images/sns_marketing/yt_3.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .youtube .frame.list._4 h4{
	background: url(../images/sns_marketing/yt_4.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .youtube .frame.list._5 h4{
	background: url(../images/sns_marketing/yt_5.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .youtube .frame.list._6 h4{
	background: url(../images/sns_marketing/yt_6.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
/************************** instagram *********************************/
.sns_marketing .feature .instagram .frame.list._1 h4{
	background: url(../images/sns_marketing/ig_1.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .instagram .frame.list._2 h4{
	background: url(../images/sns_marketing/ig_2.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .instagram .frame.list._3 h4{
	background: url(../images/sns_marketing/ig_3.svg) 0 50% no-repeat;
	background-size: 20px auto;
}
.sns_marketing .feature .instagram .frame.list._4 h4{
	background: url(../images/sns_marketing/ig_4.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .instagram .frame.list._5 h4{
	background: url(../images/sns_marketing/ig_5.svg) 0 50% no-repeat;
	background-size: 28px auto;
}
.sns_marketing .feature .instagram .frame.list._6 h4{
	background: url(../images/sns_marketing/ig_6.svg) 0 50% no-repeat;
	background-size: 28px auto;
}
.sns_marketing .feature .instagram .frame.list._7 h4{
	background: url(../images/sns_marketing/ig_7.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
/************************** facebook *********************************/
.sns_marketing .feature .facebook .frame.list._1 h4{
	background: url(../images/sns_marketing/fb_1.svg) 0 50% no-repeat;
	background-size: 20px auto;
}
.sns_marketing .feature .facebook .frame.list._2 h4{
	background: url(../images/sns_marketing/fb_2.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .facebook .frame.list._3 h4{
	background: url(../images/sns_marketing/fb_3.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .facebook .frame.list._4 h4{
	background: url(../images/sns_marketing/fb_4.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .facebook .frame.list._5 h4{
	background: url(../images/sns_marketing/fb_5.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .facebook .frame.list._6 h4{
	background: url(../images/sns_marketing/fb_6.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
.sns_marketing .feature .facebook .frame.list._7 h4{
	background: url(../images/sns_marketing/fb_7.svg) 0 50% no-repeat;
	background-size: 25px auto;
}
/***********************************************************************/
.sns_marketing .feature .frame .scene{
	background-color: #ecf2fa;
	padding: 20px;
}
.sns_marketing .feature .frame .scene h5{
	color: var(--blue);
	font-weight: bold;
	padding: 10px 0;
	padding-left: 60px;
	background: url(../images/sns_marketing/scene.svg) 0 50% no-repeat;
	background-size: 50px auto;
	margin-bottom: 10px;
}
.sns_marketing .feature .frame .scene ul li{
	font-size: 0.9rem;
	line-height: 1;
	color: var(--blue);
	background-color: #fff;
	border: 1px solid var(--blue);	
	border-radius: 20px;
	padding: 5px 10px;
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 10px;
}
.sns_marketing .feature .frame .scene ul li:last-child{
	margin-bottom: 0;
}
.sns_marketing .price{
	padding: 50px 0;
}
.sns_marketing .price .table_wrap{
	 overflow: scroll;
}
.sns_marketing .price .frame{
	padding: 20px;
}
.sns_marketing .price table{
	width: 810px;
	margin: 0;
}
.sns_marketing .price table th,
.sns_marketing .price table td{
	line-height: 1.5;
}
.sns_marketing .price table td{
	width: 220px;
	padding: 10px;
	vertical-align: middle;
	line-height: 1.5;
	color: var(--gray);
}
.sns_marketing .price table .tr_plan .plan{
	font-weight: bold;
	padding: 20px 0;
}
.sns_marketing .price table .tr_price td{
	padding: 20px 0;
}
.sns_marketing .price table td.start_cost{
	padding: 0;	
}
.sns_marketing .price table .tr_plan{
	position: relative;	
}
.sns_marketing .price table .start_cost .start_head{
	widht: 20%;
}
.sns_marketing .price table .start_cost .start_price{
	widht: 35%;	
}
.sns_marketing .price table .start_cost .start_txt{
	width: 45%;
	text-align: left;
}
.sns_marketing .price table th{
	width: 150px;
	vertical-align: middle;	
	font-weight: bold;
}
.sns_marketing .price table .tr_create th span{
	display: block;
	line-height: 1.5;
	font-weight: 100;
}
.sns_marketing .price table td span{
	letter-spacing: 0px;
	font-feature-settings: "palt";

}
.sns_marketing .price table td:nth-child(2),
.sns_marketing .price table td:nth-child(4){
	background-color: #f6f8fe;
}
.sns_marketing .price table .tr_top{
	border-top: none;
}
.sns_marketing .price table .tr_top td:nth-child(2),
.sns_marketing .price table .tr_top td:nth-child(4){
	background: none;
}
.sns_marketing .price .bottom_note p,
.sns_marketing .price .bottom_note p a{
	font-size: 0.8rem;
	line-height: 1.5;
	text-indent: -1rem;
	padding-left: 1rem;
}
.sns_marketing .price .bottom_note p a{
	padding: 0;
	text-decoration: underline;
}
.sns_marketing .price table .tr_top .catch_inner{
	position: relative;
	display: inline-block;
	position: relative;
	background-color: #cbdef2;
	color: var(--blue);
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 5px 10px;
	font-weight: bold;
}
.sns_marketing .price table .tr_top .catch_inner:after{
	position: absolute;
	bottom: -7px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	content: "";
	border-top: 10px solid #cbdef2;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.sns_marketing .price .option{
	margin-top: 20px;
}
.sns_marketing .price .option h3{
	margin-bottom: 0;
	color: var(--blue);
	font-weight: 500;
	margin-bottom: 10px;
}
.sns_marketing .price .option ul{
	padding: 10px;
}
.sns_marketing .price .option ul li{
	border-bottom: 1px solid var(--blue);
	padding: 10px;

}
.sns_marketing .price .option ul li p{
	font-size: 0.9rem;
	line-height: 2;	
}
.sns_marketing .price .option ul li:last-child{
	border: none;
}
.sns_marketing .price .option  h4{
	color: var(--blue);
	font-size: 0.9rem;
}
.sns_marketing .price .option .option_price{
	text-align: right;
	font-size: 0.9rem;
}
.sns_marketing .faq{
	padding: 50px 0;
}
/********************* works 0 *********************/
/********************* project  0 *********************/
.project h1{
	padding: 30px 0 10px;
	font-weight: bold;
}
.project .task{
	margin-bottom: 30px;
	color: var(--blue);
	font-weight: bold;
}
.project .top_txt{
	margin-bottom: 30px;
}
.project .url{
	margin-bottom: 10px;
}
.project .url a{
	color: var(--blue);
}
.project .frame{
	padding: 10px;
	margin: 30px 0;
}
.project .sugamoekimae .logo .img{
	text-align: center;
	padding: 30px 0;
}
.project .sugamoekimae .logo img{
	width: 150px;
}
.project .button_navy a{
	padding: 10px 50px;
	margin: 50px 0;
}
.project .frame.movie{
	padding: 10px;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.project .yt-variable{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.project .frame .yt-variable iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/********************* company 0 *********************/
.company table{
	width: 100%;
}
.company table tr{
	border-bottom: 1px solid #2e3192;
}
.company table .td_1,
.company table .td_2{
	padding: 8px;
}
.company table .td_1{
	color: #2e3192;
	width: 25%;
}
.company table .td_2{
	width: 70%;
	line-height: 1.5rem;
}
.company .profile{
	margin-bottom: 50px;
}
.company .access{
	/*background-color: #e9eaf5;*/
	margin-bottom: 50px;
}
.company .access .map_box{
	width: 100%;
	height: auto;
	padding-top: 62.5%;
	position: relative;
	margin: 0 auto;
	padding-bottom: 50px;
}
.company .access .map_box .ggmap{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/********************* privacy 0 *********************/
.privacy .top_txt{
	padding: 0 0 30px;

}
.privacy .body_txt{
	padding: 20px 0;
}
.privacy .body_txt .inner{
	background-color: #fff;
	padding: 20px;
	border: 1px solid var(--l_light_gray);

}
.privacy .body_txt dl{
	margin-bottom: 20px;
}
.privacy .body_txt dt{
	font-weight: 700;
	color: var(--navy);
}
/***************** service 0 *******************/
/*サービス一覧ページのCSS*/
.service_list{
	/*background-color: var(--bg_blue);*/
	padding-bottom: 50px;
}
.service_list .list{
	text-align: center;
	margin-top: 30px;
}
.service_list .list a.hover_line{
	display: block;
	background: url(../images/common/arrow_g_r_line.svg) 95% 95% no-repeat;
	background-size: 30px auto;
	background-color: #fff;
	padding: 30px 10px;

	color: var(--gray);
	max-width: 300px;
	margin: 0 auto;
	transition: all 0.5s 0s ease-in-out;
	border: 1px solid var(--l_light_gray);
}
.service_list .list a.hover_line.active{
	background: url(../images/common/arrow_n_r_line.svg) 95% 95% no-repeat;
	background-size: 30px auto;
	background-color: #fff;
	border: 1px solid var(--navy);
	opacity: 1;	
}
.service_list .list h3{
	color: var(--navy);
	font-size: 1.3rem;
	padding: 10px 0 20px;

}








/***************** 固定ページ 0 *******************/
.lower.wp_single{
	padding: 50px 0;
}
/***************** contact_form 0 *******************/
.contact_form .message{
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: center;
	margin: 10px 0 30px;
}

/******************* contact form 7 0 **********************/
.contact .top_txt{
		margin-bottom: 50px;
}
.wpcf7 form{
	padding-bottom: 50px;
}
.wpcf7 dl.list_top{
	border-top: 1px solid var(--l_light_gray);	
}
.wpcf7 dl{
	padding: 20px 0;
	border-bottom: 1px solid var(--l_light_gray);
}
.wpcf7 dl:last-child{
	border-bottom: none;
}
.wpcf7 dd{

}
.wpcf7 dt{
	margin-bottom: 10px;
  color: var(--navy);
}
.wpcf7-list-item{
  margin-left: 0;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea{
  	-moz-appearance: none;
   	-webkit-appearance: none;
  	appearance: none;
    background-color: #f8f8f8;
    width: 95%;
    border-radius: 0;
    padding: 5px 5px 5px 10px;
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    border-radius: 3px;
    border: 1px solid #ddd;
}
.wpcf7-textarea{
	/*color: #333;*/
	/*font-weight: 100;*/

}
.wpcf7 select{
  padding: 10px;
  width: 97%
}
.wpcf7 .required{
  font-size: 0.7rem;
  background-color: var(--navy);
  border-radius: 5px;
  color: #fff;
  padding: 1px 5px;
  vertical-align: top;
  margin-left: 3px;
  line-height: 1;
  vertical-align: 1px;
  margin-left: 10px;
}
.wpcf7-list-item.first,
.wpcf7-list-item.last,
.wpcf7 input[type="radio"]{
	margin: 0;
}
.wpcf7 .submit_btn p{
	text-align: center;
	margin: 50px 0 30px 0;
}
.wpcf7 input[type="button"]{
	margin: 0 auto;
}
.wpcf7-form-control.wpcf7-previous,
.wpcf7 input[type="submit"]{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--navy);
  color: #fff;
  font-size: 1.2rem;
  padding: 10px 50px;
  letter-spacing: 0px;
  border-radius: 5px;
  box-shadow: none;
  border: none;
  font-family: 'Noto Sans JP', sans-serif;
}
.wpcf7 .wpcf7-spinner{
	display: none;
}
.wpcf7 input[type="submit"]:hover{
  opacity: 0.7;
  cursor: pointer;
}
.wpcf7-form-control .wpcf7-list-item{
  display: block;
  margin: 0;
}
.wpcf7 .btn{
  text-align: center;
}
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-acceptance-missing{
  color: red;
  border: none;
  text-align: center; 
  line-height: 30px;
}
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok{
  border: none;
  text-align: center;
  line-height: 30px;
  margin-bottom: 100px;
}
.wpcf7 .wpcf7-form.sent ul{
  /*display: none;*/
}
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent
.contact_form .wpcf7-response-output{
  line-height: 25px;
  color: red;
  border: none;
}
.wpcf7 .privacy{
	margin-top: 20px;
}
.wpcf7 .privacy a{
	color: #000;
	text-decoration: underline;
}
/* Chrome, Safari */
::-webkit-input-placeholder{
    color: #aaa;
}
/* Firefox */
::-moz-placeholder{
    color: #eee;
}
/* Firefox 18以前 */
:-moz-placeholder{
    color: #eee;
} 
/* IE */
:-ms-input-placeholder{
    color: #eee;
}
/******************* contact form 7 0 **********************/
/***************** 0 contact confirm *******************/
.wpcf7-form-control.wpcf7-previous{/*localだと表示されないため*/
	/*display: block !important;*/
	text-align: center;
	cursor: pointer;
}
.wpcf7-form-control.wpcf7-previous:hover{
	opacity: 0.7;
}
/***************** 0 thanks *******************/
.contact .thanks_page{

}
.contact .thanks_page .inner_wrap{
	padding-bottom: 100px;
}
/*
.contact .thanks_page .title{
	margin-bottom: 50px;
}*/
.contact .thanks_page .txt_1{
	margin-bottom: 30px;
}
.contact .thanks_page .txt_2 br{
	display: none;
}
.contact .thanks_page .btn a{
	display: block;
	background-color: var(--navy);
  color: #fff;
  font-size: 1.2rem;
  padding: 10px 20px;
  letter-spacing: 0px;
  border-radius: 5px;
  box-shadow: none;
  border: none;
  width: 200px;
	margin: 0 auto;
	margin-top: 100px;
}
/***************** 404 0 *******************/
.not_found{
	padding: 50px 0;
}
/***************** blog_page 0 *******************/
.blog_page{
	margin-bottom: 100px;
}
.blog_page .post-title{
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 20px;
	font-weight: bold;
}
.blog_page .sidebar h2{
	color: var(--navy);
	border-bottom: 1px solid var(--navy);
	margin-bottom: 10px;
}
.blog_page .sidebar section{
	margin-bottom: 50px;
}
.blog_page .sidebar .widget.categories ul li{
	padding: 5px 0;
}
.blog_page .sidebar .widget.categories ul li a{
	text-decoration: underline;
	color: #333;	
}
.blog_page .sidebar .widget.recent-posts .recent-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog_page .sidebar .widget.recent-posts .recent-post-item {
  margin-bottom: 15px;
}
.blog_page .sidebar .widget.recent-posts .recent-post-link {
  display: flex;
  gap: 10px;
  text-decoration: none;
}
.blog_page .sidebar .widget.recent-posts .recent-thumb img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.blog_page .sidebar .widget.recent-posts .recent-title {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  text-align: left;
}
.blog_page .sidebar .widget.profile p{
	font-size: 0.9rem;
	line-height: 1.7;
}
.blog_page .sidebar .widget.profile .company_name{
	font-weight: 700;
}


.blog_page footer{
	background: none;
}
.blog_page footer a{
	color: var(--gray);
}
/***************** pege_not_found 768 *******************/
.pege_not_found .inner_wrap{
	margin-bottom: 100px;
}
/***************** footer 0 *******************/
footer{
	padding-top: 30px;
	background-color: var(--navy);
}
footer .inner_wrap{
	width: 90%;
}
footer .group_1_2{
		display: flex;
		align-items: flex-start;
}
footer .group._1,
footer .group._3 li.contact{
	width: 45%;
}
footer .group._2,
footer .group._3 li.privcy{
	width: 55%;
}
footer .group._3 {
	margin-top: -58px;
	/*display: flex;*/
	/*justify-content: space-around;*/
}
footer .footer_nav{
	text-align: left;
}
footer .footer_nav li{
	color: #fff;
	font-size: 0.9rem;
	line-height: 2;
}
footer .footer_nav li a{
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.5;
}
footer .footer_nav li a:after{
	content: "";
	display: inline-block;
	background: url(../images/common/arrow_w_r.svg) no-repeat;
	background-size: 10px 10px;
	width: 10px;
	height: 10px;
	margin-left: 5px;
}
footer address{
	color: #fff;
}
footer .footer_logo{
	margin-top: 30px;
	width: 180px;
}
footer .copy_wrap{
	position: relative;
}
footer .copy{
	position: absolute;
	color: #fff;
	bottom: 20px;
	right: 0;
}
}/*0-end*/

/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/**********                    ******                    ******                    *****************/
/***************************   ******   ***********************   **************   *****************/
/*************************   ********   ***********************   **************   *****************/
/************************   *********   ***********************   **************   *****************/
/***********************   **********   ***********************   **************   *****************/
/**********************   ***********                    ******                    *****************/
/*********************   ************   **************   ******   **************   *****************/
/********************   *************   **************   ******   **************   *****************/
/*******************   **************   **************   ******   **************   *****************/
/******************   ***************   **************   ******   **************   *****************/
/*****************   ****************                    ******                    *****************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
@media only screen and (min-width: 768px) {
	
/***************** top 768 *******************/

.top .main_visual{
	padding: 30px 0 200px;
	position: relative;
}
.top .main_visual .main_icon{
	position: absolute;
	bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 90%;
  max-width: 450px;

}

/***************** top clients 768 *******************/
.top .clients{
	background-color: #fff;
	padding: 70px 0 50px;
}
.top .clients h2{
	position: relative;	
	max-width: 500px;
	margin: 0 auto;	
	margin-bottom: 10px;
font-feature-settings: "palt";
}
.top .clients h2 br{
	display: none;
}
.top .clients h2:before{
  position: absolute;
  left: 0;
  bottom: -20px;
	content: "";
	background: url(../images/top/laurel_l.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 60px;
}
.top .clients h2:after{
  position: absolute;
  right: -5px;
  bottom: -20px;
	content: "";
	background: url(../images/top/laurel_r.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 60px;
}
.top .clients ul {
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
}
.top .clients ul li{
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1rem;
	font-weight: bold;
	margin: 0 7px;

}
 /***************** top  services_intro 768 *******************/
 /*0のまま*/
.top .services_intro .inner{
  	width: 100%;
  	margin: 0 auto;
  	max-width: 400px
}
.top .services_intro .services_item{
 	width: 33%;
}
.top .services_intro .services_item h3{
	width: 70%;
	margin: auto;
	background-color: var(--navy);
	aspect-ratio: 1 / 1;        /* 正方形を保証 */
  border-radius: 50%;         /* 円形にする */
  display: flex;
  flex-direction: column;     /* アイコンとテキストを縦並び */
  align-items: center;
 	justify-content: center;     /* ★メイン軸(上下)を中央 */
 	color: #fff;
}
.top .services_intro .services_item h3 img{
	height: 30px;
}
.top .services_intro .services_item p{
 	font-weight: bold;
 	text-align: center;
 	font-size: 0.8rem;
 	line-height: 1.3rem;
}
/***************** top  about_web 768 *******************/
.top .about_web{
	padding: 50px 0;
}
.top .about_web h2{
	text-align: center;
}
.top .about_web p{
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
}
.top .about_web p br{
	display: block;
}
/***************** top  works 768 *******************/
/***************** web  works 768 *******************/
.top .works{
	padding: 50px 0;
}
.top .works ul,
.web .works ul{
	display: flex;
}
.top .works li,
.web .works li{
	width: 45%;
	max-width: 450px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.top .works h3{
	font-size: 0.7rem;
	color: var(--navy);
	font-weight: bold;
}
.top .works .photo{
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
}
.top .works p{
	font-size: 0.7rem;
	line-height: 1.5;

}
/***************** top  service 768  *******************/
.top .service{
	padding: 50px 0;	
}
.top .service .web_design_icon{
	width: 80%;
	max-width: 350px;
	margin: 0 auto;
	margin-bottom: 20px;
}
/****************　ポイント 768 ***************/
.top .service .web_feature{
	background-color: var(--bg_gray);
	padding: 15px;
}
.top .service .web_feature{
	display: flex;
	justify-content: space-between;
}
.top .service .web_feature li{
	background-color: #fff;
	margin-bottom: 0;
	padding: 0 10px 20px 10px;
	width: 29%;
}
.top .service .web_feature li:last-child{
	margin-bottom: 0;
}
.top .service .web_feature li .feature_badge{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	background-color: var(--navy);
	color: #fff;
	width: 150px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5;
}
.top .service .web_feature li h4{
	color: var(--navy);
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;        /* アイコンと文字の高さを中央に */
	gap: 5px;                 /* アイコンと文字の間隔 */
	justify-content: center;
	margin: 20px 0 10px; 
}
.top .service .web_feature li h4 img{
	height: 30px;
	width: auto;
}
.top .service .web_plan{
	display: flex;
}
/****************　プラン 768 ***************/
.top .service .web_plan{
	display:flex;
	justify-content: space-between;
  flex-wrap: wrap;
  /*max-width: 1000px;*/
  margin: 0 auto;
  margin-bottom: 3%;
}
.top .service .web_plan li{
	border: 2px solid var(--light_gray);
	text-align: center;	
	margin-bottom: 20px;
	position: relative;
	width: 32%;

	display:flex;
  flex-direction:column;
  align-items: center;             
}
.top .service .web_plan li .plan_tag{
	background-color: var(--light_gray);
	color: #fff;
	width: 100%;
	margin: 0 auto;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 2;
	padding: 5px 0;
}
.top .service .web_plan li .plan_title{
	font-weight: bold;
	font-size: 1.5rem;
	margin: 20px 0; 
	position: relative;
}
.top .service .web_plan li .plan_title br{
	display: block;
}
.top .service .web_plan li.plan_item._2 .plan_title,
.top .service .web_plan li.plan_item._3 .plan_title{
	padding-right: 30px;
}
.top .service .web_plan li .special_icon_link,
.web .web_plan li .special_icon_link{
	position: absolute;
	width: 45px;
	top: 0px;
	margin-left: 37px;
    pointer-events: none;  /* クリックできなくする */
    cursor: default;       /* カーソルも通常の矢印に */
}
.top .service .web_plan li .plan_price{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
.top .service .web_plan li .plan_price .price_value{
	font-family: 'Roboto', sans-serif;
	font-size: 2.3rem;
}
.top .service .web_plan li .plan_desc{
	text-align: left;
	display: inline-block;
	margin-bottom: 20px;
	font-weight: bold;
}
.top .service .web_plan li .plan_link{
	background: url(../images/common/arrow_g_r_line.svg) 95% 40% no-repeat;
	background-size: 25px auto;
	display: block;
	border: 1px solid var(--gray);
	border-radius: 20px;
	width: 170px;
	margin: 0 auto;
	padding: 5px 0;
	margin-bottom: 20px;
	color: var(--gray);
	font-size: 0.8rem;
	line-height: 1;
	margin-top: auto;/* ボタンを最下部へ */
}
/*************** 特典 ***************/
.top .service .plan_bonus{
	background: url(../images/common/special.svg) 5% 50% no-repeat;
	background-size: 80px auto;
 background-color: var(--bg_blue);
 padding: 30px 20px 10px;
 width: 90%;
 max-width: 700px;
 margin: 0 auto;
 margin-bottom: 100px;

}
.top .service .plan_bonus .bonus_title,
.web .plan .plan_bonus .bonus_title{
	position: relative;
	background-color: #fff;
	border: 1px solid var(--navy);
	border-radius: 50px;
	font-size: 16px;
	font-weight: bold;
	padding: 0 30px;
	text-align: center;
	margin-bottom: 10px;
	font-feature-settings: "palt" 0;
	display: inline-block;

}
.top .service .plan_bonus .plan_bonus_inner,
.web .plan .plan_bonus .plan_bonus_inner{
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	text-align: center;

}
.top .service .plan_bonus .special_icon,
.web .plan .plan_bonus .special_icon{
	display: none;	
}
.top .service .plan_bonus .bonus_lead,
.web .plan .plan_bonus .bonus_lead{
	text-align: center;
	font-size: 1.5rem;
	line-height: 2.2rem;
}
.top .service .plan_bonus .bonus_list li,
.web .plan .plan_bonus .bonus_list li{
	text-indent: -1rem;
	padding-left: 1rem;

}
.top .service .plan_bonus .bonus_list li .plan_name,
.web .plan .plan_bonus .bonus_list li .plan_name{
	font-size: 1rem;
}

/**************** その他のサービス 768 ***************/
.top .service .other_service_icon{
	width: 80%;
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.top .service .other_service ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.top .service .other_service ul li{
	flex: 1 1 calc(50% - 10px); /* 2列 */
	max-width: calc(50% - 10px); /* ★最大幅を指定 */
  display:flex;               /* ★ li を flex に */
}
.top .service .other_service ul li a.hover_line{
  border:1px solid var(--l_light_gray);
  padding:20px 30px 10px;
  display:flex;               /* ★ 縦積み */
  flex-direction:column;
  flex:1;                     /* ★ li 高さいっぱいに伸びる */
  text-decoration:none;
  margin-bottom: 0;
}
/* タイトルと本文の余白を適度に */
.top .service .other_service ul li h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
}
.top .service .other_service ul li p{
  margin:0 0 16px;
}

/* ボタンを最下部へ */
.top .service .other_service .btn_detail_gray{
  margin-top:auto;            /* ★ ここで下寄せ */
}





.top .service .other_service ul li:last-child{
	margin-bottom: 0;
}
.top .service .other_service ul li h4{
	display: flex;
	gap: 10px;
	align-items: center;
	text-align: left;
	margin-bottom: 10px;
	font-weight: bold;
}
.top .service .other_service ul li h4 img{
	width: auto;
	width: 35px;
}
.top .service .other_service ul li p{
	font-size: 0.9rem;
}
/***************** top  flow 768 *******************/
/*0のまま*/
/*
.top .flow{
	padding: 50px 0;
	background-color: var(--bg_gray);
}
.top .flow ul li{
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
}
.top .flow ul li:last-child{
	margin-bottom: 0;
}
.top .flow ul li h3{
	color: var(--navy);
	font-weight: bold;
}
.top .flow ul li h3 span{
	display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  font-size: 2rem;
}
*/
/***************** top faq 768 *******************/
.top .faq{
	padding: 50px 0;
}

/***************** top feature 768 *******************/
.top .feature {
	padding: 50px 0;

}
.top .feature .point{
	margin-bottom: 50px;
	align-items: stretch;
}
.top .feature .point._1,
.top .feature .point._3{
	flex-direction: row-reverse;	
}
.top .feature .point._2{
	flex-direction: row;	
}
.top .feature .point .photo,
.top .feature .point .detail{
	width: 47%;
}
.point .photo {
    display: flex;
    align-items: center;  /* 縦中央寄せ */
    justify-content: center; /* 横中央寄せ */
    overflow: hidden;
}

.point .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 余白なしで埋める */
}



.top .feature .point._3{
	margin-bottom: 0;
}
.top .feature h3{
	font-size: 1.2rem;
	font-weight: bold;
	margin: 10px 0;
}
/***************** top blog 768 *******************/
.top .blog{
	padding: 50px 0;
}
.top .blog ul{
	display: flex;
	justify-content: space-between;
}
.top .blog ul li{
	width: 32%;
	margin-bottom: 0;

}
/***************** top contact 768 *******************/
.footer_contact  h3{
	font-weight: bold;
	text-align: center;
	padding: 20px 0;
}
.footer_contact .item{
	background-color: #fff;
	text-align: center;
	padding: 20px 0;
	margin-bottom: 20px;
}
.footer_contact .form .lead,
.footer_contact .tel .lead{
	padding: 0;
}
.footer_contact .form .lead{
	padding: 0;
	margin: 0 0 20px;
}
.footer_contact .form .cta_btn{
	margin-bottom: 10px;
}
.footer_contact .tel a{
	color: var(--navy);
	font-weight: 500;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2rem;
  display: block;	
  margin-top: 10px;
}
.footer_contact .closing{
	text-align: center;
	font-weight: bold;
}
.footer_contact .flex__ {
	flex-direction: row-reverse;
 	align-items: stretch; /* ←高さを揃える */
 	gap: 30px;
}
.footer_contact .form,
.footer_contact .tel{
	width: 45%;
	flex: 1;
  display: flex;               /* アイテム自体をflex化 */
  flex-direction: column;      /* 中身を縦に並べる */
  justify-content: center;     /* 縦方向の中央揃え */
  align-items: center;         /* 横方向の中央揃え */
  text-align: center;          /* テキストも中央に揃える場合 */

}











/*****************************************************/
/***************** 下層ページ共通　768  *******************/
/*****************************************************/
.lower_header{
	background-color: #fff;
	height: 50px;
}
.lower_header .logo{
	position: static;
	width: 160px;
	padding: 8px 0 0 20px;
}
.lower_visual{
	background: url(../images/common/pixta_83426882_M.jpg) 50% 45% no-repeat; 
	background-size: 1200px;
	position: relative;
}
.lower_visual_inner{
	background: rgba(255, 255, 255, 0.4);
	padding: 0 0 80px;
}
/*ボトム白波*/
/*
.lower_visual .wave{
	position: absolute;
	width: 100%;
	bottom: -1px;
}
*/
.lower_visual .breadcrumb {
	height: auto;
}
.lower_visual .breadcrumb .inner_wrap{
	display: block;
}
.lower_visual .lower_visual_inner.img_none .breadcrumb .inner_wrap{
	display: block;
	margin-top: -30px;
}
.lower_visual h1{
	width: 100%;
	font-size: 0.6rem;
	color: #fff;
	text-align: right;
	margin: 0;
}
.lower_visual h2{
	text-align: left;
	/*padding: 40px 0 20px;*/
	font-size: 20px;
	line-height: 1.2;
}
.lower_visual h2 span{
	font-size: 35px !important;	
}
.lower_visual .title_image{
	position: static;
	width: 150px;
	left: auto;
    transform: none;
    -webkit-transform:  none;
    -ms-transform:  none;
   	margin-top: 30px;
}
.service_list .lower_visual .title_image{/*サービス一覧*/
	width: 200px;
	bottom: auto;
	margin-top: 30px;
}
.movie .lower_visual .title_image{/*動画制作*/
	width: 150px;
	bottom: auto;
	margin-top: 10px;
}
.sp_tools .lower_visual .title_image{/*動画制作*/
	width: 150px;
	bottom: auto;
	margin-top: 10px;
}
.lower_visual .inner_wrap.flex__{

	justify-content: space-between;
	align-items: center;
}
.lower_visual .breadcrumb{
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #fff;
	padding: 10px 0 0px;
}
.lower_visual .breadcrumb ol{
	/*margin-left: 20px;*/
}
.lower_visual .breadcrumb ol li{
	display: inline-block;
	background: none;
	font-size: 0.7rem;
	color: var(--navy);
}
.lower_visual .breadcrumb ol li:after{
	content: "/";
	color: var(--navy);
	display: inline-block;
	margin: 0 5px;
}
.lower_visual .breadcrumb ol li:last-child:after{
	content: none;
}
.lower_visual .breadcrumb ol li a{
	font-size: 0.7rem;
	color: var(--navy);
}
.lower_visual .breadcrumb ol li.top a img{
	width: 10px;
	height: auto;
	vertical-align: middle;
}


























/*******************　　　ここまで　　**********************/
/***************** 下層ページ共通　768  *******************/
/*****************************************************/

/*
.lower_visual_inner{
	background: rgba(255, 255, 255, 0.2);
	padding: 50px 0 150px;
}
*/
.frame{
	/*box-shadow: 0px 0px 10px #acc6e2;	*/
	/*border-radius: 5px;*/
	margin-bottom: 40px;
	background-color: #fff;
}

.lower section{
	padding-bottom: 100px;
}
.lower section.sns_ad_frame{
	padding-bottom: 30px;
}
/*このような課題を解決します*/
.problem .inner_wrap{
	width: 100%;
}
.problem ul {
	display: flex;
	justify-content: space-between;
	max-width: 850px;
	margin: 0 auto;
}
.problem ul li{
	width: 26%;
	padding: 15px 15px 30px 15px;
}
.sns_ad .problem ul li{
	width: 26%;
	padding: 15px 15px 15px 15px;
	display: flex;
	flex-direction: column;
}
.sns_ad .problem ul li .list_inner{
	flex-grow: 1; 
	display: flex;
	flex-direction: column;
}
.sns_ad .problem ul li h3{
	flex-grow: 1;
}
.sns_ad .problem ul li p{
	flex-grow: 1;
}
.problem ul li br{
	display: none;
}
.problem ul li img{
	width: auto;
	height: 70px;
	position: absolute;
	right: 10px;
	bottom: -35px;
	width: 70px;
}

.works .inner_wrap > ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.case .works ul li.frame,
.works ul li.frame.web,
.works ul li.frame.movie{
	width: 47%;
	margin-bottom: 5%;
}


.works ul li a {
  display: flex;
  flex-direction: column; /* コンテンツを縦に並べる */
  justify-content: space-between; /* 必要に応じて調整 */
  align-items: stretch; /* 子要素の横幅を揃える */
  text-decoration: none;
  height: 100%; /* 高さをliに依存させる */
  border: 1px solid #ddd; /* 見やすさのために追加 */
  padding: 10px; /* 内側の余白 */
  box-sizing: border-box; /* パディングを含めて高さを計算 */
}

/*NEW2025*/
.lower_top_lead {
	padding-bottom: 0 !important
}
.lower_top_lead .top_txt{
	width: 100%;
	max-width: 700px;
	margin-bottom: 50px;
}
.lower_top_problem{
	padding: 50px 0;
}
.lower_top_problem .inner_wrap{
	width: 95%;
	max-width: 850px;
}
.lower_top_problem ul{
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.lower_top_problem ul li {
  flex: 0 1 32%;   
  max-width: 250px;
  display: flex;  

}

.lower_top_problem ul li .list_inner {
  flex: 1;            
  display: flex;
  align-items: center;         
  justify-content: center;      
  padding: 10% 12%;                
  margin-bottom: 0;
  position: relative;
    width: 30%;
}
.web .lower_top_problem ul li .list_inner._1,
.web .lower_top_problem ul li .list_inner._2,
.web .lower_top_problem ul li .list_inner._3,
.movie .lower_top_problem ul li .list_inner._1,
.movie .lower_top_problem ul li .list_inner._2,
.movie .lower_top_problem ul li .list_inner._3,
.sns_ad .lower_top_problem ul li .list_inner._1,
.sns_ad .lower_top_problem ul li .list_inner._2,
.sns_ad .lower_top_problem ul li .list_inner._3,
.sns_marketing .lower_top_problem ul li .list_inner._1,
.sns_marketing .lower_top_problem ul li .list_inner._2,
.sns_marketing .lower_top_problem ul li .list_inner._3{
	background: none;
	background-color: #fff;
}
.web .lower_top_problem ul li .list_inner img{
	display: block;
	position: absolute;
	width: 65px;
	right: 10px;
	bottom: -50px;
}
.web .lower_top_problem ul li .list_inner._3 img{
	width: 57px;
}
.movie .lower_top_problem ul li .list_inner img{
	display: block;
	position: absolute;
	width: 70px;
	right: 10px;
	bottom: -50px;
}
.movie .lower_top_problem ul li .list_inner._1 img{
	width: 60px;
}
.movie .lower_top_problem ul li .list_inner._2 img{
	width: 67px;
}
.movie .lower_top_problem ul li .list_inner._3 img{
	width: 60px;
}
.sns_ad .lower_top_problem ul li .list_inner img{
	display: block;
	position: absolute;
	width: 70px;
	right: 10px;
	bottom: -50px;
}
.sns_ad .lower_top_problem ul li .list_inner._1 img{
	width: 60px;
}
.sns_marketing .lower_top_problem ul li .list_inner img{
	display: block;
	position: absolute;
	width: 70px;
	right: 10px;
	bottom: -50px;
}
.sns_marketing .lower_top_problem ul li .list_inner._1 img{
	width: 60px;
}
.sns_marketing .lower_top_problem ul li .list_inner._2 img{
	width: 60px;
}



/********************* flow 768 *********************/

/********************* sns_ad 768 *********************/

/********************* qa 768 *********************/
.qa dl{
	margin-bottom: 30px;
}
.qa dl dt{
	background: url(../images/common/q_icon.svg) 15px 50% no-repeat,
	url(../images/common/arrow_n_b.svg) 95% 50% no-repeat;
	background-size: 17px auto,10px auto;
	background-color: #f6f8fe;
	font-weight: bold;
	padding: 15px 50px;
	border-radius: 50px;
	font-size: 0.9rem;
	transition: all 0.5s 0s ease-in-out;
}
.qa dl dt.active{
	background: url(../images/common/q_icon.svg) 15px 50% no-repeat,
	url(../images/common/arrow_n_t.svg) 95% 50% no-repeat;
	background-size: 20px auto,10px auto;
	background-color: #f6f8fe;
}
.qa dl dd{
	background: url(../images/common/a_icon.svg) 15px 50% no-repeat;
	background-size: 17px auto;
	padding: 10px 50px;
	display: none;
	font-size: 0.9rem;
}
/***************** web 768 *******************/
/***************** movie 768 *******************/
/*************** 共通　CSSあり *******************/
.movie .plan .point_advice_wrap{
	text-align: center;
}
.movie .plan .point_advice{
	border: 1px solid var(--l_light_gray);
	margin: 30px 0;
	width: auto;
	font-size: 16px;
	padding: 10px 30px;
	margin-top: 50px;
	margin-bottom: 50px;
display: inline-block;

}
/* 親：左右を同じ高さにする */
.web .plan .lead,
.movie .plan .lead{
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: stretch;     /* ← 等高 */
  gap: 20px;
  margin-bottom: 50px;
  min-height: 0;            /* ← 収縮を阻害しない保険 */
}

/* 画像側のコンテナ */
.web .plan .lead .photo,
.movie .plan .lead .photo{
  flex: 0 0 45%;
  position: relative;     /* ← これで子のabsoluteの基準に */
  overflow: hidden;
  margin: 0;
  align-self: stretch;    /* 等高にする */
}

/* 画像：親にフィット＋中央トリミング（グローバルimgを上書き） */
.web .plan .lead .photo img,
.movie .plan .lead .photo img{
  position: absolute;     /* ← 自身は高さを決めない */
  inset: 0;               /* top:0; right:0; bottom:0; left:0; と同じ */
  width: 100% !important;
  height: 100% !important;/* ← グローバルの height:auto を確実に上書き */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* テキスト側は可変でOK（等高にするために伸縮可能に） */
.web .plan .lead p,
.movie .plan .lead p{
  flex: 1 1 0;
  margin-bottom: 0;
	line-height: 2.2;
	margin-bottom: 0;
}
.web .plan .web_plan .plan_item{
	text-align: left;
}
.web .plan .web_plan .plan_item .flex__ {
  display: flex;
}
.web .plan .web_plan .plan_item .plan_name{
	width: 35%;
	text-align: center;
}
.web .plan .web_plan .plan_item .plan_name h4 br{
	display: block;
}
.web .plan .web_plan .plan_item .plan_feature {
	width: 65%;
	padding: 10px 0 0 20px;

}
.web .plan .web_plan .plan_item .detail{
	max-width: 100%;
}
.web .plan .web_plan .plan_item .feature li{
	font-size: 14px;
	line-height: 1.5;
}
.web .plan .web_plan .plan_item .plan_tag{
	width: 100%;
	margin-bottom: 40px;
}
.web .plan_bonus{
	/*margin-bottom: 0 !important;*/
}
.web .plan .plan_bonus{
	background: url(../images/common/special.svg) 5% 50px no-repeat;
	background-size: 13% auto;
 background-color: var(--bg_blue);
 padding: 30px 20px 10px;
 width: 90%;
 max-width: 800px;
 margin: 0 auto;
 margin-bottom: 0;

}
.web .plan .plan_bonus .bonus_lead{
	padding-left: 40px;
}
.web .plan_bonus .bonus_detail_inner{
	background-color: #fff;
	padding: 0 10px;
	max-width: 97%;
	margin: 0 auto;
}
.web .plan_bonus .bonus_lead br{
	display: none;
}
.web .plan_bonus .bonus_detail table th br{
  display: none;
}
.web .plan_bonus .bonus_detail table td{
	text-align: left;
}
.web .plan_bonus .bonus_btn{
	margin-right: 0;
	margin-bottom: 10px;
}
.web .web_plan .about h5 br{
	display: none;
}
.web .web_plan .about ul li{
	font-size: 14px !important;
}
.web .plan .plan_bonus .plan_name{
	font-size: 22px;
	line-height: 1.5;
}
.web .common_services .ul_wrap{
	display: flex;
	justify-content: space-between;
}
.web .common_services .ul_wrap ul{
	width: 50%;
	padding-right: 20px;
}
.web .common_services .ul_wrap ul li:last-child{
	margin-bottom: 0;
}
.web .closing .inner,
.movie .closing .inner{
  display:flex;
  flex-direction: row-reverse;
  gap:0px;
  align-items:stretch;        /* 子要素の高さを揃える */
  justify-content: space-between;
  margin-bottom: 50px;
}
.web .closing .photo,
.web .closing .txt,
.movie .closing .photo,
.movie .closing .txt{
	width: 47.5%;
}
.web .closing .txt h2,
.movie .closing .txt h2{
	text-align: left;
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 20px;
}
.web .closing .photo,
.movie .closing .photo{
  flex:0 0 47.5%;                 /* 画像の幅（お好みで 30〜50% に） */
  margin:0;                     /* figure の余白をリセット */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 250px;
  margin-top: 110px;
}
.web .closing .photo img,
.movie .closing .photo img {
  width:100%;
  height:100%;
  object-fit:cover;             /* 余白なし、中央トリミング */
  object-position:center;
  display:block;
}
.web .closing .txt p,
.movie .closing .txt p{
	margin-bottom: 0;
}
.movie .plan .movie_plan .flex__ {
	margin-bottom: 10px;
}
.movie .plan .movie_plan .flex__ .plan_name{
	width: 40%;
}
.movie .plan .movie_plan .flex__ .inner{
	width: 55%;
	padding-top: 10px;
}
.movie .plan_works .lead{
	text-align: center;
	margin: 0 auto;
	margin-bottom: 50px;
}
.movie .plan_works li{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.movie .plan_works li .video,
.movie .plan_works li .detail_txt{
	width: 45%;
}
.movie .plan_works li .detail_txt {
	margin-top: 0px;
}
.movie .plan_works li .detail_txt .client{
	font-size: 16px;
	margin-bottom: 10px;
}
.movie .plan_works li .detail_txt p{
	line-height: 2;
} 
.movie .plan .plan_table table{
	width: 100%;
	max-width: 1096px;/*pcの幅*/
	border-top: 1px solid var(--gray);
}
/********************* sns_ad 768 *********************/
.sns_ad .sns_ad_contents .contents_list{
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.sns_ad .sns_ad_contents .contents_list._1 li{
	width: 30%;
}
.sns_ad .sns_ad_contents .contents_list._2 li{
	width: 33%;
}
.sns_ad .sns_ad_contents .contents_list li a{
	color: var(--navy);
	font-weight: bold;
	font-size: 0.8rem;
	border-radius: 5px;
	border: 1px solid var(--navy);
	display: block;
}
.sns_ad .sns_ad_frame .frame_inner{
	padding: 20px;
}
.sns_ad .sns_ad_frame h3{
	font-size: 25px;
	text-align: left;
	padding: 20px;
}
.sns_ad .youtube .data .flex,
.sns_ad .listing .data .flex{
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.sns_ad .sns_ad_frame .target_group{
	padding: 30px;
}
.sns_ad .sns_ad_frame .target_group h4{
	font-size: 20px;
	margin-bottom: 20px;
}
.sns_ad .youtube .target_group ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.sns_ad .youtube .target_group ul li{
	width: 40%;
}
.sns_ad .youtube .target_group ul li:nth-child(3){
	margin-bottom: 0;
}

.sns_ad .price .frame{
	padding: 5%;
}
.sns_ad .price .price_head{
	text-align: center;
}
.sns_ad .price .price_head .top{
	font-size: 25px;
	line-height: 40px;
}
.sns_ad .price .price_head .middle{
	font-size: 25px;
}
.sns_ad .price .price_head .middle span{
	display: inline-block;
	color: #2e3192;
	font-size: 30px;
	line-height: 1;
	border: 1px solid #2e3192;	
	padding: 5px;
}
.sns_ad .price .price_head h3{
	font-size: 35px;
	line-height: 1;
	margin-bottom: 50px;
}
.sns_ad .price .price_head h3 .l_blue{
	color: #0071bc;
}
.sns_ad .price .price_head h3 .num{
	font-size: 60px;
}
.sns_ad .price .price_table {
	display: flex;
	border-bottom: 1px solid #99aed5;
}
.sns_ad .price .price_table dl{
	display: block;
	width: 100%; 
}
.sns_ad .price .price_table dt{
	width: auto;
			justify-content: center;
}
.sns_ad .price .price_table dd{
	width: auto;	
	justify-content: center;
	align-items: center;
	height: 100%;
}
.sns_ad .price .price_table .dl_4 dt,
.sns_ad .price .price_table .dl_4 dd{
	border-bottom: none;
}
.sns_ad .price .price_table dt,
.sns_ad .price .price_table dd{
	border-top: 1px solid #99aed5;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--navy);
	display: flex;
	align-items: normal;
	padding: 10px 0;

}
.sns_ad .price .compare h3 br{
	display: none;
}
.sns_ad .price .compare table{
	margin-top: 0;
}
.sns_ad .price .compare{
	padding: 2% 5% 5% 5%;
}
.sns_ad .price .compare_inner{
	background-color: #fff;
	padding: 3% 5%;
}


/********************* sp_tools 768 *********************/
.sp_tools .tool_list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sp_tools .tool_list ul li{
	width: 42%;
}
/********************* offline_ad 768 *********************/
.offline_ad .ad_list .frame_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.offline_ad .ad_list .frame {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: stretch;
  /*box-sizing: border-box;*/
  /*background-color: white; /* 背景色を設定 */
  /*padding: 20px;*/
  /*border-radius: 8px; /* カードの角を丸める */
}
.offline_ad .ad_list .frame_inner,
.offline_ad .ad_list .tools_used {
  flex-grow: 1;
}
.offline_ad .ad_list .frame h2 {
  /*font-size: 1.2em;*/
  display: flex;
  align-items: center;
}
.offline_ad .ad_list .frame img {
  /*margin-right: 8px;*/
}
.offline_ad .ad_list .tools_used {
  margin-top: auto; /* カード下部に配置 */
  /*background-color: #007bff; /* 背景色 */
  padding: 15px;
  /*color: #fff; /* テキスト色 */
  /*border-radius: 8px;*/
}
/********************* sns_ad youtube 768 *********************/
.youtube .lead{
	padding-top: 50px;
}
.youtube .type .frame .frame_inner{
	padding: 50px 50px 0;
}
.youtube .type .frame .flex{
	display: flex;
}
.youtube .type .frame .image{
	width: 40%;
}
.youtube .type .frame .txt{
	width: 60%;	
	padding-left: 50px;
	margin-bottom: 20px;
}
.youtube .type .frame .point{
		padding: 20px 50px 30px;
}
.youtube .targeting .frex_left_1 .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.youtube .targeting .frex_left_1 .flex .frame,
.youtube .targeting .frex_left_2 .flex .frame{
	width: 42.5%;
	padding: 20px;
	margin-bottom: 20px;
}
.youtube .targeting .frex_right .audience .frame,
.youtube .targeting .frex_right .custom .frame{
	padding: 20px;
}
.youtube .operation .frame{
	padding: 30px;
}
.youtube .operation .frame .item{
	margin-bottom: 20px;
	padding: 20px;
}
.youtube .operation .point_frame{
	padding: 20px;
}
.youtube .case .frame{
	padding: 30px;
}
.youtube .case .frame .flex{
	display: flex;
	margin-bottom: 20px;
}
.youtube .case .frame .photo{
	width: 33%;
}
.youtube .case .frame .case_list{
	width: 65%;
	padding-left: 20px;
	margin: 0;
}
.youtube .case .case_list dd{
	line-height: 1;
	margin-left: 5px;
	font-size: 0.9rem;
	margin-bottom: 5px;
}
.youtube .case .cell_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	border: 1px solid var(--blue);
}
.youtube .case .cell{
	width: 20%;
	text-align: center;
	border: none;
}
.youtube .case .cell:nth-child(n+4){
	border-bottom: none;
}
.youtube .report .youtube_report ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.youtube .report .youtube_report ul li{
	width: 42.5%;
	padding: 20px;
	margin-bottom: 5%;
}
.youtube .analytics_report ul{
	display: flex;
	justify-content: space-between;
}
.youtube .analytics_report .flex_upper li{
	width: 25%;
	margin-bottom: 5%;
}
.youtube .analytics_report .flex_lower{
	margin-top: 0;
}
.youtube .analytics_report .flex_lower li{
	width: 42%;
}
/********************* sns_marketing 768 *********************/
.sns_marketing .service .frame ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sns_marketing .service .frame ul li{
	width: 42%;
	display: flex;
  flex-direction: column;
  text-align: left;
}
.sns_marketing .service .frame ul li p{
	flex: 1;
}
.sns_marketing .service .flex{
	display: flex;
	justify-content: space-around;
}
.sns_marketing .feature .frame.list{
	display: flex;
	align-items: center;
}
.sns_marketing .feature .frame.list h4{
	width: 33%;
}
.sns_marketing .feature .frame.list p{
	width: 67%;
}
.sns_marketing .feature .frame .scene ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; 
}
.sns_marketing .feature .frame .scene ul::after {
    content: "";
    flex: 1 1 45%; /* 子要素と同じ幅 */
}
.sns_marketing .feature .frame .scene ul li{
	width: 45%;
	max-width: 45%;
	margin-bottom: 10px;
	padding: 10px;

}
.sns_marketing .feature .frame .scene ul li:last-child{
	margin-bottom: 10px;
}
.sns_marketing .price .frame{
	padding: 5%;
}
/********************* cases 768 *********************/
/********************* project 768 *********************/
.project .content{
	padding-bottom: 30px;
}
.project .frame.movie{
	padding: 30px;
	max-width: 700px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.project .button_navy a{
	padding: 10px 50px;
	margin: 0 0 50px;
}
/********************* company 768 *********************/
.company .profile{
	margin-top: 30px;
}
.company table{
	width: 100%;
}
.company table tr{
	border-bottom: 1px solid #2e3192;
}
.company table .td_1,
.company table .td_2{
	padding: 8px;
	font-size: 18px;
	line-height: 40px;
}
.company table .td_1{
	color: #2e3192;
	width: 35%;
}
.company table .td_2{
	width: 65%;
	line-height: 1.5rem;
}

.company .access .map_box{
	width: 100%;
	height: auto;
	padding-top: 450px;
	position: relative;
	margin: 0 auto;
	padding-bottom: 50px;
}
.company .access .map_box .ggmap{
	position: absolute;
	width: 100%;
	height: 450px;
	top: 0;
	left: 0;
}
/********************* privacy 768 *********************/
.privacy .top_txt{
	padding: 50px 0 30px;
}
.privacy .body_txt{
	padding: 50px 0;
}
.privacy .body_txt .inner{
	background-color: #fff;
	padding: 20px;
}
.privacy .body_txt dl{
	margin-bottom: 20px;
}
.privacy .body_txt dt{
	font-weight: 700;
}
/********************* service_list 768 *********************/
.service_list .lead{
	width: 670px;
	margin: 0 auto;
	padding: 50px 0;
}
.service_list .service_group{
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  gap: 50px;
  margin-top: 50px;
}

.service_list .service_group .list{
  flex: 0 0 calc((100% - 50px) / 2); 
  display: flex;
  box-sizing: border-box;      /* ←半角スペースに修正 */
  margin: 0;
}
.service_list .service_group .list a{
  display: block;
  width: 100%;
  max-width: 100%;	 
}

/********************* contact 768 *********************/
main.contact .top_txt{
		margin: 50px 0;
}
/*
main.contact dl{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
main.contact dl dt{
	width: 30%;
}
main.contact dl dd{
	width: 70%;	
}
main.contact {
	margin-bottom: 100px;
}
main.contact .privacy{
	text-align: center;
}
*/
.wpcf7 dl{
	display: flex;
	justify-content: space-between;
	align-items: center;	
}
.wpcf7 dl dt{
	width: 30%;
}
.wpcf7 dl dd{
	width: 70%;	
}
.wpcf7 .privacy{
	text-align: center;
}
.wpcf7-response-output{
	text-align: center;
}
/*****************  thanks 768 *******************/
.thanks_page .inner_wrap{
	padding: 50px 0 100px;
}
.thanks_page .title{
	margin-top: 30px;
	margin-bottom: 50px;
}
.thanks_page .txt_1{
	margin-bottom: 30px;

}
.thanks_page .txt_1,
.thanks_page .txt_2{
		font-size: 20px;
		text-align: center;
		line-height: 2;
}
.thanks_page .txt_2 br{
	display: block  !important;
}
.thanks_page .btn{
	text-align: center;
}
.thanks_page .btn a{
	display: block;
	background-color: var(--navy);
  color: #fff;
  font-size: 1.2rem;
  padding: 10px 20px;
  letter-spacing: 0px;
  border-radius: 5px;
  box-shadow: none;
  border: none;
  width: 200px;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 200px;
}
/***************** blog_page 768 *******************/
.blog_page .content{
	display: flex;
	width: 90%;	
	margin: 0 auto;
}
.blog_page .content .post_item .inner_wrap,
.blog_page .content .sidebar .inner_wrap{
	margin: 0;
}
/***************** pege_not_found 768 *******************/
.pege_not_found{
	padding: 50px 0 200px;
	text-align: center;
}
.pege_not_found p{
	font-size: 18px;
	line-height: 2;
}
/********************* footer 768 *********************/


footer .group_1_2{
		display: flex;
		align-items: flex-start;
		width: 70%;
}
footer .group._3 {
	margin-top: 0;
	display: block;
	width: 30%;

}
footer .group_1_2_3{
	display: flex;
	justify-content: space-between;

}
footer .group._3{
	width: 30%;
}
footer .group._1,
footer .group._2{
	width: 100%;
}
footer .group._3 li.contact{
	width: 100%;
}
}/*768px-end*/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/**********                    ******                    ******                    *****************/
/**********   **************   ******   ***********************   **************   *****************/
/**********   **************   ******   ***********************   **************   *****************/
/**********   **************   ******   ***********************   **************   *****************/
/**********   **************   ******   ***********************   **************   *****************/
/**********                    ******                    ******   **************   *****************/
/***************************   ******   **************   ******   **************   *****************/
/***************************   ******   **************   ******   **************   *****************/
/***************************   ******   **************   ******   **************   *****************/
/***************************   ******   **************   ******   **************   *****************/
/**********                    ******                    ******                    ******************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************** top *******************/
@media only screen and (min-width: 960px) {
/*******************************/
.top_page::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	background: url("../images/common/pixta_83426882_M.jpg") center 0px no-repeat; 
	background-size: 1600px auto;
	width: 100%;
	height: 100%;
}
.en_title{
  font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
  color: var(--navy);
	font-size: 50px;
	line-height: 1;
}
.a_title{/*h2タイトル*/
	font-size: 25px;
	line-height: 1.2;
	font-weight: 100;
	padding-bottom: 5%;
}
.cta_btn{
	text-align: center;
}
.cta_btn a{
	font-weight: bold;
	background: url(../images/common/arrow_n_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	background-color: #f6c000;
	color: var(--navy);
	padding: 15px 100px;
	font-size: 18px;

}
.navy_btn{
		margin-top: 50px;
}
.navy_btn a{
	font-weight: bold;
	background: url(../images/common/arrow_w_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	background-color: var(--navy);
	color: #fff;
	padding: 15px 100px;
	font-size: 18px;

}

/***************** header 960 *******************/
header {
  position: relative;   
  z-index: 10;         
}
header::before {
  content: "";
  position: absolute;
  inset: 0;             
  background: transparent;
  transition: background 0.3s ease;
  z-index: -1;  
	height: 70px;        
}
header.scrolled::before {
  background-color: #fff;
  height: 70px; 
  position: fixed; 
}
header .logo{
	margin-top: 15px;
	width: 200px;
}
header.scrolled .logo{
	opacity: 1;
}
.lower_header{
	background-color: #fff;
	position: fixed;
	width: 100%;
	z-index: 10000;
	height: 70px;

}
.lower_header .logo{
	width: 200px;	
}


/***************** top 960 *******************/

.top .main_visual{
	padding: 150px 0 250px;
	position: relative;
}
.top .main_visual h1 br{
	display: block;
}
.top .main_visual h1{
	line-height: 1.5;
	position: absolute;
	bottom: -230px;
	right: 20px;
}
.top .main_visual h2{
	font-size: 50px;
	line-height: 1.5;
}
.top .main_visual .sub{
	font-size: 25px;
	line-height: 1.5;
}
.top .main_visual .main_icon{
	position: absolute;
	bottom: -56px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  max-width: 550px;


}

/***************** top clients 960 *******************/
.top .clients{
	background-color: #fff;
	padding: 150px 0 70px;
}
.top .clients h2{
	position: relative;	
	max-width: 850px;
	margin: 0 auto;	
	margin-bottom: 20px;
font-feature-settings: "palt";
font-size: 30px;
}
.top .clients h2 br{
	display: none;
}
.top .clients h2:before{
  position: absolute;
  left: 0;
  bottom: -85px;
	content: "";
	background: url(../images/top/laurel_l.png) no-repeat;
	background-size: contain;
	width: 60px;
	height: 120px;
}
.top .clients h2:after{
  position: absolute;
  right: -15px;
  bottom: -85px;
	content: "";
	background: url(../images/top/laurel_r.png) no-repeat;
	background-size: contain;
	width: 60px;
	height: 120px;
}
.top .clients ul {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}
.top .clients ul li{
	display: inline-block;
	font-size: 16px;
	line-height: 2;
	font-weight: bold;
	margin: 0 7px;

}
 /***************** top  services_intro 960 *******************/
 /*0のまま*/
.top .services_intro{
 	padding-bottom: 50px;
 }
.top .services_intro .inner{
  	width: 100%;
  	margin: 0 auto;
  	max-width: 600px
}
.top .services_intro .services_item{
 	width: 33%;
}
.top .services_intro .services_item h3{
	width: 60%;
	margin: auto;
	background-color: var(--navy);
	aspect-ratio: 1 / 1;        /* 正方形を保証 */
  border-radius: 50%;         /* 円形にする */
  display: flex;
  flex-direction: column;     /* アイコンとテキストを縦並び */
  align-items: center;
 	justify-content: center;     /* ★メイン軸(上下)を中央 */
 	color: #fff;
}
.top .services_intro .services_item h3 img{
	height: 40px;
}
.top .services_intro .services_item p{
 	font-weight: bold;
 	text-align: center;
 	font-size: 16px;
 	line-height: 1.5;
}
/***************** top  about_web 960 *******************/
.top .about_web{
	padding: 50px 0  100px;
}
.top .about_web h2{
	text-align: center;
	font-size: 30px;
	margin-bottom: 20px;
}
.top .about_web p{
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
}
.top .about_web p br{
	display: block;
}
/***************** top  works 960 *******************/
.top .works{
	padding: 50px 0;
}
.top .works ul,
.web .works ul{
	display: flex;
	max-width: 1020px;
	margin: 0 auto;
}
.top .works li,
.web .works li{
	width: 45%;
	max-width: 450px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.top .works h3,
.web .works h3{
	font-size: 13px;
	color: var(--navy);
	font-weight: bold;
}
.top .works .photo,
.web .works .photo{
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
}
.top .works p,
.web .works p{
	font-size: 0.7rem;
	line-height: 1.5;

}
/***************** top  service 960  *******************/
.top .service{
	padding: 50px 0  100px;	
}
.top .service h3{
	font-size: 30px;
	margin: 5% 0;
}
.top .service .web_design_icon{
	width: 90%;
	max-width: 450px;
	margin: 0 auto;
	margin-bottom: 20px;
}
/****************　ポイント 960 ***************/
.top .service .web_feature{
	background-color: var(--bg_gray);
	padding: 15px;
}
.top .service .web_feature{
	display: flex;
	justify-content: space-around;
	max-width: 960px;
	padding: 30px;
	margin: 0 auto;
	margin-top: 5%;
	margin-bottom: 5%;
}
.top .service .web_feature li{
	background-color: #fff;
	margin-bottom: 0;
	padding: 0 10px 20px 10px;
	width: 29%;
}
.top .service .web_feature li:last-child{
	margin-bottom: 0;
}
.top .service .web_feature li .feature_badge{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	background-color: var(--navy);
	color: #fff;
	width: 150px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5;
}
.top .service .web_feature li h4{
	color: var(--navy);
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;        /* アイコンと文字の高さを中央に */
	gap: 5px;                 /* アイコンと文字の間隔 */
	justify-content: center;
	margin: 20px 0 10px; 
}
.top .service .web_feature li h4 img{
	height: 30px;
	width: auto;
}
/****************　プラン 960 ***************/
.top .service .web_plan{
	display:flex;
	justify-content: space-between;
  flex-wrap: wrap;
  /*max-width: 1000px;*/
  margin: 0 auto;
  margin-bottom: 3%;
}
.top .service .web_plan li{
	border: 2px solid var(--light_gray);
	text-align: center;	
	margin-bottom: 20px;
	position: relative;
	width: 32%;

	display:flex;
  flex-direction:column;
  align-items: center;             
}
.top .service .web_plan li.plan_item .plan_tag{
	background-color: var(--light_gray);
	color: #fff;
	width: 80%;
	margin: 0 auto;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 2;
	padding: 5px 0;
	margin-bottom: 60px;
}
.top .service .web_plan li .plan_title{
	font-weight: bold;
	font-size: 1.5rem;
	margin: 20px 0; 
	position: relative;
}
.top .service .web_plan li .plan_title br{
	display: block;
}
.top .service .web_plan li.plan_item._2 .plan_title,
.top .service .web_plan li.plan_item._3 .plan_title{
	padding-right: 30px;
}
.top .service .web_plan li .special_icon_link{
	position: absolute;
	width: 45px;
	top: 0px;
	margin-left: 37px;
}
.web .web_plan li .special_icon_link{
	position: absolute;
	width: 45px;
	top: -10px;
	margin-left: 10px;
}
.top .service .web_plan li .plan_price{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
.top .service .web_plan li .plan_price .price_value{
	font-family: 'Roboto', sans-serif;
	font-size: 2.3rem;
}
.top .service .web_plan li .plan_desc{
	text-align: left;
	display: inline-block;
	margin-bottom: 20px;
	font-weight: bold;
}
.top .service .web_plan li .plan_link{
	background: url(../images/common/arrow_g_r_line.svg) 95% 40% no-repeat;
	background-size: 25px auto;
	display: block;
	border: 1px solid var(--gray);
	border-radius: 20px;
	width: 170px;
	margin: 0 auto;
	padding: 5px 0;
	margin-bottom: 20px;
	color: var(--gray);
	font-size: 0.8rem;
	line-height: 1;
	margin-top: auto;/* ボタンを最下部へ */
}


/**************** その他のサービス 960 ***************/
.top .service .other_service_icon{
	width: 80%;
	max-width: 500px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.top .service .other_service ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.top .service .other_service ul li{
  flex: 1 1 calc(33.333% - 20px); /* 3列にする */
  max-width: calc(33.333% - 20px);
  box-sizing: border-box;
}
.top .service .other_service ul li a.hover_line{
  border:1px solid var(--l_light_gray);
  padding:20px 30px 10px;
  display:flex;               /* ★ 縦積み */
  flex-direction:column;
  flex:1;                     /* ★ li 高さいっぱいに伸びる */
  text-decoration:none;
  margin-bottom: 0;
}
/* タイトルと本文の余白を適度に */
.top .service .other_service ul li h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
}
.top .service .other_service ul li p{
  margin:0 0 16px;
}

/* ボタンを最下部へ */
.top .service .other_service .btn_detail_gray{
  margin-top:auto;            /* ★ ここで下寄せ */
}
/***************** top  flow 960 *******************/
.top .flow,
.web .flow,
.movie .flow,
.sns_ad .flow{
	padding: 100px 0;
	background-color: var(--bg_gray);
}
.top .flow ul{
	display: flex;
	justify-content: space-between;
}
.web .flow ul,
.movie .flow ul,
.sns_ad .flow ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	justify-content: flex-start; 
	gap: 20px;
}
.top .flow ul li{
	padding: 20px;
	margin-bottom: 0;
	width: 20%;
}
.web .flow ul li,
.movie .flow ul li,
.sns_ad .flow ul li{
  box-sizing: border-box; 
	margin-bottom: 0;
	flex: 0 0 calc((100% - 40px) / 3);
}
.web .flow ul li .flow_open_btn,
.movie .flow ul li .flow_open_btn{
	display: none;
}
.web .flow ul li .flow_open_txt,
.movie .flow ul li .flow_open_txt{
	display: block;
}
.top .flow ul li:last-child,
.web .flow ul li:last-child,
.movie .flow ul li:last-child{
	margin-bottom: 0;
}
.top .flow ul li h3,
.web .flow ul li h3,
.movie .flow ul li h3,
.sns_ad .flow ul li h3{
	color: var(--navy);
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	display: block;
	margin-bottom: 10px;
}
.web .flow ul li .flex_,
.movie .flow ul li .flex_{
	display: block;
}
.top .flow ul li h3 span,
.web .flow ul li h3 span,
.movie .flow ul li h3 span,
.sns_ad .flow ul li h3 span{
	display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  font-size: 2rem;
}

/***************** top faq 960 *******************/
.top .faq{
	padding: 50px 0;
}
.faq dl{
	margin-bottom: 30px;
}
.faq dl dt{
	background: url(../images/common/question_icon.svg) 15px 50% no-repeat;
	background-size: 30px auto;
	background-color: var(--bg_blue);
	font-weight: bold;
	padding: 30px 40px 30px 60px;
	/*border-radius: 50px;*/
	font-size: 18px;
	transition: all 0.5s 0s ease-in-out;
}
.faq dl dt:after{
	position: absolute;
	content: "+";
	font-weight: bold;
	font-size: 25px;	
	right: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);	
}
.faq dl dt.active:after{
	content: "−";  /* 開いたらマイナス */
}
.faq dl dt.active{
	background: url(../images/common/question_icon.svg) 15px 50% no-repeat;
	background-size: 30px auto;
	background-color: var(--bg_blue);
}
.faq dl dd{
	/*background: url(../images/common/a_icon.svg) 15px 50% no-repeat;*/
	background-size: 17px auto;
	padding: 10px 10px 10px 0px;
	display: none;
	font-size: 18px;
}
/***************** top feature 960 *******************/
.top .feature {
	padding: 100px 0;

}
.top .feature .point{
	margin-bottom: 50px;
	align-items: stretch;
}
.top .feature .point._1,
.top .feature .point._3{
	flex-direction: row-reverse;	
}
.top .feature .point._2{
	flex-direction: row;	
}
.top .feature .point .photo,
.top .feature .point .detail{
	width: 47%;
}
.top .feature .point .photo{
	/*margin-top: 60px;*/
}
.top .feature .point .photo {
    display: flex;
    align-items: center;  /* 縦中央寄せ */
    justify-content: center; /* 横中央寄せ */
    overflow: hidden;
  }

.top .feature .point .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 余白なしで埋める */
  }

.top .feature .point._3{
	margin-bottom: 0;
}
.top .feature h3{
	font-size: 1.2rem;
	font-weight: bold;
	margin: 10px 0;
}
/***************** top blog 960 *******************/
.top .blog{
	padding: 50px 0;
}
.top .blog ul{
	display: flex;
	justify-content: space-between;
}
.top .blog ul li{
	width: 32%;
	margin-bottom: 0;

}
/***************** top contact 768 *******************/
.footer_contact .item{
	background-color: #fff;
	text-align: center;
	padding: 40px 0;
	margin-bottom: 20px;
}
.footer_contact .form .lead,
.footer_contact .tel .lead{
	font-size: 18px;
}
.footer_contact .tel a{
	color: var(--navy);
	font-weight: 500;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 45px;
  display: block;	
  margin-top: 10px;
}


/********************* top bottom 960 *********************/
.top .bottom{
	padding-bottom: 100px;
}
.top .bottom ul{
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}
.top .bottom ul li a{
	padding: 30px 0 30px 20px;	
	width: 350px;
}
.top .bottom ul li .a_title{
	margin-top: 0;
	font-size: 20px;

}
/********************* footer_contact 960 *********************/
.footer_contact .cta_btn a{
	font-weight: bold;
	background: url(../images/common/arrow_n_r_line.svg) 95% 50% no-repeat;
	background-size: 30px auto;
	background-color: #f6c000;
	color: var(--navy);
	padding: 15px 70px;
	font-size: 18px;

}
.web_select_guide .br_1{
	display: block;
}
/*****************************************************/
/***************** 下層ページ共通　960  *******************/
/*****************************************************/
.lower_visual{
	background: url(../images/common/pixta_83426882_M.jpg) 50% 45% no-repeat; 
	background-size: 2000px;
	position: relative;
}
.lower_visual_inner{
	background: rgba(255, 255, 255, 0.4);
	padding-top: 70px;
}
.lower_visual_inner.img_none{
	background: rgba(255, 255, 255, 0.4);
	padding: 30px 0 50px;
}
.lower_visual_inner.img_none h1{
	margin-top: 40px;
}
.lower_visual h2{
	text-align: left !important;
	padding: 70px 0 !important;
	font-size: 25px !important;
	line-height: 1.2 !important;
	margin-bottom: 0 !important;
}
.lower_visual h2 span{
	font-size: 45px !important;	
}
.lower_visual_inner.img_none h2{
	padding: 50px 0 60px !important;
}
.service_list .lower_visual .title_image{/*サービス一覧*/
	width: 250px;
	bottom: auto;
	margin-top: 30px;	
}
.web .lower_visual .title_image{/*ホームページ制作*/
	width: 300px;
	bottom: auto;
	margin-top: 30px;
}
.blog_page .lower_visual_inner{
	padding-top: 100px;
}

.lower_visual .breadcrumb .inner_wrap{
	display: block;
}

.lower_top_lead .top_txt{
	font-size: 18px;
	line-height: 2;
}



/*このような課題を解決します*/
.problem{
	padding-bottom: 150px;
}
.problem h2 {
	font-size: 40px;
}
.problem h2 br{
	display: none;
}

.problem .inner_wrap{
	max-width: 1100px;
}


.problem ul {
	display: flex;
	justify-content: space-around;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.problem ul li br{
	display: block;
}
.problem ul li img{
	width: auto;
	height: 70px;
	position: absolute;
	right: 10px;
	bottom: -30px;
	width: 70px;
}
.movie .problem ul li{
	padding: 4% 1.5%;
	text-align: center;
}
.web .problem ul li{
	padding: 3% 1%;
	text-align: center;
	margin: 0;
	display: flex;
	justify-content: center;
	flex-direction:column;
}

.sns_ad .problem ul li,
.sns_marketing .problem ul li{
	width: 26%;
	padding: 3% 2%;
	display: flex;
	flex-direction: column;
}
.sns_ad .problem ul li .list_inner{
	flex-grow: 1; 
	display: flex;
	flex-direction: column;

	text-align: center;
}
.sns_ad .problem ul li h3{
	flex-grow: 1;
}
.sns_ad .problem ul li p{
	flex-grow: 1;
	text-align: left;
}

.works .frame .movie_inner{
	padding:  10px;
}
.works .frame.web a{
	display: block;
	padding: 10px;
}

/*
.movie .works .frame .movie_inner{
	padding:  5%;
}
.case .works .frame a,
.web .works .frame.web a{
	display: block;
	padding: 5%;
}
*/
.works .works ul li.frame.web,
.works .works ul li.frame.movie{
	width: 31%;
}

.point .frame,
.merit .frame{
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
}
.point .frame .txt_area,
.merit .frame .txt_area{
	padding: 20px;	
	width: 70%;
	padding: 4%;
}
.point .frame .icon_area,
.merit .frame .icon_area{
	width: 30%;
	height: auto;
	/*
  background: url(../images/common/circle_y_l_w.svg) 0 100% no-repeat,
  						-moz-linear-gradient(left, #f1f8fd 0% , #e0eaf7);
  background: url(../images/common/circle_y_l_w.svg) 0 100% no-repeat,
  						-webkit-linear-gradient(left, #f1f8fd 0%, #e0eaf7);
  background: url(../images/common/circle_y_l_w.svg) 0 100% no-repeat,
  						linear-gradient(to right, #f1f8fd 0%, #e0eaf7);
 */
  position: relative;
}
.point .frame .icon_area img,
.merit .frame .icon_area img{
	position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	height: 110px;
	margin-top: auto;
	/*filter: drop-shadow(0 3px 5px #7595c6);*/
}
.flow .frame{
	width: 864px;
	margin: 0 auto;
	margin-bottom: 40px;
}
.flow dl dt,
.flow dl dd{
	font-size: 1rem;
}
.qa dl{
	width: 864px;
	margin: 0 auto;
	margin-bottom: 30px;
}
.qa dl dt,
.qa dl dd{
	font-size: 1rem;
}
.lower section{
	padding: 50px 0 150px;
}
.cta_section{
	padding: 200px 0 !important;
}

/********************* web 960 *********************/
/********************* movie 960 *********************/
.lower_top_lead h2,
.web h2,
.movie h2{
	font-weight: bold;
	padding-top: 1.2rem;
	text-align: center;

	font-size: 20px;
	line-height: 40px;
	margin-bottom: 50px;

}
.lower_top_lead h2 span,
.web h2 span,
.movie h2 span{
	font-size: 35px;
}
.web .plan .lead,
.movie .plan .lead{
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: stretch;     /* ← 等高 */
  gap: 5%;
  margin-bottom: 50px;
  min-height: 0;            /* ← 収縮を阻害しない保険 */
}

/* 画像側のコンテナ */
.web .plan .lead .photo,
.movie .plan .lead .photo{
  flex: 0 0 45%;
  position: relative;     /* ← これで子のabsoluteの基準に */
  overflow: hidden;
  margin: 0;
  align-self: stretch;    /* 等高にする */
}
.web .plan .lead p,
.movie .plan .lead p{
  flex: 1 1 0;
  margin-bottom: 0;
	line-height: 2.2;
	font-size: 18px;
	line-height: 2.5;
	/*letter-spacing: 3px;*/
	margin-bottom: 0;
}
.web .plan .web_plan .plan_item {
	margin-bottom: 50px;
}
.web .plan .web_plan .plan_item .plan_name{
	width: 35%;
}
.web .plan .web_plan .plan_item .plan_name h4 br{
	display: none;
}
.web .plan .web_plan .plan_item .plan_feature {
	width: 65%;

}
.web .plan .web_plan .plan_item .plan_feature .feature li,
.web .plan .web_plan .plan_item .about ul li{
	font-size: 16px !important;
}
.web .plan .web_plan .plan_item .detail br{
	display: none;
}
.web .plan .web_plan .plan_item .plan_tag{
	width: 100%;
	margin-bottom: 60px;
	font-size: 25px;
}
.web .plan .web_plan .plan_item .price_value{
	font-size: 45px;
}
.web .plan .web_plan .plan_item .detail dd{
	font-size: 20px;
}
.web .plan .web_plan .plan_item .about {
	padding: 20px 30px 50px;
}
.web .plan .web_plan .plan_item .about h5{
	font-size: 20px;
}
.web .plan .web_plan .plan_item .about .cta_btn{
	margin-top: 50px;
}
.web .plan .plan_bonus .bonus_lead{
	font-size: 27px;
	letter-spacing: 3px;
}
.web .plan_bonus .bonus_price p{
	font-size: 22px;
	line-height: 2;
	letter-spacing: 3px;
}
.web .plan .plan_bonus .plan_name{
	font-size: 25px;
	line-height: 1.5;
	letter-spacing: 3px;
}
.web .plan_bonus .bonus_detail table td{
	padding: 10px;
}
.web .common_services .lead {
	text-align: center;
}
.web .common_services .lead br{
	display: block;
}
.web .common_services .ul_wrap{
	justify-content: space-between;
	padding: 50px;
  align-items: stretch;        

}
.web .common_services {
	padding-bottom: 100px;
}
.web .common_services ul.first,
.web .common_services ul.second{
	width: 50%;
  display: flex;              
  flex-direction: column;
  align-items: stretch;
}
.web .common_services ul.first{
	border-right: 1px solid var(--l_light_gray);
	padding-right: 5%;
}
.web .common_services ul.second{
	padding-left: 5%;
}
.web .common_services ul li {
	margin-bottom: 30px;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 50px;
  flex: 1;                     
  display: flex;               
  flex-direction: column;
}
.web .common_services ul li h3{
	font-size: 19px;
}
.web .common_services ul li h3:before{
	content: "";
	display: inline-block;
	background: url(../images/common/check_icon_navy.svg) no-repeat;
	background-size: 18px 18px;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	vertical-align: -2px;
}
.web .common_services ul li .common_btn{
	display: none;
}
.web .common_services ul li .common_services_txt{
	display: block;
}
.web .works,
.web .flow,
.web .faq{
	padding: 100px 0;
}
.web .works h3{
	font-size: 14.5px;
	line-height: 2;
	margin-top: 10px;
}
.web .works p{
	font-size: 13px;
	line-height: 2;
}
/********************************************/
.movie .plan{
	padding-bottom: 50px;
}
.movie .plan .movie_plan{
	display: flex;
	justify-content: space-between;
align-items: stretch;
} 
.movie .plan .movie_plan .plan_item{
	width: 32%;
	display: flex;
flex-direction: column;   /* 内部を縦並びに */
justify-content: space-between; /* 中のボタンまで下に揃えたい場合 */

} 
.movie .plan .movie_plan .flex__ {
	margin-bottom: 10px;

	display: block;

}
.movie .plan .movie_plan .flex__ .plan_name{
	width: auto;
}
.movie .plan .movie_plan .flex__ .inner{
	width: auto;
	padding-top: 0;
}
.movie .plan .movie_plan .cta_btn a{
	padding: 10px 20px;
	font-size: 13px;
	padding: 10px 50px;
	font-feature-settings: "palt"		
}
/******************************************/
.movie .plan .plan_table h4{
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 10px;
}
.movie .plan .plan_table .table_wrap{
	width: 100%;         
  -webkit-overflow-scrolling: touch;
}
.movie .plan .plan_table table{
	width: 100%;
	max-width: 1096px;/*pcの幅*/
	border-top: 1px solid var(--gray);
}
.movie .plan .plan_table tr{
	border-bottom: 1px solid var(--gray);
}
.movie .plan .plan_table table th,
.movie .plan .plan_table table td{
	border-left: 1px solid var(--gray);
	border-right: 1px solid var(--gray);
	text-align: center;
	vertical-align: middle;
	padding: 10px 10px;
	font-size: 16px;
	line-height: 1.5;

}
/******************************************/
.movie .plan_works ul{
	display: flex;
	justify-content: space-between;
}

.movie .plan_works li{
	display: block;
	justify-content: space-between;
	align-items: center;
	width: 32%;
}
.movie .plan_works li .video,
.movie .plan_works li .detail_txt{
	width: 100%;
}
.movie .plan_works li .detail_txt .client{
	font-size: 16px;
	margin-bottom: 0px;
}

.web .closing,
.movie .closing{
	padding-bottom: 50px;
}
.web .closing .photo,
.movie .closing .photo  {
  height: auto;
  margin-top: 0;
}
.web .closing .txt h2,
.movie .closing .txt h2{
	font-size: 25px;
	line-height: 1.5;
}
.web .closing .txt p,
.movie .closing .txt p{
	font-size: 18px;
	line-height: 2;
}
.web .closing .last_txt,
.movie .closing .last_txt{
	text-align: center;
	font-size: 20px;
	line-height: 2;
	font-weight: bold;
	padding: 50px 0;
}

/********************* sns_ad 960 *********************/
.sns_ad .sns_ad_contents .contents_list{
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.sns_ad .sns_ad_contents .contents_list._1 li{
	width: 30%;
}
.sns_ad .sns_ad_contents .contents_list._2 li{
	width: 33%;
}
.sns_ad .sns_ad_contents .contents_list li a{
	color: var(--navy);
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid var(--navy);
	display: block;
	padding: 15px 0 ;
}
.sns_ad .sns_ad_frame .frame{
	padding: 5%;
}
.sns_ad .sns_ad_frame .frame_inner {
	position: relative;
	padding: 0;
	margin-bottom: 100px;
}
.sns_ad .sns_ad_frame .frame_inner .txt{
	width: 67%;
	margin-bottom: 30px;
}
.sns_ad .listing .frame_inner .txt{
	width: 100%;
}
.sns_ad .youtube .data {
	position: absolute;
	top: 0;
	right: 0;
	width: 254px;	
	margin-top: 10px;
}
.sns_ad .youtube .data .flex,
.sns_ad .instagram .data .flex{
	display: block;	
}
.sns_ad .facebook .data,
.sns_ad .instagram .data{
	position: absolute;
	top: 0;
	right: 0;
	width: 254px;	
	margin-top: 10px;
}
.sns_ad .facebook .target_group ul{
	display: flex;
	justify-content: space-between;
}
.sns_ad .facebook .target_group ul li{
	width: 27%;
	margin-bottom: 0;
}
.sns_ad .facebook .target_group ul li.frame._1 h5{
	font-feature-settings: "palt"	
}
.sns_ad .facebook .target_group ul li.frame._1 h5 br{	
	display: block;
}
.sns_ad .instagram .target_group ul{
	display: flex;
	justify-content: space-around;
}
.sns_ad .instagram .target_group ul li{
	width: 27%;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}
.sns_ad .instagram .target_group ul li .frame_inner{
	flex-grow: 1; 
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}
.sns_ad .instagram .target_group ul li h5{
	flex-grow: 1;
}
.sns_ad .instagram .target_group ul li.frame._1 h5{
padding-top: 10px;
}
.sns_ad .instagram .target_group ul li p{
	flex-grow: 1;	
}
.sns_ad .instagram .target_group .frame._3 h5{
	background: url(../images/sns_ad/target/ig_icon_3.svg) 0% 50% no-repeat;
	background-size: 20px auto;
	background-color: #fff;
	padding: 10px 0 10px 30px;
	letter-spacing: 0.1px;
}

.sns_ad .listing .frame_inner .data .flex_wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sns_ad .listing .frame_inner .data .flex{
	width: 65%;
}

.sns_ad .listing .frame .data .comment{
	width: 30%;
	padding: 20px;

}
.sns_ad .listing .frame_inner .data figure:first-child{
	margin-right: 20px;
}
.sns_ad .listing .target_group ul{
	display: flex;
	justify-content: space-around;
}
.sns_ad .listing .target_group ul li{
	width: 40%;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}
.sns_ad .listing .target_group ul li .frame_inner{
	flex-grow: 1; 
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}
.sns_ad .listing .target_group ul li h5{
	flex-grow: 1;

}
.sns_ad .listing .target_group ul li p{
	flex-grow: 1;	
}
.sns_ad .price .price_table .dl_1,
.sns_ad .price .price_table .dl_3,
.sns_ad .price .price_table .dl_4{
	width: 20%;
}
.sns_ad .price .price_table .dl_2{
	width: 40%;
	text-align: center;
}
.sns_ad .price .price_table dd{
	padding-top: 20px;
}
.sns_ad .price .price_table .dl_2 .notes br{
	display: block;
}
.sns_ad .price .price_table .dl_1 dd,
.sns_ad .price .price_table .dl_3 dd,
.sns_ad .price .price_table .dl_4 dd{
	font-size: 20px;
}
.sns_ad .price .price_table .dl_2 .rate{
		font-size: 20px;
}
.sns_ad .price .price_table .dl_2 .rate span{
	font-size: 50px
}
.sns_ad .price .price_table .dl_3 dd span,
.sns_ad .price .price_table .dl_4 dd span{
	font-size: 50px;
}
.sns_ad .price .compare h3{
	font-size: 25px;
	padding: 10px 0;
}
.sns_ad .price .compare .th_1 div,
.sns_ad .price .compare .th_2 div{
	padding: 5px 0;
}
.sns_ad .price .compare .td_1 ,
.sns_ad .price .compare .td_2 {
	padding: 15px 0;
}
.sns_ad .price .compare .td_1 br,
.sns_ad .price .compare .td_2 br{
	display: none;
}
.sns_ad .price .compare th{
	width: 25%;
}
/********************* sp_tools 960 *********************/
.sp_tools .lead{
	padding: 0;
}
.sp_tools .lead .inner_wrap{
	padding: 50px 0;
	width: 804px;
	margin: 0 auto;
}
.sp_tools .tool_list{
		padding: 50px 0 100px;
}
.sp_tools .tool_list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sp_tools .tool_list ul li{
	padding: 7%;
	width: 34%;
}
.sp_tools .tool_list ul li h2{
	font-size: 25px;
	padding-bottom: 5%;
}
.sp_tools .tool_list ul li h2 img{
	width: 30px;
	margin-right: 10px;
}
/********************* offline_ad 960 *********************/
.offline_ad .lead{
	padding: 0;
}
.offline_ad .lead .inner_wrap{
	padding: 50px 0;
	width: 804px;
	margin: 0 auto;
}
.offline_ad .ad_list {
		padding: 50px 0 100px;
}
.offline_ad .ad_list .frame_inner,
.offline_ad .ad_list .tools_used {
  padding: 50px;
}
.offline_ad .ad_list .frame h2 {
	font-size: 25px;
	padding-bottom: 5%;
}
.offline_ad .ad_list .frame img {
	width: 30px;
	margin-right: 10px;
}
.offline_ad .ad_list .tools_used {
  margin-top: auto;
  /*padding: 15px;*/
}
.offline_ad .ad_list .tools_used {
	padding: 20px 50px 50px;
}
.offline_ad .ad_list .tools_used h3{
	font-size: 16px;
}
.offline_ad .ad_list .tools_used ul li{
	font-size: 0.9rem;
	margin: 5px 2px;
}
/********************* sns_ad youtube 960 *********************/
.youtube .type .frame .frame_inner{
	padding: 5% 5% 0;
}
.youtube .type .flex_wrap {
    display: flex;
    flex-wrap: wrap; /* li.frame 要素を複数行に折り返し */
    gap: 30px; /* 各項目の間隔 */
}

.youtube .type .frame {
    display: flex;
    flex-direction: column; /* 各 .frame 内部を縦方向に配置 */
    flex: 1;
    width: 30%; /* 必要に応じて調整 */
}

.youtube .type .frame_inner, .point {
    flex: 1; /* 内部の高さを均等にするため */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下の空きを均等にする */
}

.youtube .type .frame .flex {
	 flex: 1;
    display: inline-block;
    gap: 10px; /* 画像とテキストの間の余白 */
}

.youtube .type .frame .image {
    /*flex-shrink: 0; /* 画像サイズを固定 */
    width: 80%;
  	max-width: 230px; /* 画像の最大幅 */
}

.youtube .type .frame .txt {
    flex: 1; /* テキストエリアを残りのスペースに合わせる */
    padding-left: 0;
    width: 100%;
}
.youtube .type .frame .point{
		padding: 20px 5% 5%;
		flex: 1;
}

.youtube .targeting .flex_wrap{
	display: flex;
	justify-content: space-between;
}
.youtube .targeting .frex_left{
	width: 55%;	
}
.youtube .targeting .frex_right{
	width: 40%;	
}
.youtube .targeting .frex_left_1 .flex{
	display: block;
}
.youtube .targeting .frex_left_1 .flex .frame,
.youtube .targeting .frex_left_2 .flex .frame{
	width: auto;
	padding: 20px;
	margin-bottom: 20px;
}
.youtube .operation .frame{
	padding: 5%;
}
.youtube .operation .frame .item{
	margin-bottom: 50px;
	padding: 30px;
}
.youtube .operation .frame .item_txt{
	margin-left: 20px;
	font-size: 18px;
}
.youtube .operation .point_frame{
	display: flex;
	align-items: center;
	padding: 20px;
}
.youtube .operation .point_frame .point{
	width: 15%;
	padding: 0;
}
.youtube .operation .point_frame .point_inner{
	position: relative;
	padding: 0;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	margin: 0 auto;
}
.youtube .operation .point_frame .point_inner span{
	display: block;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    margin-top: -2px;
}
.youtube .operation .point_frame ul{
	width: 80%;
}
.youtube .case ul .frame{
	padding: 50px;
}
.youtube .case .frame .photo{
	width: 37%;
}
.youtube .case .photo img{
	width: 100%;
	height: 160px;
}
.youtube .case .frame .case_list{
	width: 60%;
}
.youtube .case .case_list dt{
	font-size: 16px;
}
.youtube .case .case_list dd{
	font-size: 16px;
	margin-bottom: 10px;
}
.youtube .case .point{
	font-size: 16px;
	line-height: 1.7;
}
.youtube .report .youtube_report ul li{
	width: 27%;
	padding: 20px;
	margin-bottom: 3%;
}
.youtube .analytics_report{
	padding: 5%;
}
.youtube .analytics_report .flex_upper li{
	width: 27%;
	margin-bottom: 3%;
}
.youtube .analytics_report .flex_lower li{
	width: 44%;
}
.youtube .analytics_report h2{
	font-size: 20px;
}
.youtube .analytics_report li{
	border: none;
}
.youtube .analytics_report h3{
 font-size: 16px;
}
.youtube .analytics_report h3 img{
	width: 30px;
	margin-right: 10px;
}
.youtube .analytics_report .iphone{
	background-color: #ecf2fa;
	padding: 20px;
}
.youtube .analytics_report p,
.youtube .analytics_report .iphone p,
.youtube .analytics_report .iphone h4,
.youtube .analytics_report .bottom p{
 font-size: 16px;
}
.youtube .analytics_report .bottom{
	margin-top: 20px;
}

/********************* sns_marketing 960 *********************/
.sns_marketing .service .frame{
	padding: 5%;
}
.sns_marketing .feature .frame .frame_inner{
	padding: 3%;
}
.sns_marketing .service .frame ul li{
	/*width: 43%;*/
	padding: 3%;
	margin-bottom: 3%;
}
.sns_marketing .service .support{
	font-size: 25px;
}
.sns_marketing .service .frame h3{
	font-size: 22px;
}
.sns_marketing .feature .feature_list{
	padding: 5%;
}
.sns_marketing .feature .feature_list .frame.list{
	padding: 5%;
}
.sns_marketing .feature .frame .scene{
	padding: 5% 8%;
}
.sns_marketing .feature .frame h3{
	font-size: 25px;
}
.sns_marketing .service ul li a{
	font-size: 16px;	
}
.sns_marketing .service .data{
	max-width: 900px;
	margin: 0 auto;
}
.sns_marketing .feature .frame .scene .flex{
	display: flex;
	align-items: center;
}
.sns_marketing .feature .frame .scene h5{
	background: url(../images/sns_marketing/scene.svg) 15px 0 no-repeat;
	background-size: 50px auto;
	padding: 30px 0 0 0;
	width: 15%;
}
.sns_marketing .feature .frame .scene_list{
	width: 90%;
}
.sns_marketing .feature .frame .scene ul li{
	width: 45%;
	max-width: 45%;
	margin-bottom: 10px;
	padding: 2%;

}
.sns_marketing .price table{
	width: 100%;
	margin: 0;
}
.sns_marketing .price table td{
	width: 27%;
	padding: 10px;
	font-size: 16px;
}
.sns_marketing .price table th{
	width: 19%;
	font-size: 16px;
}
.sns_marketing .price .option ul{
	padding: 3%;
}
.sns_marketing .price .option ul li h4{
	font-size: 16px;
}
.sns_marketing .price .option ul li .flex{
	display: flex;
	align-items: center;
}
.sns_marketing .price .option ul li .flex p{
	width: 80%;
	font-size: 16px;
}
.sns_marketing .price .option ul li .flex .option_price{
	width: 20%;	
	font-size: 16px;
}
/********************* cases 960 *********************/
/********************* works 960 *********************/
/********************* project 960 *********************/
.project .sugamoekimae .frame.logo{
	padding: 50px;
	margin-top: 100px;
}
.project .sugamoekimae .logo{
	display: flex;
	align-items: center;
}
.project .sugamoekimae .logo .img{
	width: 30%;
}
.project .sugamoekimae .logo .img img{
	width: 200px;
}
.project .sugamoekimae .logo .txt{
	width: 70%;	
}
.project .content{
	padding-bottom: 50px;
}
.project .button_navy a{
	padding: 20px 70px;
	margin: 50px 0;
}
/********************* company 960 *********************/
.company .inner_wrap{
	width: 912px;
	margin: 0 auto;
}
.company .profile{
	margin-top: 0;
}
/********************* privacy 960 *********************/
.privacy .inner_wrap{
	max-width: 912px;
}
.privacy .top_txt{
	padding: 50px 0;
}
.privacy .body_txt{
	padding: 50px 0;
}
.privacy .body_txt .inner{
	background-color: #fff;
	padding: 50px;
}
.privacy .body_txt dl{
	margin-bottom: 20px;
}
.privacy .body_txt dt{
	font-weight: 700;
}
/********************* service_list 960 *********************/

.service_list .service_group{
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  gap: 30px;
  margin-top: 50px;
}

.service_list .service_group .list{
  flex: 0 0 calc(33% - 20px);  /* 2列。余白を引いた幅 */
  display: flex;
  box-sizing: border-box;      /* ←半角スペースに修正 */
  margin: 0;
}
.service_list .service_group .list a{
  display: block;
  width: 100%;
  max-width: 100%;	 
}
/********************* contact 960 *********************/
.contact .inner_wrap,
.contact_form.confirm .inner_wrap{
	width: 864px;
	margin: 0 auto;
}
/***************** contact_form 960 *******************/
.contact_form.confirm h2{
	font-size: 35px;
	padding-top: 0;
	margin-bottom: 30px;
}

/***************** footer 960 *******************/
footer .inner_wrap{
	width: 90%;
}
footer .footer_logo{
	margin-top: 0px;
	width: 180px;
}
footer .flex_wrap{
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
}
footer .group_1_2_3{
	display: flex;
	justify-content: space-between;
	width: 600px;
}
footer address{
	padding-top: 100px;
}
}/*960px-end*/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/**********   *****                    ******                    *****                    **********/
/**********   **********************   ******   **************   *****   **************   **********/
/**********   **********************   ******   **************   *****   **************   **********/
/**********   **********************   ******   **************   *****   **************   **********/
/**********   **********************   ******   **************   *****   **************   **********/
/**********   *****                    ******   **************   *****   **************   **********/
/**********   *****   ***********************   **************   *****   **************   **********/
/**********   *****   ***********************   **************   *****   **************   **********/
/**********   *****   ***********************   **************   *****   **************   **********/
/**********   *****                    ******                    *****                    **********/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
@media only screen and (min-width: 1200px) {
/***************** header *******************/
.top_page::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	background: url("../images/common/pixta_83426882_M.jpg") center 0px no-repeat; 
	background-size: 2000px auto;
	width: 100%;
	height: 100%;
}
/*********************　ページ共通 0 *********************/
.inner_wrap{
	width: 1100px;
	margin: 0 auto;		
}
/*********************　ページ共通 *********************/
/*
.web h2{
	margin-bottom: 30px;
}
/*********************　ページ共通 *********************/
/***************** top 1200 *******************/
.top .main_visual{
	padding: 200px 0 300px;
	position: relative;
}
.top .main_visual h1 br{
	display: none;
}
.top .main_visual h1{
	line-height: 1.5;
	position: absolute;
	bottom: -275px;
	right: 20px;
}
.top .main_visual h2{
	font-size: 60px;
	line-height: 1.5;
}
.top .main_visual .sub{
	font-size: 30px;
	line-height: 1.5;
}
.top .main_visual .main_icon{
	position: absolute;
	bottom: -67px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  max-width: 650px;


}

/****************　ポイント 1200 ***************/
.top .service .web_feature li{
	background-color: #fff;
	margin-bottom: 0;
	padding: 0 20px 20px 20px;
	width: 26%;
}
.top .service .web_feature li h4 img{
	height: 40px;
	width: auto;
}
.top .service .web_feature li h4{
	color: var(--navy);
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;      
	gap: 5px;                
	justify-content: center;
	margin: 20px 0 10px; 
	font-size: 18px;
}


/****************　プラン 1200 ***************/
.top .service .web_plan li .plan_title br{
	display: none;
}
.top .service .web_plan li .special_icon_link{
	position: absolute;
	width: 45px;
	top: 0px;
	margin-left: 7px;
}
.top .service .web_plan li .plan_price .price_value{
	font-family: 'Roboto', sans-serif;
	font-size: 45px;
}
.top .service .web_plan li .plan_price{
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 20px;
}
/**************** その他のサービス 1200 ***************/
.top .service .other_service ul li h4{
	display: flex;
	gap: 10px;
	align-items: center;
	text-align: left;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 18px;
}
/***************** top  flow 1200 *******************/
.top .flow ul li h3{
	color: var(--navy);
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	margin-bottom: 10px;
}

/***************** top faq 1200 *******************/
.top .feature h3{
	font-size: 25px;
	line-height: 40px;
}
.top .feature p{
	font-size: 18px;
	line-height: 40px;
}
/***************** top blog 1200 *******************/
.top .blog h3{
	font-size: 18px;
}
/********************* top contact 1200 *********************/
.footer_contact{
	padding: 50px 0 0;
}
.footer_contact .bg_blue{
	padding: 0;
}
.footer_contact h3,
.footer_contact .closing{
	padding: 50px 0;
}










/********************* top bottom 1200 *********************/
.top .bottom ul{
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}
.top .bottom ul li a{
	padding: 30px 0 30px 20px;	
	width: 450px;
}
.top .bottom ul li .a_title{
	margin-top: 0;
	font-size: 20px;

}
/*****************************************************/
/***************** 下層ページ共通　1200  *******************/
/*****************************************************/


/*
.point h3{
	font-size: 22px;
	margin-bottom: 20px;
}
/********************* web 1200 *********************/

.web .flow ul li,
.movie .flow ul li{
  box-sizing: border-box; 
	margin-bottom: 0;
	flex: 0 0 calc((100% - 60px) / 4);
}
/********************* movie 1200 *********************/

/********************* sns_ad 1200 *********************/
.sns_ad .youtube .data,
.sns_ad .facebook .data,
.sns_ad .instagram .data{
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;	
	margin-top: 10px;
}
.sns_ad .youtube .frame_inner {
	position: relative;
	padding: 0;
	margin-bottom: 150px;
}
.sns_ad .price .price_head .top{
	font-size: 30px;
	line-height: 50px;
}
.sns_ad .price .price_head .middle {
	font-size: 30px;
}
.sns_ad .price .price_head .middle span{
	font-size: 37px;
	padding: 10px 20px;
}
.sns_ad .price .price_head h3 .l_blue{
	color: #0071bc;
	font-size: 40px;
}
.sns_ad .price .price_head h3 .num{
	font-size: 70px;
}
.sns_ad .price .price_table dt{
		font-size: 16px;
}
.sns_ad .price .price_table dd{

}
.sns_ad .price .price_table .dl_2 .notes{
	text-align: center;
}
.sns_ad .price .price_table .dl_2 .notes br{
	display: block;
}
.sns_ad .price .price_table dd{
	padding-top: 20px;
}
.sns_ad .price .price_table .dl_1 dd,
.sns_ad .price .price_table .dl_3 dd,
.sns_ad .price .price_table .dl_4 dd{
	font-size: 20px;
}
.sns_ad .price .price_table .dl_2 .rate{
		font-size: 20px;
}
.sns_ad .price .price_table .dl_2 .rate span{
	font-size: 50px
}
.sns_ad .price .price_table .dl_3 dd span,
.sns_ad .price .price_table .dl_4 dd span{
	font-size: 50px;
}

/********************* youtube 1200 *********************/

.youtube .targeting .frex_left{
	width: 48%;		
}
.youtube .targeting .frex_left_1 {
	display: flex;
	justify-content: space-between;
}
.youtube .targeting .frex_left_1 li{
	width: 48%;
}
.youtube .targeting .frex_left_1 .flex .frame{
	margin-bottom: 25px;
}
.youtube .targeting .frex_left_1 .network ul li,
.youtube .targeting .frex_left_1 .age ul li,
.youtube .targeting .frex_left_1 .income ul li{
	width: 100%;
	display: block;
}
.youtube .targeting .frex_right{
	width: 49%;	
}
.youtube .targeting .frex_right li.frame{
	padding: 10px;
}
/********************* sns_marketing 1200 *********************/
.sns_marketing .service ul li a br{
	display: none;
}
.sns_marketing .feature .frame.list h4{
	font-size: 18px;
}
.sns_marketing .price table .tr_top .catch_inner{
	font-size: 16px;
}












/********************* web 1200 *********************/

/********************* ad 1200 *********************/

/********************* company 768 *********************/

/***************** footer 0 *******************/
footer .inner_wrap{
	width: 1080px;
}
footer .group_1_2_3{
	width: 700px;
}
}/*1200px-end*/
@media only screen and (min-width: 1300px) {
/*************************************************************************/
/*********************　ページ共通 0 *********************/

}/*1340px-end*/
@media only screen and (min-width: 1400px) {
/*************************************************************************/

}/*1400px-end*/
@media only screen and (min-width: 1500px) {
/*************************************************************************/

}/*1500px-end*/
@media only screen and (min-width: 2000px) {
/*************************************************************************/
.top_page::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	background: url("../images/common/pixta_83426882_M.jpg") center -180px no-repeat; 
	background-size: 2600px auto;
	width: 100%;
	height: 100%;
}
.lower_visual{
	background: url(../images/common/pixta_83426882_M.jpg) 50% 45% no-repeat; 
	background-size: 2600px;
	position: relative;
}
}/*2000px-end*/