/*================================
    GENERAL STYLES
==================================*/
:root{
	--red: #E60012;
	--red-shade: #B90909;
	--blue: #014099;
	--navy: #001643;
	--gray-pale: #F5F5F5;
	font-size: 16px;
	scroll-behavior: smooth;
}
@media (max-width: 767.98px){
	:root{
		font-size: 14px;
	}
}

body {
    font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    color: #4A4747;
	line-height: 1.7;
}

hr{
	border-color: #CCC;
}

.ol{
	padding-left: 18px;
}

.table .bg-colored{
	background-color: #666;
	color: #FFF;
}

.sub-page{
    background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.sub-page .page-content{
	flex: 1;
}

.page-content, section, .section {
    padding-bottom: 3.75rem;
	padding-top: 3.75rem;
}

section:last-child, .section:last-child{
	padding-bottom: 0;
}

.article-body *:not(:last-child){
	margin-bottom: 20px;
}

.head-set {
    padding-top: 20px;
    padding-bottom: 14px;
}

.head-set {
	word-break: auto-phrase;
}

.title-h2{
	font-size: 24px;
	color: #000;
	margin-bottom: 1rem;
	line-height: 1.25;
}

embed, iframe, object, img {
    max-width: 100%;
    height: auto;
}

a{
	color: var(--blue);
}
a.link-strong{
	font-weight: bold;
	color: var(--red);
	text-decoration: underline;
}

a:hover img{
	transition: opacity 200ms;
	opacity: 0.85;
}

h2{
	font-weight: bold;
	color: #014099;
	text-align: center;
}

.sub-page h2{
	padding-bottom: 16px;
	border-bottom: 1px solid #014099;
	line-height: 1.4;
	font-size: 24px;
}
.sub-page h3{
	color: #001643;
	margin-bottom: 20px;
	margin-top: 0;
	padding-top: 20px;
	font-weight: bold;
}
.sub-page h3.has-icon{
	display: flex;
    gap: 0.5rem;
}
.sub-page h3 .icon{
	padding-top:.10rem;
}

@media (max-width: 767.98px){
	.sub-page h3{
		font-size: 1.25rem;
	}
}

.sub-page h4.has-accent{
	color: #001643;
	border-left: 5px solid currentColor;
    padding-left: 8px;
	margin-bottom: 1.25rem;
}

.br{
	display: inline-block;
}

.text-info{	color: #008ada;}
.text-blue{ color:#014099;}
.text-red{ color: var(--red);}

.label-primary{
	background-color: #014099;
}
.label-red{
	background-color: #e92100;
}

.is-no-round{
	border-radius: 0 !important;
}

.more a{
	width: 200px;
	display: inline-block;
	padding: 10px 15px;
	background-color: var(--red-shade);
	color: #FFF;
	border: 1px solid #CCC;
	margin-top: 40px;
}

.more a:hover, .more a:active, .more a:focus{
	background-color: #e92100;
	text-decoration: none;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

.btn{
	border-radius: 0;
	transition: all 200ms;
}

.btn-send {
	outline: none;
	font-size: 20px;
	height: auto;
	font-weight: normal;
	padding: 14px 0;
	text-transform: uppercase;
	color: #FFF;
	border-color: #ccc;
	border-radius: 0;
	margin-bottom: 10px;
}

@media (max-width: 575.98px){
	.btn-send {
		font-size: 16px;
	}
}

.btn-red {
	background-color: var(--red-shade);
	color: #FFF;
	padding-inline: 24px;
}
.btn-red:hover, .btn-red:focus,
.btn-red.disabled, .btn-red[disabled] {
	color: #fff;
	background-color: #e92100;
}

.btn-blue {
	background-color: #014099;
	color: #FFF;
}
.btn-blue:hover, .btn-blue:focus,
.btn-blue.disabled, .btn-blue[disabled] {
	color: #fff;
	background-color: #04407b;
}

.container-middle{
	max-width: 960px;
}

.white-box{
	background-color: #fff;
	border: 1px solid #EEE;
	border-radius: 4px;
	padding: 25px 1.875rem;
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 3px 0px rgba(29, 20, 20, 0.2);
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}

@media (max-width: 767.98px){
	.white-box{
		padding: 18px;
	}
}

.bdr-box{
    border: 2px solid;
    padding: 1.5rem 1.25rem 1.5rem;
    border-radius: 8px;
}
.bdr-box.is-blue{
	border-color: var(--blue);
}

.sub-detail{
	padding: 10px;
	border: 1px solid #CCC;
	margin-bottom: 15px;
}
.sub-detail-title{
	line-height: 1.5;
	font-size: 1rem;
	color: #FFF;
	padding: 8px;
	text-align: center;
	border-radius: 4px;
	margin-top: 0;
	position: relative;
	background: #001643;
	margin-bottom: 24px;
}
.sub-detail-title:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(153, 153, 153, 0);
	border-top-color: #001643;
	border-width: 8px;
	margin-left: -8px;
}

.has-marker {
	padding-left: 1.6em;
}

.list-bdr-blue{
	border: 2px solid var(--blue);
	padding: 1.5rem 1.25rem 1.5rem 1.875rem;
    border-radius: 8px;
    color: var(--blue);
}

.list-bdr-blue li{
	font-size: 16px;
	margin-bottom: 1.25rem;
	padding-left: 0;
	font-weight: bold;
}

.list-bdr-blue li:last-child{
	margin-bottom: 0;
}

.list-inline li{
	padding-left: 0;
	padding-right: 0;
}
.list-inline.has-slash li:not(:last-of-type):after{
	content: "/";
	display: inline-block;
	margin-left: .25em;
	margin-right: .25em;
}

@media (max-width: 767.98px){
	.list-inline{
		padding-left: 20px;
	}
	.list-inline li{
		display: list-item;
		list-style: disc;
	}
	.list-inline.has-slash li:not(:last-of-type):after{
		display: none;
	}
}

.title-label{
	display: inline-block;
	padding: 8px 10px;
	background: #014099;
	color: #FFF;
	margin-top: 0;
	font-size: 14px;
  letter-spacing: 1px;
}

.title-belt{
	padding: 8px 10px;
	background-color: #EEE;
	border-left: 4px solid #014099;
	font-size: 1rem;
	line-height: 1.5;
	color: #014099;
}

.title-double-border{
	padding: .75rem;
	border-top: 1px solid;
	border-bottom: 1px solid;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.25;
}
.title-double-border.is-red{
	color: var(--red);
	border-color: var(--red);
}

.title-bg-blue{
	margin: 0 0 1rem;
	background-color: var(--blue);
	padding: 1rem;
	color: #FFF;
}

.space-bottom{
	margin-bottom: 2.5rem;
}

.has-marker{
	padding-left: 1.6em;
}

@media (max-width: 480px){
	.col-xxs-12{
		width: 100%;
		float: none;
	}
}

@media (min-width: 768px){
	.navbar .container {
		width: 100%;
	}
}

/* nab-menu 共通設定 2025-01-06 */

.nav-title {
	margin-top: 0;
	font-weight: normal;
	font-size: 12px;
}

.nav-parent a{
	font-weight: bold !important;
}

.nav-child{
	font-size: 12px;
	font-weight: bold;
}

.nav-child::before {
	content: "└";
	margin-left: 4px;
	margin-right: 8px;
}

/*================================
    NAVBAR STYLES
==================================*/

.navbar .navbar-brand img{
	height:40px;
	padding-top: 12px;
}

.nav > li > a {
	padding-left: 8px;
	padding-right: 8px;
	color: #014099;
}

.navbar-default {
	background-color: #fff;
    -webkit-box-shadow: 0 0 5px #014099;
    -moz-box-shadow: 0 0 5px #014099;
    box-shadow: 0 0 5px #014099;
	border-bottom: 1px solid #014099;
	color: #014099;
}


.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover {
	color: #014099;
}

.navbar-default .navbar-nav > li.btn-sp > a {
	background-color: #04407b;
}

.navbar-default .navbar-nav .fa-chevron-down {
	color: #e92100;
}


.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.current > a {
    /*color: #b6e0f8;*/
}

.navbar-brand {
	padding: 0 0 0 15px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color:#014099;
}

.navbar-default .navbar-toggle:focus .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #014099;
}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse{
	max-height: 100vh;
}

.navbar-nav>li>.dropdown-menu{
	padding-bottom: 8px;
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 6px 20px;
    }
	.navbar-nav .open .dropdown-menu>li.nav-child>a{
		padding-left: 0;
	}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a{
		color: var(--blue);
	}
}

/* nab-menu用設定 2025-01-06 */

.navbar .dropdown-menu>li>a {
	padding: 6px 20px;
	color: var(--blue);
}

.navbar .nav-title {
	color: #666;
	padding-inline: 20px;
	padding-top: .5rem;
}


.navbar .nav-child {
	padding-inline: 20px;
	display: flex;
}

.navbar .nav-child > a{
	font-weight: bold;
	padding-left: 0 !important;
	flex: 1
}

.navbar .nav-child::before {
	padding-top: 6px;
}


/*================================
    HOME SECTION STYLES
==================================*/

#home {
	position: relative;
	margin-top: 50px;
}
	
