/*********************************
    サイドバー 運送会社バナーcss
*********************************/

.sideBanner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid #000;
	background-color: #fff;
	align-items: center;
	font-family: 'GenEiMGothic2';
}

.deliveryStatus {
	padding-left: 5px;
	margin-top: 10px;
	background: #FF2C14;
	color: #fff;
	font-size: 11px;
	line-height: 2;
}

.sideBanner.yamato {
	height: 122px;background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 88%,
		rgba(6,131,120,1) 89%, rgba(6,131,120,1) 96%,
		rgba(246,206,41,1) 97%, rgba(246,206,41,1) 100%);
}

.sideBanner.sagawa {
	height: 122px;background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 88%,
		rgba(59,73,159,1) 89%, rgba(59,73,159,1) 96%,
		rgba(59,73,159,1) 97%, rgba(59,73,159,1) 100%);
}

.yamatoLogo {
	display: flex;
	align-items: center;
	margin-top: 3px;
	height: 40px;
}

.yamatoLogo > p {
	padding-left: 4px;
	font-family: MPLUS1;
	font-size: 32px;
	font-weight: bold;
}

.yamatoLogo + p {
	margin-top: 6px;
	font-size: 17px;
	font-weight: bold;
}

.sideBanner.fukuyama {
	height: 120px;
}

.fukuyamaLogo {
	position: relative;
	left: -6px;
	display: flex;
	margin-top: 16px;
	height: 48px;
}

.fukuyamaLogo > div {
	padding-left: 5px;
}

/*福山通運*/
.fukuyamaLogo > div > p:nth-child(1) {
	font-family: MPLUS1;
	font-size: 36px;
	font-weight: bold;
}

/*FUKUYAMA TRANSPORTING CO.LTD.*/
.fukuyamaLogo > div > p:nth-child(2) {
	font-size: 10px;
	font-family: 'MPLUS1';
	letter-spacing: -1.3px;
	margin-top: 4px;
	font-weight: bold;
}


/***********************
      　WEB入稿
 **********************/

.sideBanner.draft {
	aspect-ratio: 1/1;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	color: #fff;
	background: #FF2C14;
}

.draft * {
	position: absolute;
	text-align: center;
}

.draft p:nth-child(1) {
	width: 93.5%;
	top: 3.7%;
	left: 3.8%;
	font-size: 14px;
	line-height: 2.3;
	background: #FFFD33;
	color: #FF2C14;
}

.draft p:nth-child(2) {
	top:23%;
	right: 4%;
	font-size: 20px;
	color:#fff;
	font-weight:500;
}

.draft img:nth-child(3) {
	top: 14%;
	left: 2%;
	width: 26%;
	height: auto !important;
	z-index: 1;
}

.draft p:nth-child(4) {
	top:37%;
	width: 100%;
	padding-right:6%;
	line-height: 1.3;
	font-size: 51px;
	background-color:#fff;
	font-weight:900;
	font-style:italic;
	color:#FF2C14;
}

.draft p:nth-child(5) {
	top:68%;
	font-size: 28px;
	color:#fff;
	left:13%;
}

.draft img:nth-child(6){
	right: 12%;
	top: 23%;
	width: 17%;
	aspect-ratio: 91/108;
}

.draft p:nth-child(7) {
	top:84%;
	left:11%;
	width: 80%;
	padding-left: 3%;
	font-size: 13px;
	line-height: 2.4;
	letter-spacing: .5px;
	background:#fff;
	color:#000;
}


/***********************
      自動見積書発行
 **********************/

.mitsumorisyo * {
	position: absolute;
	text-align: right;
}

.sideBanner.mitsumorisyo {
	aspect-ratio: 1/1;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	background-color: #03FCFE;
}

.mitsumorisyo p:nth-child(1) {
	top: 2%;
	font-size: 18px;
	color: #000;
	letter-spacing: -.5px;
	text-shadow: 1.2px  1.2px .6px #fff,
	-1.2px  1.2px .6px #fff,
	1.2px -1.2px .6px #fff,
	-1.2px -1.2px .6px #fff,
	1.2px  0px .6px #fff,
	0px  1.2px .6px #fff,
	-1.2px  0px .6px #fff,
	0px -1.2px .6px #fff;
	border-top: 4px solid #fff;
	display: block;
	width: 100%;
	padding: 5% 2% 0 0;
}

.mitsumorisyo p:nth-child(1):after {
	content: '/';
	display: inline-block;
	font-size: .4em;
      -webkit-transform: rotate(30deg);
          -ms-transform: rotate(30deg);
              transform: rotate(30deg);
}

