@charset "UTF-8";

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Roboto", "sans-serif"  !important;
	/*
	font-family: "Roboto","Arial", "Helvetica","tbudrgothic-std","sans-serif"   !important ;
	font-family: "kozuka-gothic-pro","heisei-maru-gothic-std","tbudrgothic-std","a-otf-jun-pro";*/
/*font-family: "Roboto","Arial", "Helvetica","tbudrgothic-std","sans-serif"  ;*/
/*font-family: "a-otf-jun-pro","Roboto","Arial", "Helvetica","sans-serif"  ;*/
/*font-family: "Roboto", "Helvetica", "Arial", sans-serif;*/
}

.flex_s{display: flex;justify-content:flex-start !important;}
.flex_e{display: flex;justify-content:flex-end !important;}
.flex_c{display: flex;justify-content:center !important;}
.flex_btwn{display: flex;justify-content: space-between !important;}
.flex_m{display: flex;align-items: center !important;}
.flex_b{display: flex;align-items: flex-end !important;}

.space-5 {height: 5px;display: block;}
.space-10 {height: 10px;display: block;}
.space-20 {height: 20px;display: block;}
.space-30 {height: 30px;display: block;}
.space-40 {height: 40px;display: block;}
.space-50 {height: 50px;display: block;}
.space-100 {height: 100px;display: block;}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active, 
.dropdown-menu a:active, .dropdown-menu a.active, 
.dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu a:active {
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(100, 176, 50, 0.4);
    background-color: #47a44b !important;
    color: #ffffff !important;
}



.landing-page .header-filter::before {
	background: none !important;
	/*background: linear-gradient(0deg, rgba(200, 200, 200, 0.5) 0%, rgba(255, 255, 255, 0.65) 35%,rgba(255, 255, 255, 0.7) 70%, rgba(150, 150,150, 0.4) 100%) !important;*/	
	/*
	background-color: rgba(0, 0, 0, 0.1);	
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 40%,rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.8) 100%) !important;	
    */
	}


.mvwrap{
	position: relative;
    width:calc(100% - 20px);
    margin: 0 auto;	
}

.ytwrap{
    height: 0;
    padding-bottom: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
}


.navbar:not(.navbar-transparent) .logo-small {
    width: 100px;
	margin-top: 0px;
}

.page-header {
    height: 100vh;
    background-position: center center !important;
    background-size: cover !important;
	/*background-image: url('../img/bg1.jpg');*/
	background-image: url('../img/cover_mb.webp');
}

.landing-page .header_mobile{
	width:50%;
	max-width:170px;
}
.landing-page h2.title {margin-bottom: 0px;}
.landing-page .circle{
	width:30px;
	height:30px;
	/*background-color: #95ca40;*/
	background-color: #6a5acd;
	border-radius: 15px;
	vertical-align: middle;
	text-align: center;
	font-size: 20px;
	color: #ffffff;
	padding-top: 4px;
}

.landing-page .notice{
	width: 100%;
	padding: 20px;
	border: solid 1px #333333;
	border-radius: 20px;
}

.landing-page .phone-container img {
	max-width:150px !important;
	width: 100%;
  }

.landing-page .subtitle{
	font-size:1.6rem;
	font-weight: 600;
	text-align:center !important;
	color:rgba(4,7,158,1.00) !important;
	/*text-shadow: 1px 1px 10px #777777,-1px -1px 10px #777777;*/
}


h2.title{
	font-size:1.8rem;
}

.title2{
	font-size:28px !important;
    text-align: center !important;
	color: #ffffff !important;
		/*text-shadow: 1px 1px 30px #777777,-1px -1px 30px #777777;*/
	
	display: inline-block;
	background-color: /*rgba(106, 90, 180,0.7)*/rgba(83, 93, 235, 0.8);
	/*background-color: rgba(114,124,255,0.8);*/
	padding: 3px 16px 0;
	border-radius: 26px;
}


p{
	font-size: 1rem !important;
	text-align:justify !important;
}

.info p {
    color: #555555 !important;
	text-align:justify !important;
}

.faq .info{
	max-width:100%;
	padding: 0 0;
}