#home h1 {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.4);
	color: #FFF;
	font-weight: 600;
	padding: max(8px, 1vw) 1.25rem;
	font-size: max(12px, 2vw);
	line-height: 1.5;
	margin-bottom: 0;
	bottom: 3.4vw;
	display: flex;
    justify-content: flex-end;
	width: max(296px, 51vw);
	opacity: 0;
	animation: fadein 400ms ease-out 100ms forwards;
}

@keyframes fadein {
	0%{
		opacity: 0;
		transform: translateX(-100px);
	}
	100%{
		opacity: 100%;
		transform: translateX(1);
	}
}

#home img {
	width: 100%;
}

/* SIGN IN FORM */

.entrance {
	background-color: #EEE;
}

.panel-login {
	/*background-color: #555;*/
	border-color: #ccc;
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	border-radius: 0;
	margin-top: 6%;
}

.panel-login h3{
	color: #014099;
	margin-bottom: 0;
}

.panel-login .form-control,
.panel-login .btn{
	border-radius: 0;
}
.panel-login>.panel-heading {
	color: #00415d;
	text-align:center;
	border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.panel-login label{
	font-weight: normal;
}

.panel-login>.panel-heading a,
.panel-login>.panel-heading span{
	text-decoration: none;
	color: #CCC;
	font-weight: bold;
	font-size: 14px;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;
	display: block;
	padding: 8px;
	border: 1px solid #CCC;
}
.panel-login>.panel-heading .active{
	background-color: #e92100;
	color: #FFF;
}
.panel-login>.panel-heading .active:hover{
	background-color: var(--red-shade);
	color: #FFF;
}

.panel-login>.panel-heading hr{
	margin-top: 10px;
	margin-bottom: 0px;
	clear: both;
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
	background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
	background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
	height: 40px;
	border: 1px solid #ddd;
	font-size: 16px;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
	outline:none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#login-form-link:after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 12px 0 12px;
	border-color: #cccccc transparent transparent transparent;
    position: absolute;
    bottom: -1em;
    left: 50%;
    margin-left: -10px;	
}

.btn-register {
	background-color: #1CB94E;
	outline: none;
	color: #fff;
	font-size: 14px;
	height: auto;
	font-weight: normal;
	padding: 14px 0;
	text-transform: uppercase;
	border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
	color: #fff;
	background-color: #1CA347;
	border-color: #1CA347;
}

/* MODULES */
.item-block p{
	text-align: left;
	display: inline-block;
}
.item-block h4{
	color: #014099;
	font-weight: bold;
}
.item-block h4 small{
	display: block;
	padding-bottom: 8px;
	color: #333
}

.item-block .more{
	display: block;
	margin-bottom: 20px;
}

.app .button-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 10px 15px;
    background: #eaf0fd;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    transition: 0.2s;
    text-decoration: none;
	font-weight: bold;
}
.app.app-downloa .button-linkd{
	justify-content: space-between;
	gap: none;
}
.app a.button-link:hover {
    background: #bdccec;
}
.app .button-link img {
    width: 80px;
    height: 80px;
}
.app .button-link h4 {
    font-size: 1rem;
	font-weight: bold;
    color: var(--blue);
}
.img-rounded{
    border-radius: 17px;
}
.app .container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-icon{
	border-radius: 20%;
}