.mitsumorisyo p:nth-child(1):before {
	content: '/';
	display: inline-block;
	font-size: .4em;
	margin-right: 1.4%;
  -webkit-transform: rotate(303deg);
      -ms-transform: rotate(303deg);
          transform: rotate(303deg);
}

.mitsumorisyo img:nth-child(2) {
	top: -5%;
  left: -30%;
  width: 74%;
  height: auto !important;
  aspect-ratio: 2302/3840;
}

.mitsumorisyo p:nth-child(3) {
	right: 2%;
	top: 20%;
	font-size: 29px;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -1.3px;
	-webkit-text-stroke: .8px #B12922;
	text-shadow: 1.6px  1.6px .8px #6F3B3C,
	-1.6px  1.6px .8px #6F3B3C,
	1.6px -1.6px .8px #6F3B3C,
	-1.6px -1.6px .8px #6F3B3C,
	1.6px  0px .8px #6F3B3C,
	0px  1.6px .8px #6F3B3C,
	-1.6px  0px .8px #6F3B3C,
	0px -1.6px .8px #6F3B3C;
}

.mitsumorisyo p:nth-child(4) {
	right: 3%;
	top: 37%;
	font-size: 18px;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -1px;
	text-shadow: 2px  2px 1px #000000,
	-2px  2px 1px #000000,
	2px -2px 1px #000000,
	-2px -2px 1px #000000,
	2px  0px 1px #000000,
	0px  2px 1px #000000,
	-2px  0px 1px #000000,
	0px -2px 1px #000000;
}

.mitsumorisyo p:nth-child(5) {
	right: 2%;
	bottom: 27%;
	font-size: 17px;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -1px;
	text-shadow    : 
	2px  2px 1px #000000,
	-2px  2px 1px #000000,
	2px -2px 1px #000000,
	-2px -2px 1px #000000,
	2px  0px 1px #000000,
	0px  2px 1px #000000,
	-2px  0px 1px #000000,
	0px -2px 1px #000000; 
}

