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

.sideBanner {
	position: relative;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	border: 1px solid #000;
	background-color: #fff;
	-webkit-box-align: center;
	-ms-flex-align: center;
	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: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(88%, rgba(255,255,255,0)),
		color-stop(89%, rgba(6,131,120,1)), color-stop(96%, rgba(6,131,120,1)),
		color-stop(97%, rgba(246,206,41,1)), to(rgba(246,206,41,1)));
	background: -o-linear-gradient(top, 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%);
	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: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(88%, rgba(255,255,255,0)),
		color-stop(89%, rgba(59,73,159,1)), color-stop(96%, rgba(59,73,159,1)),
		color-stop(97%, rgba(59,73,159,1)), to(rgba(59,73,159,1)));
	background: -o-linear-gradient(top, 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%);
	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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	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: -webkit-box;
	display: -ms-flexbox;
	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: -o-linear-gradient(transparent 70%, #ECEE55 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(50%, #ECEE55));
	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%;

	
	z-index: 3;
}

.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;

	
	z-index: 3;
}

.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;
}




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



.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;
	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 {
	position: absolute;
	font-size: 18px;
	top: 27%;
	left: 17%;
	color: #fff;
	font-style: italic;
}

@media screen and (max-width: 979px){
	.nav-ft .question {
		height: 95%;
	}
}




/*span微調整用css*/

span.yellow {
	color: #ECEE55;
	position: static;
	font-size: 1.03em;
}

.em12 {
	font-size: 1.2em;
}

.pStyleN {
	font-style: normal;
}

.pSize05 {
	position: static;
	font-size: .5em;
}

.pSize08 {
	position: static;
	font-size: .8em;
}


/*option*/
.sideBanner br {
	position: static;
}




@font-face {
	font-family: "MPLUS1";
	src: url("fonts/MPLUS1-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: "GenEiMGothic2";
	src: url("../fonts/GenEiMGothic2-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: "GenEiMGothic2";
	src: url("../fonts/GenEiMGothic2-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: "GenEiMGothic2";
	src: url("../fonts/GenEiMGothic2-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}