@media (max-width: 767.98px) {
	.item-block .more{
		margin-bottom: 40px;
	}
}

/* TOP PAGE */

.top-page .section .head-set{
	padding: 0;
	margin-bottom: 48px;
}

.top-page .section .title-h2{
	margin-top: 0;
}

	
/*SMPLE CLASS TO ADJUST SECTION PADDING & HEIGHT*/

/*CLASS TO FORMAT TEXT*/
.p-cls {
    padding-top: 30px;
    padding-bottom: 40px;
}

/*======================================
   APPS  SECTION STYLES
=========================================*/
.group-article{
	display: grid;
	gap: max(16px, 1.5vw);
}

.article-item{
	background-color: #F5F5F5;
	padding: max(16px, 1.5vw) max(16px, 2.5vw);
}

.article-item .btn-red{
	margin-top: 18px;
	margin-bottom: 24px;
}

.apps-title{
	display: flex;
	gap: 16px;
	margin-top: 8px;
	margin-bottom: 16px;
	color: var(--blue);
	font-weight: 600;
	line-height: 1.25;
	font-size: clamp(18px, 1.25vw, 24px);
	align-items: center;
}

.apps-title small{
	color: #4A4747;
	display: block;
	margin-bottom: 8px;
	font-size: 75%;
	font-weight: 600;
}

