/*********************************
    サイドバー 運送会社バナー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;
}


/*span微調整用css*/

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

.em12 {
	font-size: 1.2em;
}

.em15 {
	font-size: 1.5em;
}

.em17 {
	font-size: 1.7em;
}

.orange {
	color: #F59C4F;
}

.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-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}