.mitsumorisyo p:nth-child(6) {
	display: block;
	width: 100%;
	font-size: 20px;
	color: #000;
	line-height: 2.8;
	letter-spacing: -1px;
	background: -o-linear-gradient(top, rgba(251,250,187,1) 0%, rgba(254,248,90,1) 10%, rgba(254,248,90,1) 93%, rgba(197,191,36,1) 100%);
	background: -o-linear-gradient(top, #FFFDD6 0%, rgba(251,250,187,1) 10%, rgba(254,248,90,1) 20%, rgba(254,248,90,1) 85%, rgba(197,191,36,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFDD6), color-stop(10%, rgba(251,250,187,1)), color-stop(20%, rgba(254,248,90,1)), color-stop(85%, rgba(254,248,90,1)), to(rgba(197,191,36,1)));
	background: linear-gradient(180deg, #FFFDD6 0%, rgba(251,250,187,1) 10%, rgba(254,248,90,1) 20%, rgba(254,248,90,1) 85%, rgba(197,191,36,1) 100%);
	padding-right: 14%;
	bottom: 0;
}

.mitsumorisyo p:nth-child(6):after {
	content: '>';
	position: absolute;
	bottom: 32%;
	right: 5%;
	width: 18px;
	height: 18px;
	padding-right: 2%;
	font-size: .6em;
	line-height: 1.4;
	background-color: #fff;
	border-radius: 360px;
}

/***********************
      スタッフBLOG
 **********************/

.sideBanner.staff_blog {
	aspect-ratio: 1/1;
	font-weight: 500;
	border: none;
}

/*border用*/
.sideBanner.staff_blog:after {
	content: '';
	position: absolute;
	width: 100%;
	aspect-ratio: 1/1;
	border: 1px solid #BFBFBF;
}

.staff_blog * {
	position: absolute;
	text-align: center;
}

.staff_blog p:nth-child(1){
	display: block;
	width: 100%;
	color: #fff;
	font-size: 16.5px;
	line-height: 2;
	font-style: italic;
	background-color: #1A2B70;
}

.staff_blog p:nth-child(2){
	top: 18%;
	color: #1A2B70;
	font-size: 14px;
	margin-right: -3%;
	
}

.staff_blog p:nth-child(3){
	top: 25%;
	color: #1A2B70;
	font-size: 55px;
	font-weight: 900;
	font-style: italic;
}

.staff_blog p:nth-child(4){
	right: 8%;
	bottom: 40.5%;
	font-size: 11px;
	z-index: 1;
	color: #000;
	
}

.staff_blog p:nth-child(5){
	right: 7%;
	bottom: 24%;
	font-size: 11px;
	z-index: 1;
	color: #000;
}

.staff_blog p:nth-child(6){
	right: 11%;
	bottom: 8.3%;
	font-size: 11px;
	z-index: 1;
	color: #000;
}

.staff_blog img:nth-child(7){
	bottom: 0;
	width: 100%;
	height: auto !important;
	aspect-ratio: 75/39;
}

/***********************
　テンプレート（定型サイズ）
 **********************/

.sideBanner.template {
	aspect-ratio: 150/71;
	font-weight: 700;
	border-color: #CCCCCC;
}

.template * {
	position: absolute;
	text-align: center;
}

.template p:nth-child(1){
	left: -1px;
	top: -1px;
	padding: 5.5% 5.5% 5% 3.5%;
	color: #fff;
	font-size: 29px;
	line-height: .9;
	font-style: italic;
	background: #000;
	border-bottom-right-radius: 18px;
}

.template p:nth-child(2){
	left: 4.5%;
	bottom: 17%;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
}

.template p:nth-child(3){
	left: 4.6%;
	bottom: 5%;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.4px;
}

.template img:nth-child(4){
	right: 2%;
	bottom: 28%;
	width: 30%;
	height: auto !important;
	aspect-ratio: 87/90;
}

.template p:nth-child(5){
	display: block;
	padding: 0 1%;
	right: 2%;
	bottom: 8%;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(50%, #ECEE55));
  background: -o-linear-gradient(transparent 70%, #ECEE55 50%);
  background: linear-gradient(transparent 70%, #ECEE55 50%);
}

/***********************
  　テンプレート(学会用)
 **********************/

.side_gakkai p:nth-child(1) {
	padding: 4% 6% 3% 4%;
}

.side_gakkai p:nth-child(2) {
	left: 3%;
	bottom: 22%;
	font-size: 11px;
	letter-spacing: -.8px;
}

.side_gakkai p:nth-child(3) {
	left: 3%;
	bottom: 7%;
	font-size: 11px;
	letter-spacing: -.8px;
}

/***********************
   　ログインはこちら
 **********************/

.sideBanner.login {
	aspect-ratio: 250/52;
	font-weight: 700;
	border: 3px solid #13AD5F;
	border-radius: 6px;
	background-color: #059038;
}

.sideBanner.login * {
	position: absolute;
}

.login img:nth-child(1) {
	top: 16%;
	left: 1%;
	height: 72% !important;
	aspect-ratio: 1/1;
}

.login p:nth-child(2) {
	right: 4.5%;
	top: 16%;
	color: #F3F431;
	font-size: 19.5px;
	font-weight: 400;
}

.login p:nth-child(3) {
	right: 2.5%;
	bottom: 15%;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}

/***********************
 　 新規会員登録はこちら
 **********************/

.sideBanner.newMember {
	aspect-ratio: 250/35;
	padding: 3.1% 3.7% .7% 3%;
	font-weight: 500;
	border: none;
}

.newMember p {
	color: #fff;
	font-size: 14px;
	letter-spacing: .4px;
	width: 100%;
	height: 100%;
	padding: 2.5% 0 0 7%;
	background: rgb(32,171,52);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(32,171,52,1)), to(rgba(132,192,34,1)));
	background: -o-linear-gradient(top, rgba(32,171,52,1) 0%, rgba(132,192,34,1) 100%);
	background: linear-gradient(180deg, rgba(32,171,52,1) 0%, rgba(132,192,34,1) 100%);
	border-radius: 6px;
	text-shadow: 1px 1px #426E34;
}



/***********************
  　 著作権等について
 **********************/

.sideBanner.copyright {
	-webkit-box-align: normal;
	-ms-flex-align: normal;
	align-items: normal;
	aspect-ratio: 246/62;
	font-weight: 700;
	border: none;
}

.copyright div {
	width: 98%;
	height: 100%;
	background: #EFF2F1;
	padding: 1.6% 1.2%;
	border: 1px solid;
}

.copyright p {
	width: 100%;
	padding-top: 2.7%;
	color: #fff;
	line-height: 1.3;
	text-align: center;
	background: #1B2787;
	height: 100%;
}


/***********************
  　　 入稿方法解説
 **********************/

.sideBanner.howto {
	aspect-ratio: 245/38;
	font-weight: 700;
	border: none;
	padding: 1% 3.3% 1.4% .8%;
}

.howto > div {
	width: 100%;
	height: 100%;
	border: 1px solid #c0c0c0;
	background: rgb(252,251,254);
	background: rgb(252,251,254);
}

.howto > div img:nth-child(1) {
	position: absolute;
	left: 0;
	height: 81% !important;
	aspect-ratio: 1/1;
}

.howto > div p:nth-child(2) {
	position: absolute;
	top: 29%;
	right: 7%;
	color: #2A2524;
	font-size: 16.7px;
	font-weight: 500;
}

/***********************
    お困りの方はこちら
 **********************/

.sideBanner.trouble {
	-webkit-box-align: normal;
	-ms-flex-align: normal;
	align-items: normal;
	aspect-ratio: 245/75;
	font-weight: 700;
	border: none;
}

.sideBanner.trouble > div {
	width: 98%;
	height: 100%;
	position: relative;
	background: rgb(64,175,55);
	background: -webkit-gradient(linear, left top, right top, from(rgba(64,175,55,1)), to(rgba(29,125,57,1)));
	background: -o-linear-gradient(left, rgba(64,175,55,1) 0%, rgba(29,125,57,1) 100%);
	background: linear-gradient(90deg, rgba(64,175,55,1) 0%, rgba(29,125,57,1) 100%);
	border-radius: 5px;
}

.sideBanner.trouble > div * {
	position: absolute;
}

.trouble > div p:nth-child(1) {
	left: 19%;
	top: 6%;
	color: #FBFFF5;
	font-size: 19px;
	font-weight: 500;
}

.trouble > div p:nth-child(2) {
	left: 4%;
	top: 34%;
	color: #FEF231;
	font-size: 25px;
	font-family: "MPLUS1";
}

.trouble > div p:nth-child(3) {
	left: 15.5%;
	bottom: 7%;
	color: #FBFFF5;
	font-size: 19px;
	font-weight: 500;
}

/***********************
  　　illustrator
 **********************/

.sideBanner.illustrator_banner {
	aspect-ratio: 250/171;
	border: none;
}

.sideBanner.photoshop_banner {
	aspect-ratio: 847/612;
	border: none;
}

.side_content_top_mv{
  position: relative;
  width: 100%;
  color: #320301;
  font-family: "源ノ角ゴシックJP";
  font-weight: 500;
  font-size: 12px;
  z-index: 2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}

.side_content_top_mv.side_illustrator{
  background-image: url('https://abposter.jp/images/contents/illustrator_banner_bg.webp');
}

.side_content_top_mv.side_photoshop{
  background-image: url('https://abposter.jp/images/contents/photoshop_banner_bg.webp');
}

.side_content_top_mv_sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
      -ms-flex-align: end;
      -ms-flex-pack: start;
  margin-top: 3%;
  justify-content: center;
  align-items: flex-end;
}

.side_content_top_mv_sub *{
  display: block;
}

.side_content_top_mv_sub span:nth-child(1){
  position: relative;
  background: #fff;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transform: rotate(354deg);
      -ms-transform: rotate(354deg);
          transform: rotate(354deg);
  font-size: 1.5em;
  font-weight: 500;
  font-family: 'KosugiMaru';
  top: -.05em;
  padding: .2em .3em;
  text-stroke: 10px #000;
  -webkit-text-stroke: .8px #000;
  text-stroke: .8px #000;
}

.side_adobe_logo {
  padding: .3em .35em;
  margin-inline: 5%;
  font-size: 1.8em;
  font-weight: 700;
  background: #320301;
  border-radius: .3em;
}

.side_adobe_logo.side_illustrator {
  color: #FF9A21;
}

.side_adobe_logo.side_photoshop {
  color: #03C8FD;
  padding-inline: .24em;
}

.side_content_top_mv_sub img{
  aspect-ratio: 156/94;
  height: auto !important;
  width: 18%;
}

.side_content_top_mv_title {
  position: relative;
  width: 80%;
  margin: .8em auto;
  font-size: 1.2em;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
  border: .17em solid #320301;
  border-radius: .7em;
  background: #fff;
  padding-block: .54em;
}

.side_content_top_mv_title:before {
  position: absolute;
  top: -0.13em;
  content: '';
  width: 104%;
  aspect-ratio: 767/152;
  background: url('https://abposter.jp/images/contents/title_shadow.webp') center center/cover no-repeat;
  display: block;
  z-index: -1;
}

.side_content_top_mv_txt{
  font-size: 1.1em;
  text-align: center;
  line-height: 1.7;
  font-weight: 600;
}

.side_content_top_mv_txt.side_photoshop{
  font-size: 1em;
    line-height: 2;
}

/***********************
    ↓ bottom banner ↓
 **********************/

.bottom_banner_adobe {
	display: none;
}

@media screen and  (max-width:980px) {
	
	.bottom_banner_adobe {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		margin-block: 2vw;
		font-size: .25vw;
	}

	/*illustrator only*/
	.bottom_banner_adobe > a:nth-child(1):nth-last-child(1) {
		width: 90%;
	}

	.bottom_banner_adobe > a:nth-child(1):nth-last-child(1) .side_content_top_mv {
		font-size: 16.5em;
	}

	/*illustrator and phtoshop*/

	.bottom_banner_adobe > a:nth-child(1):nth-last-child(2) {
		width: 49%;
	}

	.bottom_banner_adobe > a:nth-child(2):nth-last-child(1) {
		width: 49%;
	}

	.bottom_banner_adobe > a:nth-child(1):nth-last-child(2) .side_content_top_mv {
		font-size: 9.5em;
	}

	.bottom_banner_adobe > a:nth-child(2):nth-last-child(1) .side_content_top_mv {
		font-size: 9em;
	}

}


/***********************
  　　よくあるご質問
 **********************/



.nav-ft .question {
	position: relative;
	display: block;
	width: 194px;
	height: 42px;
	padding: 1px;
	border: none;
	z-index: 3;
	background: rgb(200,254,255);
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(200,254,255,1)), color-stop(30%, rgba(255,255,255,1)), color-stop(70%, rgba(255,255,255,1)), to(rgba(200,254,255,1)));
	background: -o-linear-gradient(bottom, rgba(200,254,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(200,254,255,1) 100%);
	background: linear-gradient(0deg, rgba(200,254,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(200,254,255,1) 100%);
	margin: 1px;
	font-family: "GenEiMGothic2";
	font-weight: 500;
}

.nav-ft .question > div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, left bottom, left top, from(rgb(33 117 183)), color-stop(50%, rgb(39 44 128)), to(rgb(31 119 188)));
	background: -o-linear-gradient(bottom, rgb(33 117 183) 0%, rgb(39 44 128) 50%, rgb(31 119 188) 100%);
	background: linear-gradient(0deg, rgb(33 117 183) 0%, rgb(39 44 128) 50%, rgb(31 119 188) 100%);
}