.apps-title img{
	display: inline-block;
	height: 72px;
	width: 72px;
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
}


/*======================================
    つぎの日サービス SECTION STYLES
=========================================*/

#tsuginohi h2{
	color: #FFFFFF;
	margin-bottom: 40px;
	margin-top: 0;
	text-shadow: 0 1px 8px rgba(0,0,0,.2);
	font-weight: 600;
}

#tsuginohi .group-white-box{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

@media (max-width: 767.98px) {
	#tsuginohi .group-white-box{
		grid-template-columns: 1fr;
		row-gap: 16px;
	}
}

.parallax-like {
    background: url(../img/bg_after.jpg) no-repeat center center; /* DEFINE IMAGE PATH CAREFULLY*/
    padding: 0;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

    .parallax-like .overlay {
        min-height: 200px;
        background: rgba(20, 97, 174,0.7);
        padding-bottom: 60px;
        padding-top: 60px;
    }

/*================================
    SERVICES SECTION STYLES
==================================*/

#services .description{
	font-size: 18px;
	color: #04407b;
}

#services h4{
	margin-top: 16px;
	margin-bottom: 16px;
}

@media (max-width: 480px) {
	#services h1{
		padding: 12px 20px;
		font-size: 16px;
	}

	#services .description{
		text-align: left;
	}
	#services .description .br{
		display: inline;
	}
}


@media (max-width: 767.98px) {
	.service-extra{
		padding: 20px 0;
	}
}


/*================================
    MENU SECTION STYLES
==================================*/

#menu{
	background-color: #f4f4f4;
}

#menu .item-wrapper{
	background-color: #fff;
	padding: 15px;
}

#menu .item{
	margin-bottom: 15px;
}

#menu .img-box img{
	height: 120px;
	max-width: 100%;
}

#menu h4{
	font-size: 16px;
	color: #04407b;
	border-bottom: 2px solid #CCC;
	padding: 2px 0 8px;
	margin-bottom: 5px;
}

#menu h5{
	margin-bottom: 15px;
	margin-top: 5px;
}

#menu .price{
	color: #e92100;
}

#menu p{
    font-size: 12px;
}

@media (max-width: 767px) {
	#menu .img-box img{
		height: 60px;
	}
}

@media (max-width: 480px) {
	#menu .item{
		margin-bottom: 24px;
		text-align: left;
	}
	#menu .img-box{
		width: 60px;
	    float: left;
		text-align: center;
	}
	#menu .img-box img{
		height: auto;
		width: 100%;
	}
	#menu .img-box img.large{
		width: 40px;
	}

	#menu .txt-box{
		margin-left: 75px;
		padding-top: 0;
		padding-bottom: 5px;
	}
}


/*================================
    WORK SECTION STYLES
==================================*/
#pregis {
    padding: 0;
	background-color: #EFF3F9;
   /* -webkit-background-size: cover; */
   /* background-size: cover; */
   /* background-attachment: fixed; */
}

#pregis .group-white-box{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px , 1.5vw, 30px)
}

#pregis .group-white-box p{
	margin-bottom: 0;
}