.jf{text-align:justify !important;}



.description, .card-description, .footer-big p {color: #555555 !important;}



.cost_reduction .card .card-title {
	margin-top: 0.2rem;
  }
  .cost_reduction .form-group{
	text-align: justify;
  }

.tspace{
	    height: 30vh;
        display: block;
    }

	
.tbtn{margin-left: calc(50% - 75px);}
.catch1{display:none;}
.catch2{
	display:inline-block;
	margin:20px auto 10px !important;
}


.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,
.table > thead > tr > td,.table > tbody > tr > td, .table > tfoot > tr > td{
	font-size: 1rem !important;
}



.cost_reduction .cost{
	display:flex;
	justify-content:center !important;
}

.cost_reduction .cost table{
width:90%;
border-collapse:collapse;
}

.cost_reduction .cost th{
	width:50%;
	border: solid 1px #999999 !important;
	font-weight: 500;
	padding: 10px 5px;
	font-size: 18px !important;
	}

.cost_reduction .cost td{
		width:50%;
		border: solid 1px #888888 !important;
		font-size: 24px;
		font-weight: 600;
		padding: 30px 5px;
		color: #555555;
		}

.cost_reduction .cost th.den{
	background-color: #eeeeee;
	color: #222222;
}	
.cost_reduction .cost th.tol{
	background-color: #ef9f30;
	/*background-color: #6a5acd;*/
	color: #ffffff;
	font-weight: 600;
}	

.cost_reduction .shisan .card-body,
.cost_reduction .shisan .form-control
{
	font-size:16px;
}




.fig1{
	background-color: transparent;	
	background-repeat: no-repeat;
	background-size: contain ;
	background-position:center center;
	width:100%;
}
.fig1{
	background-image: url("../img/tolfa_fig1a.jpg") ;
	height:500px;
}

img.fig10{width:90%;}
img.fig2{width:100%;}
img.fig3{width:50%;margin: 50px auto 50px auto;}
img.fig4{width:50%;margin-top:50px;}
img.fig4b{width:50%;margin-top:50px;}
img.fig6{width:50%;margin-top:50px;margin-bottom:50px;}
img.mic_allowed{width:70%; max-width:300px; margin: 30px auto 50px;}
img.nes{width:100%; margin: 30px auto 50px;}
img.nes1{width:100%; margin: 30px auto 50px;}
.mic_allowed img.nes2{width:70%; margin: 30px auto 50px;}
.mic_allowed img.nes3{width:90%; margin: 0px auto 50px;}
.mic_allowed img.fig5{width:80%; margin: 15px auto 0px;}
img.anywaypic{
	width:100%
}
.autoplay img{
	width: 90%;
}


.signup-page .fmtitle{
	    color: #555555 !important;
}

.signup-page span.mg{
	display: block;
	padding: 1px 10px;
	background-color: #b8124a;
	    color: #ffffff !important;
	font-weight: 600 !important;
	
}

.signup-page form a{
	font-size: large;
}

.signup-page form label span.sml{
	font-size: small;
}

.signup-page span.ml:before{content: "info@tolfa.jp";color: #333333}

.form-control, .is-focused .form-control {
    background-image: linear-gradient(to top, 
#388e3c 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, #d2d2d2 1px,
    rgba(210, 210, 210, 0) 1px);
}

.form-check .form-check-label .circle .check {
    background-color: #388e3c;
}

.form-control:disabled, .form-control[readonly] {
    background-color: 
    #ffffff !important;/*#e9ecef;*/
    opacity: 1;
}


.profile-page .nav-pills .nav-item .nav-link.active {
    color: #fff;
background-color:#388e3c;/*#9c27b0*/
}

.profile-page table.co-info{
	margin: 20px;
	width: 90%;
	border-collapse: collapse;
}


.profile-page table.co-info tr>td:nth-child(odd){
	text-align: center;
	width: 20%;	
	padding: 5px;
	border: solid 1px #aaaaaa;
}
.profile-page table.co-info tr>td:nth-child(even){
	text-align: left;
	width:auto;
	padding: 5px 15px;
	border: solid 1px #aaaaaa;
}

/*.profile-page table.co-info span.w{color: white}*/
.profile-page table.co-info span.w:before{content: "050-5526-7311";color: #333333}
.profile-page table.co-info span.ad:before{content: "160-0023 東京都新宿区西新宿6-10-1　新宿オークシティ 日土地西新宿ビル8F";color: #333333}

.profile-page table a,
.profile-page table a:hover,
.profile-page table a:focus{
	text-decoration: none;
	color: #555555 !important;
}

.copyright a,
.copyright a:hover,
.copyright a:focus{
		text-decoration: none;
	color: #555555;
}

.sendmsg{
	margin-bottom:20px;
}

.midashi1,.midashi2{
	display: inline-block;
	border-style: solid;
	border-width: 2px;
	border-radius: 8px;
	padding: 3px 5px 2px 5px;
}

.midashi1{
	font-weight:500;
	color:#ff2206;
	border-color: #ff2206;
}

.midashi2{
	font-weight:600;
	color: #FF7700;
	border-color: #FF7700;
}


body.signup-page>div#dmy+div{
	display:none;
}

    #loading {
      display: table;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
      opacity: 0.7;
		z-index: 10;
    }
     
    #loading .loadingMsg {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding-top: 140px;
      background: url("../img/loading.gif") center center no-repeat;
		z-index: 20;
    }

.media p{color: #565656;}




/*サポートページ*/
table.mic_allowed{
    max-width: 300px !important;
    border-collapse: collapse !important;
    margin: auto auto;
}

table.mic_allowed td{
    text-align: center !important;
    width: 20% !important;
    padding: 10px !important;
    border: solid 1px #6a5acd !important;
}

table.mic_allowed tr:nth-child(1)>td{
    text-align: left !important;
    background-color: #6a5acd;
    color: #ffffff !important;
}

table.mic_allowed i.mic{
    font-size: 40px !important;
    margin: auto 15px auto 15px !important;
    color: #ffffff !important;
	vertical-align: 0px !important;
}

div.touch{
    position: absolute;
    z-index: 100;
    color: #4caf50 !important;
    font-size: 50px !important;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-left: 14%;
    margin-top: -25px;
    animation: anime1 14s ease infinite !important;
}

div.touch i{
    color: #4caf50 !important;
    font-size: 50px !important;
    position: relative;
    margin-top: 10px !important;
    margin-left: 2px !important;
    background-color: transparent;
}

@keyframes anime1 {
    0% {margin-left:40%;margin-top:0px;}
    12% {margin-left:14%;margin-top:-25px;}
    15% {background-color: transparent;}
    25% {background-color:#FEA9C9;}
    35% {background-color: transparent;}
}

.mic_allowed .circle{
	width:30px;
	height:30px;
	/*background-color: #95ca40;*/
	background-color: #6a5acd;
	border-radius: 15px;
	vertical-align: middle;
	text-align: center;
	font-size: 20px;
	color: #ffffff;
	padding-top: 4px;
}

.mic_allowed .mobile{
	width:70%;
	max-width:300px;
	
}
.mic_allowed .mobile2{
	width:50%;
	max-width:250px;
	
}

.mic_allowed div.website{
	max-width:200px;
	width:80%;
	height:100%;
	display: block;
	border:solid 1px #000000;
	margin: 0 auto;
}

.mic_allowed div.website>div{
	display: block;
	width:100%;
	height:30px;
	background-color: #cccccc;
	font-size:small;
	padding: 5px 5px;
}

.mic_allowed div.website>div:nth-child(1)>div{
	display: block;
	width:95%;
max-width:130px;
	height:20px;
	border-radius:7px;
	margin:auto auto;
	background-color: #ffffff;
}

.mic_allowed div.website>div:nth-child(2){
	display: block;
	width:100%;
	height:100px;
	background-size: cover;
	background-position: center top;
    background-image: url('../img/samplesite.png');
	align-items: center;
}


/*nestleサポートページ*/
.nestle.product-page .main-raised,.mic_allowed.product-page .main-raised{
	margin: -30vh 0px 0px !important;
}

.nestle .page-header{
background-position: center top !important;
background-image: url('../img/bg1.jpg');
	align-items: center;
}

.mic_allowed .page-header{
    background-position: center top !important;
background-image: url('../img/bg1.jpg');
	align-items: center;
}

.nestle_icon {
	width:100%;
	float:none;
	height:auto;
	overflow:hidden;
}

.nestle_icon .icon_box{
	width:100%;
	float:none;
	padding: 7px;
}

.nestle_icon .icon_box img{
	width:70px;
}

.nestle_icon .icn{
	text-align: center;
	float:left;
}

.nestle_icon .brdr{
	border: solid 1px #a0d24a;
	border-radius:10px;
	width: 100%;
	height:100%;
	padding: 5px 10px 5px 10px;
	overflow:hidden;
}

.nestle_icon .inf{
	text-align: center;
	color: #666666;
	margin-top: 10px;
	font-size: small;
}

/******  VC  *******/
.vc .page-header {
	height: 100vh;
	background-repeat: no-repeat;
    background-position:70% top !important;
    background-size: cover !important;
	background-image: url("../img/girl_j.jpg")
    }	

.vc .landing-page .header-filter::before {
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%) !important;	
    }

.vc .ttl{
	text-align:center !important;
}
.vc .title3{
	font-size:26px !important;
	text-align:center !important;
	color:rgba(255,255,255,1.00) !important;
	display: inline-block;
	background-color:rgba(45,78,223,0.6);
	padding: 3px 16px 0;
	border-radius: 26px;	
}

.vc .subtitle{
	color:rgba(29,22,168,1.00) !important;
}

.vc .mode .btn{
	display:none;
}

.vc div.mode{
	width:100%;
	display:flex;
	justify-content: left;
    align-items: center;	
}
.vc .mode div{padding: 5px;}
.vc .mode div:nth-child(1){width: 30%;}
.vc .mode div:nth-child(2){width: 65%;}
.vc .mode div:nth-child(3){width: 5%;}

.vc .mode img{width:100%;margin:auto;}

.vc .mode h3{
	margin:0px 10px 0px 10px !important;
    font-size:1.15em;
}
.vc .phone_container{
	width:100%;
	align-content: center;
}
.vc .phone_container img{
	width:80% !important;
}

.vc .mode-btn{display: none;}
.vc .mode i{color: #777777}

.vc_common .page-header{
    background-position: center top !important;
    background-image: url('../img/bg1.jpg');
	align-items: center;
}

.vc_common .main-raised{
	margin: -30vh 0px 0px !important;
}

.vc_common .circle,
.data_relation .circle
{
	min-width:30px;
	height:30px;
	/*background-color: #95ca40;*/
	background-color: #6a5acd;
	border-radius: 15px;
	vertical-align: middle;
	text-align: center;
	font-size: 20px;
	color: #ffffff;
	padding-top: 4px;
}

.vc_common .mode,
.data_relation .mode
{
	width:100%;
	display:flex;
	justify-content: left;
    align-items: center;	
}


.vc_common .mode h3,
.data_relation .mode h3{
margin: 0px 0px 0px 10px !important; 
}

.vc_common div.mode_img,
.vc_marker div.mode_img2{
width: 100% !important; 
text-align: center !important;
}


.vc_common div.mode_img img{
	width:100%;
}


.vc_display div.mode_img2 img,
.vc_marker div.mode_img2 img{
	width:40%;
}

.landing-page .guide{
	border: solid 3px #bc7a1b;
	background-color: #ffffff;
	border-radius: 30px;
	width:80%;
	max-width:500px;
	text-align: center;
	color: #bc7a1b;
	font-weight: 600;
}



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

/*
none <576 スマホ
sm >=576　スマホ横
md >=768　タブレット
lg >=992　PC
xl >=1200
xxl >=1400
*/
@media (max-width: 340px){
	.landing-page .title2{
		font-size: 22px !important;
	}
}

@media (min-width: 576px){
.landing-page .phone-container img {
		max-width:180px !important;
		width: 100%;
	  }

.title2{font-size:28px !important;}
.bdr{
	    padding: 20px;
	    border: solid 2px #999999;
        border-radius: 20px;
    }
.landing-page .header_mobile{
		width:70%;
		max-width:200px;
	}
			
}/*end of media*/

@media (min-width: 768px){
	.page-header {background-image: url('../img/cover_pc.webp');}	
	/*	
	@media (min-width: 811px){
.page-header {
	background-image: url('../img/cover_pc.jpg');
	background-image: url('../img/bg1.jpg');
}	

.landing-page .header-filter::before {
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%) !important;	
    }
	*/


	
h2.title{font-size:2.25rem;}	
.title2{font-size:30px !important;}
	
.catch2{display:none;}
.catch1{
	display:inline-block;
	margin:50px auto 0px !important;
}

	
.vc .title3{
	font-size:34px !important;
	text-align:left !important;
	display: inline;
	background-color:rgba(114,124,255,0);
	padding: 0;
	border-radius: 0px;
	margin-left:0px;
}
	
.vc .subtitle{
	    text-align: left !important;
	    margin-left: 10px;	
		color:rgba(255,255,255,1.00) !important;
	}
	
.vc div.mode{
	width:100%;
	display:block;
}
.vc .mode div:nth-child(1){width: 100%;}
.vc .mode div:nth-child(2){width: 100%;}
.vc .mode a{display: none;}
.vc .mode-btn{display:flex;}

.distributor-page .space-frame{
	display:none;
}

img.fig4b{
	width:100% !important;
}
			
}/*end of media*/

@media (min-width: 850px){

.jf{text-align:justify !important;}
.tbtn{display: inline-block;}
.fig1{
	background-image: url("../img/tolfa_fig1a.png") ;
	height:500px;
}

}/*end of media*/

@media (min-width: 992px){

/*

.landing-page .header-filter::before {
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%) !important;	
    }
	
.title2{font-size:34px !important;}
h2.title{font-size:2.25rem;}
*/
.landing-page .header_mobile{
	width:50%;
	max-width:200px;
}

	
.mic_allowed img.nes2{width:90%; margin: 30px auto 50px;}
.mic_allowed img.nes3{width:100%; margin: 60px auto 50px;}

.mic_allowed div.website>div:nth-child(2){
	height:240px;
}
	
	
.fig1{
	    background-image: url("../img/tolfa_fig1a.png") ;
	    height:400px;
     }

	img.fig3{
		width:100% !important;
		margin-top:100px; 
	}
	img.fig4{
		width:100% !important;
	}
    .sendmsg{
	    margin-top:50px;
	    margin-bottom:70px;
    }
	

	
/********nestle**********/
	.nestle_icon {
	width:100%;
	float:none;
	height:auto;
	overflow:hidden;
}

.nestle_icon .icon_box{
	width:33.3%;
	float:left;
	padding: 7px;
}

.nestle_icon .icon_box img{
	width:100px;
}
	
.nestle_icon .icn{
	text-align: center;
	float:none;
}

.nestle_icon .brdr{
	border: solid 1px #a0d24a;
	border-radius:10px;
	width: 100%;
	height:200px;
	padding: 15px 10px 15px 10px;
}

.nestle_icon .inf{
	text-align: center;
	color: #666666;
	margin-top: 10px;
	font-size: 10px;
	
}
	
	
/******  VC  *******/
.vc .page-header {
	height: 100vh;
	background-repeat: no-repeat;
    background-position:100% top !important;
    background-size: cover !important;
	background-image: url("../img/girl_j.jpg")
    }	

.vc .landing-page .header-filter::before {
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%) !important;	
    }
	
 .vc .tspace{
	    height: 0vh;
        display: block;
    }

.vc .ttl{
	text-align:left !important;
}
	
.vc .tbtn{
		margin-left: 20px;	
	}
	
.vc .subtitle{
	    text-align: left !important;
	    margin-left: 10px;	
		color:rgba(255,255,255,1.00) !important;
	}

	
}/*end of media*/



@media (min-width: 1200px){	
.nestle_icon .inf{
	font-size: small;
}
}/*end of media*/