.nav-ft .question p {
	font-size: 18px;
	color: #fff;
	font-style: italic;
}

@media screen and (max-width: 450px) {
	.nav-ft .question {
		width: auto;
	}
}

/*************************

　メインコンテンツのバナー

**************************/


/*窓用カッティングシート（https://abposter.jp/cutting/win/win.html）ページの
　イラストレーター講座バナー*/

.win-illstrator-banner {
	display: none;
}

#contents .win-illstrator-banner {
	position: relative;
	display: block;
	width: 780px;
	aspect-ratio: 780/163;
	margin-block: 10px;
  font-family: "源ノ角ゴシックJP";
  font-weight: 700;
  font-size: 20.5px;
	overflow: hidden;
  background: url('https://abposter.jp/images/contents/illustrator_mv_bg.PNG') right -11em top -1em/262% no-repeat;
}

.win-illstrator-small {
	position: absolute;
	top: -14%;
	left: -12.3%;
	padding: 3em 3em .4em;
	color: #F0FC32;
	font-size: 1.06em;
	line-height: 1.2;
	transform: rotate(-45deg);
	background: #330301;
}

.win-illstrator-logo {
	position: absolute;
	top: 24%;
	left: 17.5%;
	color: #FF9A21;
	font-size: 3em;
	padding: .34em;
	border-radius: .3em;
	background: #330301;
}

.win-illstrator-title {
	position: absolute;
	top: 12%;
	left: 44%;
	color: #330301;
	font-size: 1.3em;
}

.win-illstrator-txt {
	position: absolute;
	top: 36%;
	left: 34.4%;
	line-height: 1.3;
	padding: .5em 4em 1.3em 3.6em;
	background: url('https://abposter.jp/images/contents/win-illstrator-bg.png') center center/contain no-repeat;
}

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

	#contents .win-illstrator-banner {
		width: 100%;
		font-size: 2.48vw;
	}

	.win-illstrator-small {
		top: -1.03em;
    left: -4.3em;
  }

	.win-illstrator-txt {
		padding: .6em 3.8em 1.2em 3.6em;
	}
}