#pregis .head-set{
	margin-bottom: 32px;
}

#pregis h2{
	text-align: left;
	margin-top: 0;
}

#pregis h3{
	 font-size: 18px;
	 margin-top: 0;
	 color: var(--blue);
	 padding-bottom: 10px;
	 font-weight: bold;
	 line-height: 1.7;
}

#pregis h3 div{
	 display: block;
	 color: #1461ae;
	 padding-top: 8px;
}

#pregis h3 span{
	 color: #1461ae;
	 padding-top: 8px;
}

#pregis .text{
	margin: 0 auto 20px;
}

#pregis .flow{
	padding: 15px;
	border: 1px solid #CCC;
	margin-bottom: 20px;
}

#pregis h3 .br{
	line-height: 1;
}

#pregis .head-txt{
	 margin-bottom: 24px;
}

#pregis .step-body{
	padding-right: 20%;
	position: relative;
	text-align: center;
	background: url(../img/arrow_right.png) right 40px no-repeat;
}

#pregis .step:last-child  .step-body {
	padding-right: 0;
	background: none;
}

#pregis .step img{
	height: 96px;
	max-width: 100%;
}

#pregis p{
	text-align: left;
}

#pregis .step p{
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 20px;
}

#pregis .step:last-child p{
	margin-bottom: 0;
}

#pregis .overlaybox{
    margin: 50px 0;
}

#pregis .btn{
	margin-top: 30px;
}

@media (max-width: 767px) {
	#pregis h3{
		font-size: 16px;
		padding-top: 4px;
	}
	#pregis .group-white-box{
		grid-template-columns: 1fr;
	}
	#pregis .flow{
		padding: 8px;
	}
	#pregis .step-body{
		padding-right: 0;
		padding-bottom: 30px;
		background: url(../img/arrow_bottom.png) center bottom no-repeat;
		margin-bottom: 20px;
	}
	#pregis .step-body p{
		margin-bottom: 10px;
	}
	#pregis .step:last-child  .step-body {
		padding-bottom: 0;
	}
}

@media (max-width: 480px) {
	#pregis div.text{
		float: left;
		width: 100%;
	}
}


/*================================
    CONTACT SECTION STYLES
==================================*/

#contact form th{
	background-color: #666;
	color: #FFF;
	text-align: right;
	vertical-align: middle;
	font-weight: normal;
}

#contact #contact-info h4{
	margin-top: 0;
	font-weight: bold;
}

#cta{
	background-color: var(--gray-pale);
}

.btn-contact{
	display: flex;
	justify-content: center;
	gap: 24px;
	border-radius: 12px;
	color: #FFF;
	height: 96px;
	align-items: center;
	font-weight: 600;
	font-size: 24px;
	font-size: clamp(20px, 1.25vw, 24px);
	line-height: 1.25;
	filter: brightness(1.0);
	margin-bottom: 16px;
	padding-right: 24px;
	padding-left: 24px;
}

.btn-contact:hover,.btn-contact:focus{
	color: #FFFFFF;
	filter: brightness(1.2);
}

.btn-contact .icon{
	font-size: 64px;
}

.btn-contact small{
	display: block;
	font-size: 18px;
}

@media (max-width: 767px) {
	.btn-contact{
		gap: 16px;
		justify-content: flex-start;
	}
}

.contact-tel{
	background-color: var(--blue);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 32px;
	letter-spacing: 2px;
}
.contact-form{
	background-color: var(--red-shade);
}

/*================================
    SERVICES SECTION STYLES
==================================*/

#tokusho dl{
	text-align: left;	
}

#tokusho dd{
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px #CCC dashed;
}

#tokusho dd:last-child{
	border-bottom: none;
}

#policy p,
#policy ol{
	text-align: left;
	margin-bottom: 15px;
}

#policy p.text-right{
	text-align: right;
}

/*================================
   FOOTER MENU SECTION STYLES
==================================*/

#footer-nav{
	border-top: 1px solid #014099;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #fff;
}

#footer-nav, #footer-nav a{
	color: #014099;
}

#footer-nav ul {
	list-style: none;
	padding-left: 0;
  	margin-left: 0;
	margin-bottom: 0;
	float: right;
}

#footer-nav li {
	margin-bottom: 4px;
	margin-right: 8px;
	float: left;
}


#footer-menu {
    background-color:#014099;
    /*padding-bottom:50px;*/
    padding-top:20px;
	margin-bottom: 0;
	color: #FFF;
	border-bottom: 1px solid #FFFFFF;
	font-size: 14px;
}

#footer-menu .nav-title {
	color: #CCC;
	margin-bottom: 8px;
}

#footer-menu .nav-title:not(:first-of-type) {
	padding-top: 8px;
}

#footer-menu a {
	color: #FFF;
}
#footer-menu a:hover {
	text-decoration: underline;
}

#footer-menu ul {
	list-style: none;
	padding-left: 0;
    margin-left: 0;
}

#footer-menu li {
	margin-bottom: 8px;
	margin-right: 8px;
}

.footer-menu-item{
	margin-bottom: 20px;
}

#security p{
	padding-top: 10px;
	word-break: auto-phrase;
}

.privacy-marks{
	display: inline-flex;
	gap: 1rem;
}

.privacy-marks img{
	height: 80px;
}

.privacy-marks .small{
	font-size: 10px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.sns-list{
	display: flex;
}
.sns-list .icon{
	font-size: 1.5rem;
	height: 1.5rem;
}


/*================================
    PRIVACY POLICY SECTION STYLES
==================================*/
#privacy {
    background-color:#f4f4f4;
    padding-bottom:50px;
    padding-top:50px;
	margin-bottom: 0;
}

#privacy .container{
	max-width: 700px;
}

@media (max-width: 480px) {
	
	#privacy .col-xs-2,
	#privacy .col-xs-4{
		width: 50%;
		text-align: center;
	}
	
	#privacy .col-xs-2 img,
	#privacy .col-xs-4 img{
		display: inline;
	}

	#privacy .col-xs-6{
		margin-top: 15px;
		width: 100%;
	}

}

    #clients img {
        opacity:0.5;
        cursor:pointer;
    }
        #clients img:hover {
            opacity:1;
        }
/*================================
    FOOTER SECTION STYLES
==================================*/

footer {
    padding: 20px;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    background-color: #E60012;
    color: #fff;
}

footer a, footer a:hover {
		color: #fff;
		text-decoration: none;
}

/*================================
   Pregis PAGE STYLES
==================================*/
#pregis-main .white-box .img-box{
	margin-top: 15px;
	margin-bottom: 15px;
}

.title-belt-red{
	border-left-color: #bb190c;
	color: #bb190c;
}

#pregis-main .step-box dt{
	padding: 4px 12px;
	background-color: #bb190c;
	color: #FFF;
	font-weight: normal;
	margin-bottom: 15px;
	font-size: 16px;
}

#pregis-main #case h5{
	color: #001643;
	border-bottom: 1px solid #001643;
	padding-bottom: 6px;
}

/*================================
   GridMenu PAGE STYLES
==================================*/
.grid-menu .item{
	margin-bottom: 32px;
	position: relative;
}

.grid-menu .item h4{
	color: #008ada;
	font-weight: bold;
  	border-bottom: 4px solid #008ada;
	padding-bottom: 8px;
	line-height: 1.2;	
}

.grid-menu .item.is-small h4{
	font-size: 16px;
}

.grid-menu .item h4 small{
	color: inherit;
}

.grid-menu .img-pdf-tumbnail{
	width: 160px;
    max-width: 100%;
}

/*================================
   Tunestyle PAGE STYLES
==================================*/
.detail-item{
	margin-bottom: 15px;
}

.detail-item:last-child{
	margin-bottom: 0;
}

#turnstyle .white-box{
	margin-top: 20px;
}

#turnstyle .title-label {
	position: relative;
}

#turnstyle .title-label:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(153, 153, 153, 0);
	border-right-color: #014099;
	border-width: 8px;
	margin-top: -8px;
}

@media (max-width: 767px){
	#turnstyle .title-label:after{
		display: none;
	}
}

@media (min-width: 768px){
	#turnstyle .title-label {
		font-size: 24px;
		margin-bottom: 20px;
		letter-spacing: 4px;
		margin-top: 1.5rem;
	}
}

/*================================
    SecureBarcode STYLES
==================================*/
#sb-intro section{
	padding-top: 20px;
	padding-bottom: 20px;
}

#sb-intro section img{
	margin-bottom: 15px;
}

#sb-intro h3{
	 line-height: 1.5;
	 margin-bottom: 20px;
}

#sb-intro .main-hedding h3{
    margin-top: 0;
}

#sb-intro .main-hedding small{
	line-height: 1.5;
}

#sb-intro .main-hedding img{
	margin-bottom: 40px;
}

#sb-intro .box-narrow{
	max-width: 698px;
	margin-left: auto;
	margin-right: auto;
}

#sb-intro .dl-step{
	display: flex;
}

#sb-intro .dl-step dt{
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
	background-color: #e92100;
	color: #FFF;
	padding: 6px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
}

#sb-intro dd{
	font-size: 22px;
	color: #34599b;
	padding-left: 16px;
	display: table-cell;
	vertical-align: middle;
	font-weight: 700;
}
@media (max-width: 767.98px){
	#sb-intro dd{
		font-size: 1.5rem;
	}
}

#sb-intro .flow {
	text-align: center;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
}

#sb-intro .step{
	display: flex;
}

#sb-intro .step p{
	background-color: #34599b;
	color: #FFF;
	font-size: 24px;
	padding: 23px;
	font-weight: bold;
	flex-shrink: 0;
}

#sb-intro .step:after{
	content: "";
    --arrow-size: 64px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--arrow-size) 0 var(--arrow-size) 40px;
    border-color: transparent transparent transparent #345a9b;
}

#sb-intro .step:last-child:after{
	display: none;
}

@media (max-width: 697px){
	#sb-intro .flow, #sb-intro .step{
		display: block;
	}
	#sb-intro .step{
		padding-right: 0;
		height: auto;
	}
	#sb-intro .step p{
		padding: 12px;
	}
	#sb-intro .step:after{
		position: static;
		padding-right: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 32px 51px 0 51px;
		border-color: #345a9b transparent transparent transparent;
	}
}

.feature-section{
	margin-bottom: 0;
}

.feature-section .fa-lightbulb {
    color: var(--lightbulbColor);
    font-size: 1.2em;
}

.feature-section .feature strong {
    font-weight: bold;
}
.feature-section .feature dt {
    margin-bottom: 1rem;
    font-size: 1.125rem;
	color: var(--navy);
}

.feature-section .feature dt .icon {
	color: var(--blue);
	font-size: 1.5rem;
}

.feature-section .feature-container {
    display: flex;
	align-items: flex-start;
	margin-bottom: 1.5rem;
    gap: 1rem;
	padding-right: 1rem;
}

.feature-section .feature-container p {
	font-size: 0.875rem;
	line-height: 1.6;
}

.feature-section .feature-container img {
    width: 75px;
}

#sb-use .item{
	margin-bottom: 20px;
}

#sb-use .item img{
	margin-bottom: 10px;
}

#sb-use .panel-heading{
	background-color: #fff;
}

#sb-use .panel-heading a{
	display: block;
}

#sb-terms li{
	margin-bottom: 5px;
}

#sb-terms dd{
	margin-bottom: 10px;
}

.fast-service-intro .list-inline{
	margin-left: 0;
}

.fast-service-intro .list-inline li{
	font-size: 1.25rem;
	font-weight: bold;
}

.fast-service-intro .title-bg-blue{
	font-size: 1.5rem;
	font-weight: bold;
}

/*================================
   COVID19 TOOL PAGE STYLES
==================================*/
#covid19-tool .item .box-img{
	padding: 15px 20px;
}

#covid19-tool .grid-menu .item h4 {
    line-height: 1.35;
}

#covid19-tool .intro{
	position: relative;
	text-align: right;
}

#covid19-tool .intro .box-txt{
	position: relative;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 2.5rem 1.875rem;
	margin-bottom: -11.5em;
	width: 95%;
	margin-left: -15px;
}

#covid19-tool .intro .box-img{
	margin-right: -15px;
	margin-left: 32px;
}

#covid19-tool .intro .box-txt p{
	line-height: 1.7;
	color: #1E8098;
	margin-bottom: 1.25rem;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

#covid19-tool .intro .box-txt p:last-child{
	margin-bottom: 0;
}

@media (min-width: 576px){
	#covid19-tool .intro .box-txt{
		position: absolute;
		margin-top: 0;
		top: 40px;
		width: 72%;
		max-width: 670px;
		margin-right: 0;
		margin-left: 0;
	}
	#covid19-tool .intro .box-txt p{
		font-size: 18px;
	}

	#covid19-tool .intro .box-img{
		margin: 0;
	}

	#covid19-tool .intro .box-img img{
		width: 480px;
	}
}

#covid19-tool .grid-menu .label{
	font-size: 0.75rem;
	padding: .5em;
	display: none;
}	

@media (min-width: 992px){
	#covid19-tool .grid-menu .label{
		font-size: 0.75rem;
		position: absolute;
		right: 0;
		top: 0;
		margin-top: 0;
		display: inline-block;
	}	
}

/*================================
    Exibi Photo App　PAGE STYLES
==================================*/
.main-headding.column{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 160px;
	row-gap: 16px;
}
@media (min-width: 768px){
	.main-headding.column{
		--main-headding-hight: 336px;
		align-items: center;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: var(--main-headding-hight);
		column-gap: 40px;
	}
}

.bnr-download{
	display: grid;
	grid-template-columns: 1fr 4fr;
	gap: 30px;
	margin-bottom: 16px;
}
@media (max-width: 575.98px){
	.bnr-download{
		gap: 16px;
		grid-template-columns: 1fr 3fr;
	}
}

#exibiiphoto .main-headding p {
	margin-bottom: 16px;
}

#exibiiphoto .main-headding-image {
	display: block;
	background: url(../img/bg_after.jpg) no-repeat center center; /* DEFINE IMAGE PATH CAREFULLY*/
	background-size: cover;
	width: 100%;
	height: 100%;
	border-radius: 12px;
}
#exibiiphoto .group-white-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: clamp(16px, 1.5vw, 30px);
}
#exibiiphoto .white-box {
	padding: 25px 1.25rem;
}
#exibiiphoto .white-box h4{
    /*font-size: 18px;*/
    margin-top: 0;
    color: var(--blue);
    font-weight: bold;
    line-height: 1.7;
}
.flow{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
	column-gap: 16px;
	row-gap: 32px;
}
@media (max-width: 575.98px){
	.flow{
		grid-template-columns: repeat(2, 1fr);
	}
}

.flow-arrow{
	display: flex;
}

.flow-arrow span{
	display: block;
	background-color: var(--blue);
	color: #FFF;
	font-weight: bold;
	padding: 12px;
	line-height: 1;
	flex: 1;
}
.flow-arrow::after{
	content: "";
	--arrow-size: calc(38px / 2); /* 高さの半分 */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: var(--arrow-size) 0 var(--arrow-size) 20px;
	border-color: transparent transparent transparent var(--blue);
}
.flow-step:last-of-type .flow-arrow::after{
	display: none;
}
.flow-text{
	font-weight: bold;
	color: var(--blue);
	font-size: 14px;
}


/*================================
    RESPONSIVE
==================================*/

.box-youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.box-youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

@media (min-width: 992px){
	.container-narrow{
		max-width: 750px;
	}
}

@media (max-width: 480px){
	.sub-page h2{
		font-size: 20px;
	}
}

/* お知らせセクション */
.announcements:has(tr){
	border-radius: 12px;
	padding: .5rem 1rem;
	font-size: 1rem;
    background: #EFF3F9;
	margin-bottom: 3rem;
	border: 1px solid var(--blue);
	max-height: 240px;
	overflow: auto;
}

#announcements-body .text{
	color: #000;
}

#announcements-body a{
	text-decoration: underline;
	outline-offset: 2px;
}
#announcements-body a:hover{
	text-decoration: none;
}

#announcements-body td{
	padding-block: .25rem;
	font-size: 0.875rem;
}

#announcements-body .date{
	text-align: right;
	vertical-align: text-bottom;
	font-weight: normal;
	padding-right: 16px;
	white-space: nowrap;
}

@media (max-width: 767.98px){	
	#announcements-body, #announcements-body .info-item, #announcements-body tbody,
	#announcements-body td{
		display: block;
		padding: 0;
	}
	#announcements-body .date{
		text-align: left;
	}
	#announcements-body .info-item:not(:first-child) .date{
		padding-top: .5rem;
	}
}