/* ------------------------------------------------------------------------------
	Typography
-------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
@import url(//fonts.googleapis.com/css?family=Open%20Sans:300,400,500,600,700);
@import url(//fonts.googleapis.com/css?family=Merriweather:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css2?family=Barlow:wght@600;700;800&family=Noto+Sans+JP:wght@400;700;900&family=Roboto:wght@300;400;500;700&family=Zen+Kaku+Gothic+New:wght@700;900&display=swap);

.fwN { font-weight: normal!important;}
.fwB { font-weight: bold!important;}
.fzSSS  { font-size:  58%!important;}/* base 14px -> 10px */
.fzSS  { font-size:  72%!important;}/* base 14px -> 10px */
.fzS   { font-size:  86%!important;}/* base 14px -> 12px */
.fzM   { font-size: 100% !important;}
.fzL   { font-size: 115%!important;}/* base 14px -> 16px */
.fzLL  { font-size: 129%!important;}/* base 14px -> 18px */
.fzLLL { font-size: 143%!important;}/* base 14px -> 20px */

body.preload .wow.fadeIn {
	opacity: 0 !important;
}

h1,h2,h3,h4,h5{
	color: #111;
	font-family: "Noto Sans JP",sans-serif; 
}

p {
	font-size: 1.5rem;
	color: #111;
	line-height: 1.8;
	letter-spacing: .05em;
	font-weight:400;
	
}
h1 {
	font-size: 65px;
	color: #2d3033;
	margin-bottom: 15px;	
}
h2 {
	font-size: 40px;
	color: #2d3033;
	margin-bottom: 15px;	
	
}
h3 {
  font-size: 32px;
  font-size: 3.2rem;
	color: #2d3033;
	font-weight: 700;
	margin-bottom: 50px;
	letter-spacing:0.05em;
	line-height:40px;
  position: relative;
  padding: 1.5rem;
	
}
h3 span {
  font-size: 16px;
  font-size: 1.6rem;
  display: block;
	color:#f49e00;
	font-family: sans-serif;
	line-height:50px;
}
	@media screen and (min-width: 576px) {
		h3 {
			font-size: 36px;
			font-size: 3.6rem;			
			margin-bottom: 50px;
			letter-spacing:0.05em;
			line-height:40px;
			padding: 1.5rem;
			
		}
		h3 span {
			font-size: 16px;
			font-size: 1.6rem;
			font-family: sans-serif;
			line-height:2;
		}
	}

h3 sup{
	line-height:1;
	vertical-align: middle;
	font-size:0.65em;
	top: -8px;
}

h4 {
	font-size: 22px;
	color: #2d3033;
	font-weight: 700;
	letter-spacing:0.01em;
	line-height:30px;
}
h5 {
	font-size: 16px;
	color: #2d3033;
	text-transform: uppercase;
	font-weight: 700;
}
.btn {
	font-size: 13px;
	display: inline-block;
	border: 1px solid transparent;
}
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
.btn:hover, .btn:focus {
}
.btn-large {
	padding: 15px 40px;
}

.btn-fsL{ font-size:150%; }


.padding-side{ padding-left:15px; padding-right:15px; }
	@media screen and (min-width: 576px) {
		.padding-side{ padding-left:0; padding-right:0; }
	}

.padding-side img{ width:100%; max-width:960px; }

/* ------------------------------------------------------------------------------
	Global Styles
-------------------------------------------------------------------------------*/
a {
	color: #e84545;
}
a:hover, a:focus {
	text-decoration: none;
	-moz-transition: background-color, color, 0.3s;
	-o-transition: background-color, color, 0.3s;
	-webkit-transition: background-color, color, 0.3s;
	transition: background-color, color, 0.3s;
}
body {
	font-family: "Noto Sans JP",sans-serif;
	font-weight: 400;
	color: #111;
	letter-spacing: .05em;
	text-rendering: optimizeLegibility;
}
ul, ol {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
	line-height: 27px;
	list-style-type: none;
}

.section {
	padding: 100px 0;
}
.no-padding {
	padding: 0;
}
.no-gutter [class*=col-] {
	padding-right: 0;
	padding-left: 0;
}
.space {
	margin-top: 60px;
}

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.container01 {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	max-width:1000px;
}

.col-md-6{
	width:50%;
}
@media (max-width:576px) {
	.col-md-6{
		width:100%;
	}
}

.bg-yellow{
	background-color:#FBF9EF;
}
.bg-lightgray { background-color:#f3f4f4; }


/* ------------------------------------------------------------------------------
	Header
-------------------------------------------------------------------------------*/
#header {
	position: fixed;
	width: 100%;
	z-index: 999;
}

.header_box{
	padding-right: 5px;
	padding-left: 5px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width:992px) {
	.header_box{
		max-width: 100%;
	}
}
	@media (min-width:1200px) {
		.header_box{
			padding-right: 15px;
			padding-left: 15px;
			
		}
	}


#top-nav, #top-nav2  {
	transition: all .2s linear 0s;
}
.navbar-fixed-top .navbar-nav .activenav a {
	border-bottom: 1px solid #fff;
}
.navbar-nav>li>a {
	border-bottom: 1px solid transparent;
	transition: color .3s, border .3s;
}
.navbar-fixed-top .navbar-nav>li>a:hover {
	border-bottom: 1px solid #fff;
}
.fixed-header {
	box-shadow: 0 6px 4px -4px rgba(0,0,0,.4);
	padding-top:0px;
	padding-bottom:0;
	background-color:rgba(255,255,255,0.8);
}
.fixed-header .navbar-nav>li>a {
	color: #333 !important;
	opacity: 1;
	outline:none;
}
.fixed-header .navbar-nav .activenav a {
	color: #333!important;
	border-bottom: 1px solid #0785f2;
	outline:none;
}
.fixed-header .navbar-nav .activenav a:hover {
	border-bottom: 1px solid #0785f2;
}
.fixed-header .navbar-nav>li>a:hover {
	border-bottom: 1px solid #111;
}
#top-nav.navbar-scroll-changed ,#top-nav2.navbar-scroll-changed{
	margin: 0 auto;
	border: 0;
	padding-top: 10px;
	padding-bottom: 2px;
}
	@media (min-width:992px) {
		#top-nav.navbar-scroll-changed ,#top-nav2.navbar-scroll-changed{
			padding-top: 10px;
			padding-bottom: 10px;
		}
	}
	
.branding img#logo {
	width:100%;
	max-width:240px;
	margin-left: -5px;
}
	@media (max-width:991px) {
		.branding img#logo {
			margin-left: 0;
		}
	}



.navbar-fixed-top {
	background-color:rgba(255,255,255,1);
	box-shadow: 0 6px 4px -4px rgba(0,0,0,.4);
	border: none;
	line-height: 27px;
}

.navbar-fixed-top li {
	line-height: 27px;
	list-style:none;
}

.navbar-fixed-top li a {
	color: #333!important;
	font-size: 14px;
	transition: color .3s, border .3s;
	padding: 15px 0;
	margin-left: 30px;
	font-family: "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",Meiryo,メイリオ,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 14px;
	font-weight: 600;
	display:block;
}
@media (min-width:992px) {
	.navbar-fixed-top li a {
		padding: 8px 0;
	}
}
	@media (min-width:1024px) {
		.navbar-fixed-top li a {
			padding: 8px 0;
		}
	}

@media (max-width:991px) {
	.navbar-fixed-top {
		background: #fff!important;
		box-shadow: 0 6px 4px -4px rgba(0,0,0,.1);
	}
	.navbar-default .navbar-nav>li>a {
		color: #222 !important;
		opacity: 1;
		line-height: 20px!important;
		margin-left: 0!important;
		display:block !important;
	}
	.navbar-fixed-top .navbar-toggle .icon-bar {
		background-color: #757d8a!important;
	}
	.navbar-fixed-top .navbar-nav .activenav a {
		color: #222 !important;
		border-bottom: 1px solid #0785f2;
	}
	.branding img#logo {
    margin-left: 0;
		width:60%;
		max-width:200px;
	}
}

.navbar-default .navbar-toggle {
    margin-top: -30px;
}
.navbar-collapse {
    max-height: 480px;
}

/* ------------------------------------------------------------------------------
	Banner
-------------------------------------------------------------------------------*/
.banner {
	background-image: url(../img/main_sp.jpg);
	background-position: 0px -3px;
	background-repeat: no-repeat;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	min-height: 550px;
	position: relative;
}
.backg-overlay{
	background: rgba(20,20,0,.6);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	min-height: 550px;
}

@media screen and (min-width: 992px) {
	.banner {
		background-image: url(../img/main.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		-moz-background-size: cover;
		-o-background-size: cover;
		-webkit-background-size: cover;
		background-size: cover;
		min-height: 840px;
		position: relative;
	}
	.backg-overlay{
		background: rgba(20,20,0,.30);
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		min-height: 840px;
	}
}

.banner-container{
	max-width:1440px;
	margin:0 auto;
}

.banner-text h1 {
	color: #fff;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
	line-height:1.5em;
	margin-bottom: 30px;
	margin-top:0;
}
.banner-text h1 span{ font-size: 40%; font-weight:700; display:block; margin-bottom:20px;}
.banner-text h1 sup{ line-height:1em; vertical-align: text-bottom; }

.banner-text {
	 padding-top: 20%;
	 position:relative;
}
.banner-text h2 {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 14px;
	color:#FFF;
	line-height:1.7em;
	margin-bottom:40px;
	text-shadow: 0px 0px 11px #1f1f1f;
	font-weight: normal;
}

@media screen and (min-width: 640px) {
	.banner-text {
		 padding-top: 18%;
		 padding-bottom: 18%;
		 max-width:1440px;
	}
	.banner-text h1 {
		font-size: 43px;
		line-height:1.4em;
		margin-bottom: 60px;
	}
	.banner-text h1 span.fs-mv{ font-size: 50%; }
	.banner-text h1 span.fs-web{ font-family: 'Barlow', sans-serif!important; font-size: 42px;	font-weight: 700; text-transform: capitalize; }
	.banner-text h2 {
		font-size: 18px;
		margin-bottom: 50px;
	}

}
	@media screen and (min-width: 992px) {
		.banner-text {
			width: 100%;
			padding-top: 15%;
			padding-bottom: 0%;
		}
		.banner-text h1 {
			font-size: 38px;
			line-height:1.4em;
			margin-bottom: 40px;
			text-shadow: 0px 0px 11px #1f1f1f;
		}
		.banner-text h1 span.fs-mv{ font-size: 70%; }
		.banner-text h2 {
			font-size: 18px;
			color:#FFF;
			line-height:1.4em;
			margin-bottom:120px;
		}
	}


.btnarrow{
	position: relative;
	border: 1px solid #ea6c26;
	padding: 18px 90px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-weight:700;
	outline: none;
	transition: all .2s linear;
	background:#ea6c26;
	border-radius: 50px;
	font-size: 18px;
}
.btnarrow:hover{
	background-color: transparent;
	color:#FFF;
	border: 1px solid #fff;
}
.btnarrow::before{
	content:"";
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	top:50%;
	right:-26px;
	width:60px;
	height:2px;
	background:#fff;
	transition: all .2s linear;
}
.btnarrow::after{
	content:"";
	position: absolute;
	top: 32%;
	right: -21px;
	width:2px;
	height:12px;
	background:#fff;
	transform:skewX(45deg);
	transition: all .2s linear;
}
.btnarrow:hover::before{
	right:-40px;
}
.btnarrow:hover::after{
	right:-35px;
}

.img-point{
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);	
	width:28%;
	z-index:1;
	margin-left:120px;
}
.img-point img{ width:100%; }


	@media screen and (min-width: 768px) {
		.img-point{
			position: absolute;
			top	: 65%;
			left:-120px;
			width:180px;
			left:auto;
			margin-left:450px;
		}
		.img-point img{ width:100%; }
	}
		@media screen and (min-width: 992px) {
			.img-point{
				position: absolute;
				bottom : -50px;
				top:65%;
				left:50%;
				width:220px;
				margin-right:-100px;
				margin-left:auto;
			}
			.img-point img{ width:100%; }
		}

.ruby-1{
	font-size:80%;
	ruby-position: under;
	ruby-align:center;
}


/* ==========================================================================
	intro
========================================================================== */
.intro {
	background-color: #FFF0E1;
	position: relative;
	padding-top:40px;
	padding-bottom: 40px;
}
	@media screen and (min-width: 576px) {
		.intro {
			background-color: #FFF0E1;
			position: relative;
			padding-bottom:50px;
		}	
	}
		@media screen and (min-width: 768px) {
			.intro {
				background-color: #FFF0E1;
				position: relative;
				padding-top:60px;
				padding-bottom: 30px;
				}	
		}

.intro h3 {
	color: #333;
	margin-top: 0px;
	text-align:center;
	font-size:22px;
}
	@media screen and (min-width: 576px) {
		.intro h3 {
			font-size:24px;
		}
	}

.intro ul{
	color:#333;
	text-align:left;
	margin:0% auto 2%;
	max-width:100%;
}
.intro ul li{ margin:1.1% 0 0; font-size:0.8em; font-weight:600; }

.intro ul li span{
	font-size:22px;
	margin-right:2px;
	color:#ea6c26;
	vertical-align: -6px;	
}

@media screen and (min-width: 576px) {
	.intro ul{
		margin:0% auto 2%;
		max-width:550px;
	}	
	.intro ul li{ margin:1.1% 0; font-size:1.2em; font-weight:600; }
	.intro ul li span{
		font-size:40px;
		margin-right:10px;
		vertical-align: -12px;	
	}
}




/* ==========================================================================
	intro image
========================================================================== */
.intro_imgbox{
	position: relative;
	background-color:#FFF0E1;
}
.curved1{ background: #F9FAFC; 	padding-bottom:40px;}
.curved {
  position: relative;
  background: #FFF0E1;
  height: 30vh;
  border-bottom-left-radius: 50% 30%;
  border-bottom-right-radius: 50% 30%;
	text-align:center;
}

.arw_kaiketu{
	padding-top:50px;
}
.arw_kaiketu:before{
  content: "";
  display: inline-block;
  background: url(../img/img_kaiketsu_arw.png) 100% 100% / cover;
  height: 42px;
  width: 23px;
  position: absolute;
  right: 50%;
  transform: translatex(50%);
	top:40px;
}
.curved1 figure{
	text-align:center;
	max-width:458px;
	margin:auto;
}
.curved1 figure img{ width:94%; height:auto; margin-left: auto; }


@media screen and (min-width: 576px) {
	.curved1 figure img{ width:100%; height:auto; margin-left:-70px; }
}

.intro_imgboxr{
	padding:0em;
}
.intro_imgbox .intro_imgbox_inner img{
	border-radius: 12px;
	
}





/* ==========================================================================
	Slide
========================================================================== */
/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slide {
  display: -ms-grid;
  overflow: hidden;
	width: 100%;	
}

.slide__wrap {
  display: flex;
  overflow: hidden;
	width:100%;

}

.slide__list {
  display: flex;
  list-style: none;
}

.slide__list--left{
	animation :infinity-scroll-left 95s infinite linear 0.5s both;
}
.slide__list--right{
	animation :infinity-scroll-right 95s infinite linear 0.5s both;
}

.slide__item {
  width: calc(200vw / 6);
	padding:0 .5em;
}
.slide__item > img{
   width: 100%;
	 border-radius: 12px;
}
@media screen and (min-width: 576px) {
	.slide__item {
		width: calc(100vw / 6);
		padding:0 1em;
	}
	.slide__item > img{
		 width: 100%;
		 border-radius: 12px;
	}
}



/* ==========================================================================
	解決します
========================================================================== */
.intro_kaiketsu {
    padding: 100px 10px 120px;
}
.intro_kaiketsu::before {
	display: block;
	z-index: -2;
	position: absolute;
	top: 0;
	right: 0;
	width: 50vw;
	height: 100%;
	background-color: #F0EDE6;
	content: '';
}

/* ==========================================================================
	bg
========================================================================== */
.bgbox{	
	clear:both;
	position: relative;
	background-color: #F9FAFC;
	display: block;
	z-index: -1;
	top: 0;
	left: 0; 
	width: calc(100% - 0px);
	height: 100%;
}
.bgbox:after{
	display: block;
	z-index: -2;
	position: absolute;
	top: 0px;
	left: 0;
	width: 60vw;
	height: 100%;
	background:#F3F3F3;
	content: '';
	border-radius: 0 160px 160px 0;	
}

.bgbox2{
	position: relative;
	background-color: #F9FAFC;
	display: block;
	z-index: -1;
	top: 0;
	right: 0; 
	width: calc(100% - 0px);
	height: 100%;
	z-index: 1;
}
.bgbox2:after{
	display: block;
	z-index: -2;
	position: absolute;
	top: 0px;
	right: 0;
	width: 60vw;
	height: 100%;
	background:#F3F3F3;
	content: '';
	border-radius: 160px 0 0 160px;	
}
.bgbox1_inner , .bgbox2_inner{
	height: 100%;
	margin:auto;
	padding:140px 0px;

}

.about .bgbox1_inner h4{
	font-size:2em;
}

.intro_kaiketsu_inner {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0;
}

.intro_kaiketsu h3{
	color: #d65515;
	font-size:2em;
	margin:auto;
	text-align:center;
}

.img-intro_kaiketsu{
	width:100%;
	max-width:500px;
	margin-right:auto;
	margin-left:auto;
}

.icon_about{
	color: #d65515;
	font-size:2.4em;
	margin:0 auto 40px;
	text-align:center;
	display: block;
	width:100%;
}

.icon_about span{
	height:80px;
	width:80px;
	line-height:80px;
	border-radius:50%;
	text-align:center !important;
	background-color:#F0EDE6;
	margin:auto auto 1em !important;
	display: block;
	position:relative;
}
.icon_about span:before{
  font-family: "Material Symbols Outlined";
  content: "\e0f0";
  position: absolute;
  left: 25%;
  font-size: 1.5em;
  color: #EA671F;
	display:inline-block;
	text-align:center;
}

.txt_about{
	padding:2em 2em;
	background-color:#FFF;
	border-radius:8px;
}
.txt_about p{	font-size:0.9em;  }

.tit_movie {
	position: relative;
	padding-top: 30px;
	font-size: 2em;
}

.tit_movie span {
	position: relative;
	z-index: 2;
}

.tit_movie::before {
	content: attr(data-en);
	position: absolute;
	top: 0;
	left: 0;
	color: rgba(169,169,169,0.1);
	font-size: 70px;
	text-transform: uppercase;
	z-index: 1;
}
	@media screen and (min-width: 576px) {
		.tit_movie::before {
			content: attr(data-en);
			position: absolute;
			top: 0;
			left: 0;
			color: rgba(169,169,169,0.1);
			font-size: 140px;
			text-transform: uppercase;
			z-index: 1;
		}
	}

/* =====================
  　Youtube
===================== */

.h3-youtube { display:block; text-align:center; margin-top: 0px;}
	@media (max-width: 480px) {
		.h3-youtube { font-size:16px; margin-bottom:10px; line-height: 28px;}
	}
.youtube {
	width:100%;
	max-width:560px;
	text-align:center;
	margin:auto;
	z-index: 1;

}
.youtube-responsive {
	text-align:center;
  height: 0;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
}
.youtube-responsive iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
	z-index: 1;
	display: block;
}


/* =====================
  　4列
===================== */

*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
	@media screen and (max-width: 960px) {
		.col_4 > div{
			width: 50%;
		}
	}
		@media screen and (max-width: 480px) {
			.col_4 > div{
				width: 100%;
			}
		}

.img_structure{
	max-width:800px;
	margin:auto;
}
.img_structure img{ width:100%; }




/* =====================
  　3列
===================== */

*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.3333%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
	@media screen and (max-width: 480px) {
		.col_3 > div{
			width: 100%;
		}
	}


.okomarigotoBox{
	border:solid 4px; color:#F0EDE6;
	width:100%;
	height:150px;
	margin:auto;
	position: relative;
	background-color:#FFF;
	text-align:center;
	display:table;
}

.okomarigotoBox p{
	color:#444444;
	font-weight: 700;
	font-size:108%;
	line-height:1.4em;
	display:table-cell;
	vertical-align:middle;
}
.num-okomarigoto{
	border-radius: 50%;
	line-height: 50px;
	text-align:center;	
	width: 50px;
	height: 50px;
	background-color:#F0EDE6;
	color:#FFF;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -25px;
}

h4.h4_okomarigoto{
	color:#F0EDE6;
	font-weight:700;
	font-size:24px;
}
h4.h4_okomarigoto span{
	font-weight:bold;
	font-size:34px;
}


/* ==========================================================================
	Serives
========================================================================== */

.service-bg{
	background-color: #00aeda;
}

.service-section {
	padding-top: 100px;
	padding-bottom:100px;
}

.services-content {
	padding: 0;
	margin-top: 20px;
}
	@media screen and (min-width: 576px) {
		.services-content {
			margin-top: 30px;
		}
	}
.services figure.icon {
	/*color: #00aeda;
	width:110px;
	height:auto;
	display: inline-block;	
	background-color:#FBFBFB;
	margin:auto;
	padding: 1.2em;
	border-radius: .525rem;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);*/
	
	width:110px;
	height:auto;
	display: inline-block;	
	margin:auto;
}
.services figure.icon img{
	width:100%;
}
.text-light{ color:#FBFBFB; }



/* ------------------------------------------------------------------------------
	 Relation
-------------------------------------------------------------------------------*/
.related-item {
	margin:auto;
	width: 100%;
	vertical-align: top;
	border-radius: 20px;
	padding-bottom: 20px;
	background-color:#FFF;
	text-align:center;
	height: 100%;
	box-shadow: 0px 0px 12px 0px rgba(34, 34, 34, 0.1);
	border-radius:20px;
}
.related .related-item img.photo {
	border-radius:20px 20px 0 0;
	width: 100%;
}

.related .related-item-text{
	margin:20px 30px 0;
}
.related .related-item-text h4 {
	padding:0;
	margin: 14px 0;
	width:180px;
	display: inline-block;
}
.related .related-item-text h4 img{ width:100%; }
.related .related-item-text p {
	text-align:left;
	padding:0;
	margin-bottom:2em;
	line-height: 1.7em;
	font-size:100%;
}

.btn-solid-orange a{
	display: inline-block;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	padding: 1em 2em 1em 2em;
	background-color: #ffffff;
	color: #ea6c26 !important;
	border-radius: 30px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border: 2px solid #ea6c26;
	cursor:pointer;
	margin:auto;
}

.btn-solid-orange a:hover{
	background-color: #ea6c26;
	border: 2px solid #ea6c26;
	color: #fff !important;
}


/* ------------------------------------------------------------------------------
	 Introduce
-------------------------------------------------------------------------------*/
.introduce{
	counter-reset: num_a;
}
.introCase-box{
  border-radius: 30px;
	background-color: #FFF;
	padding: 3em 1em 3em;
	box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2);
	position:relative;
	height:auto;
	max-height:100%;
	display:inline-block;
	color: #364347;
}
.introCase-box::before{
  content: counter(num_a,decimal-leading-zero);
  counter-increment:num_a;
	font-size: 50px;
	position:absolute;
	left: 30px;
	top: -40px;
	font-family:"Century Gothic", sans-serif;
	color:#ea6c26;
}
@media (min-width: 576px) {
	.introCase-box{
		padding: 4em 2em 4em;
	}
	.introCase-box::before{
		font-size: 70px;
		left: 40px;
		top: -50px;
	}
}

.introduce .introCase-box h4{
	display: inline-block;
	font-size: 2rem;
	color:#ea6c26;
	margin-left:20px;
}

.introCase-box h4 span{ margin-right:20px; font-size:0.7em; }

@media (min-width: 576px) {
	.introduce .introCase-box h4{
		font-size: 2.5rem;
	}
}
.introCase-ex1 , .introCase-ex2{
	border-radius: 6px;
	border: solid 1px #CCCCCC;
	margin:0 .25em;
	position: relative;
	overflow: hidden;	
	background: #fff;
	transition: background-color .3s,color .3s;
	padding: 3% 3% 1%;
	text-align: center;	
}

.introCase-ex1::before , .introCase-ex2::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.introCase-ex1::before {
    background: #00AFD5;
}
.introCase-ex2::before {
    background: #F29600;
}


.introCase-label{
	display:block;
	max-width: 80px;
	padding: 2px 2px 2px 6px;
	text-align: center;
	border-radius: 3px;
	margin-bottom: 0.5em;
	font-size:100%;
	font-weight:700;
	letter-spacing:0.25em;
}
.introCase-label.label-1{
	background-color: #00AFD5;
	color: #fff;
}
.introCase-label.label-2{
	background-color: #F29600;
	color: #fff;
}

.introCase-voice{
	padding:20px 30px;
	border-radius: 6px;
	background-color:#FFF0E1;
	clear:both;
	margin:1em 0.5em 0;
}
.introCase-voice p{ margin-bottom:0; }

.text-orange{
	color:#ea6c26;
}

.img-responsive{ width:100%; }

.case-title{
	font-size:15px;
	/*color:#26A3F7;*/
	line-height:1.7;
	font-weight:500;
	text-align:left;
	padding:0 .6em;
}

.case-box {
	padding: 1.6em;
	background-color: #F2F5FF;
}
.case-body {
	padding: 1.4em 2em .6em;
	border-radius: 6px;
	background-color: white;
	font-size: 100%;
	font-weight:400;
}
.case-body h5{
	margin-bottom:5px;
	line-height: 1.6em;
}

.case-body p { line-height: 1.4em; }
@media (max-width: 640px) { .case-body p { line-height: 1.6em; } }

.label-case{
	border-radius: 4px;
	font-size: 12px;
	padding:.3em 2em .3em 2.3em;
	font-weight: 500;
	display:inline-block;
	margin-bottom:5px;
	letter-spacing:0.5em;
}
.label-case-red { background-color: #DD4C30; color: #fff; }
.label-case-blue{ background-color: #498EE0; color: #fff; }


.bg-case1{ background-color:#f0f0f0;}
.bg-case2{ background-color:#e2eaf4;}


.lineMarker.scroll-in{
	background-position: -100% .7em;
}

.lineMarker {
	background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
	background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
	background-image: linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
	background-repeat: repeat-x;
	background-size: 200% .7em;
	background-position: 0 .7em;
	transition: all 1.2s ease;
	font-weight: bold;
}

.lineBlue {
	background-image: -webkit-linear-gradient(left, transparent 50%, rgb(154,218,255) 10%);
	background-image: -moz-linear-gradient(left, transparent 50%, rgb(154,218,255) 10%);
	background-image: linear-gradient(left, transparent 50%, rgb(154,218,255) 10%);
}

.lineGreen {
	background-image: -webkit-linear-gradient(left, transparent 50%, rgb(152,255,155) 10%);
	background-image: -moz-linear-gradient(left, transparent 50%, rgb(152,255,155) 10%);
	background-image: linear-gradient(left, transparent 50%, rgb(152,255,155) 10%);
}
.lineYellow {
	background-image: -webkit-linear-gradient(left, transparent 50%, #fbd317 0%);
	background-image: -moz-linear-gradient(left, transparent 50%, #fbd317 0%);
	background-image: linear-gradient(left, transparent 50%, #fbd317 0%);
}

.c-marker {
	background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
	background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .5em;
	transition: 2s;
	font-weight: 700;
}
.c-marker.is-active{
	background-position: 0% .5em;
}



/* ==========================================================================
	 feature
========================================================================== */
.feature-box-radius{
	position: relative;
	border-radius: 20px;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
	background-color:#FFF;
	padding:80px 10px;
}

.feature-box-radius h4{
	margin:0 0 30px;
	position: absolute;
	display:inline-block;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 40px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 20px 0 20px 0;
	background: #F29600;
	padding:8px 30px		
}

	@media screen and (min-width: 768px) {
		.feature-box-radius h4{
			font-size: 16px;
			padding:8px 40px		
		}
	}
	
.feature-text{
	clear:both;
	font-size:32px;
	line-height:38px;
	font-weight:700;
	color:#F39800;
	text-align:center !important;
	display:inline-block;
}
	@media screen and (min-width: 768px) {
		.feature-text{
			font-size:40px;
			line-height:46px;
		}
	}

.feature-text01{ color:#44AF69; }
.feature-text02{ color:#F8333C; }

.feature-text sup{ line-height:1em; vertical-align: text-bottom; }

.ul_feature{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	justify-content: center;
}
.ul_feature li {
	width: 42%;
	display: inline-block;
	margin: 20px 10px 10px;
	padding: 20px 15px;
	background-color:#FFF0E1;	
	border-radius: 10px;
	box-sizing: border-box;
	text-align: center;
	line-height: 1;
	position:relative;	
}

	@media screen and (min-width: 576px) {
		.ul_feature li {
			width: 18%;
			margin: 20px 20px 10px;	
		}
	}
	
.ul_feature li.svbox{
	background-color:#FFF;
	border: dotted 2px #F29600;
}

.ul_feature li p{
	margin:0 auto 0;
	padding:0;
	font-size:1.5rem;
	font-weight:700;
	color:#9e6100;
}
	
.ul_feature li:after{
	position: absolute;
	top: 50%;
	right:-20px;
	font-family: 'Material Icons';
  content: "\eaaa";
	font-size:30px;
	margin-top:-15px;
	color:#edbc76;
}	

	@media screen and (min-width: 576px) {
		.ul_feature li:after{
			position: absolute;
			top: 50%;
			right:-35px;
			font-family: 'Material Icons';
			content: "\eaaa";
			font-size:30px;
			margin-top:-15px;
			color:#edbc76;
		}	
	}

.ul_feature li:last-child::after{
	content: none;
}
.ul_feature li img {
	width:94%;
	height:auto;
}
	@media screen and (min-width: 576px) {
		.ul_feature li img {
			width:100%;
			max-width:136px;
			height:auto;
		}
	}
	
	
.feature_sv{
	border: 2px solid #F29600;
	border-radius: 10px;
	padding: 25px 0px 20px 0px;
	position: relative;
	z-index: 0;
	max-width: 580px;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items:center;
	background-color: #fff;

}
.feature_sv h5{
	background-color: #F29600;
	border-radius: 10px 0 10px 0px;
	color: #fff;
	height: 30px;
	padding: 8px 0px 5px 0px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin:0;
	line-height:1;
	font-size:12px;
	width:120px;
}
.feature_item {
	display: flex;
	justify-content:center;
	align-items: center;
	box-sizing: border-box;
	word-wrap: break-word;
	justify-content:center;
	align-items:center;
	padding-top:10px;
	padding-bottom:5px;

}
.feature_figure {
    width: 120px;
    margin-right: 10px;
		margin-left:0;
}
.feature_figure img{ width:100%; }
	@media screen and (min-width: 576px) {
		.feature_figure {
				width: 190px;
				margin-right: 10px;
		}		
	}
	
.feature_item p {
    width: calc(100% - 120px);
		line-height:1.4;
		text-align:left;
		font-size:0.9em;
		margin-bottom:0;
		word-wrap: break-word;
}

.feature_item a{ color:#111111; }


	@media screen and (min-width: 576px) {
		.feature_item p {
				width: calc(100% - 200px);
				font-size:1em;
		}
	}

.feature_item span.material-symbols-outlined{ font-size:20px; line-height:1; vertical-align: middle; color:#e84545; }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48;
}

.material-symbols-outlined.icon-close{
	font-size:28px;
	vertical-align: middle;
	padding-left: 0px;
	padding-right: 10px;
	color:#333;
}



/* ==========================================================================
	Merit
========================================================================== */
.merit-item {
    width: 100%;
    max-width: 341px;
    vertical-align: top;
    border-radius: 20px;
		padding-top: 60px;
		padding-bottom:30px;
		background-color:#FFF;
		text-align:center;
		border: solid 3px #ff8e3f;
		height: 100%;
		margin:auto;
}
.merit .merit-item h4 {
	text-align: center;
	padding:0;
	margin: 0 auto 0;
	line-height: 1;
	font-size:1.3em;
	color:#ee6600;
}
.merit-item img {
	margin-top: 3em;	
	margin-bottom: 2em;
	max-width:140px;
}
.merit .merit-item p {
	text-align:left;
	padding:0;
	margin:0.25em 2em 0;
	line-height: 1.5em;
	font-size:100%;
	color:#3c2c25;
}

/* ==========================================================================
	Case
========================================================================== */
.thumbnail {
	padding:0;
	height:100%;
	width: 100%;
	max-width: 341px;
	margin-right: auto;
	margin-left: auto;
	border-radius:20px !important;
	box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2);	
}
.caption {
	color: #364347;
	line-height: 1.7142857142857142;
	padding: 10px 22px 30px !important;
}
.thumbnail-caption > img,
.thumbnail-caption a > img {
	border-top-left-radius:20px !important;
	border-top-right-radius: 20px !important;
}
.thumbnail-caption > img {
	width: 100%;
}
.caption h4{ color:#2d3033; margin-bottom:.4em; text-align:center; 	font-size: 2.0rem; }
.caption p{ font-size: 1.3rem;}


/* ==========================================================================
	Security
========================================================================== */
.security{
	margin:0;
	padding:0;
	z-index:1;
	position:relative;
	background: rgb(253,100,29);
	background: linear-gradient(90deg, rgba(253,100,29,1) 0%, rgba(252,176,69,1) 100%);
}
.security::before {
	content: "";
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;	
	background: url("../img/bg_security.jpg") no-repeat left top;
	background-size: contain;
	min-height:820px;
}
.securityBox{
	position:relative;
	width: 100%;
	height: 100%;
	min-height:820px;
}
	@media screen and (min-width: 768px) {
		.security{
			margin:0;
			padding:0;
			z-index:1;
			position:relative;
			background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
		}
		.security::before {
			content: "";
			position:absolute;
			top: 0;
			left: 0;
			width: 100%; 		
			background: url("../img/bg_security.jpg") no-repeat left top;
			background-size: contain;
			min-height:610px;
		}
		.securityBox{
			position:relative;
			width: 100%;
		}
	}
	@media screen and (min-width: 992px) {
		.security::before {
			content: "";
			position:absolute;
			top: 0;
			left: 0;
			width: 100%; 		
			background: url("../img/bg_security.jpg") no-repeat left top;
			background-size: contain;
			min-height:610px;
		}
		.securityBox{
			position:relative;
			width: 100%;
			min-height:710px;
		
		}
	}

.securityBox-inner{
	position: absolute;
	top: 0%;
	left: 0%;
	z-index:3;
	padding-top:200px;
	padding-bottom: 100px;
	transform: translateX(0%);
	padding-left:15px;
	padding-right:15px;
}
.securityBox-item{
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content: center;
  align-items: center;
	margin-bottom:20px;
	padding: 20px 14px;
	background-color: #fff;
	border-radius: 20px;
	max-width: 740px;
	box-shadow: 0 3px 15px rgba(125,55,4,0.16);
}
	@media screen and (min-width: 768px) {
		.securityBox-inner{
			padding:300px 15px 120px;
		}
		.securityBox-item{
			padding: 20px 14px;
			background-color: #fff;
			border-radius: 20px;
			max-width: 100%;
			box-shadow: 0 3px 15px rgba(125,55,4,0.16);
		}
	}
		@media screen and (min-width: 992px) {
			.securityBox-inner{
				position: absolute;
				top: 0%;
				left: 50%;
				width: 50%;
				z-index:3;
				transform: translateX(-15%);
				padding:120px 0 120px 0;
			}
			.securityBox-item{
				padding: 20px 14px;
				max-width: 740px;
			}
		}

.security-img{
	width: 24%;
	margin-right:2%;
	max-width:100px;
}
	@media screen and (min-width: 768px) {
		.security-img{
			max-width:100px;
		}
	}
.security-img img{ width:100%; max-width: 112px; }

.security-text{
	width: 74%;
	padding:0;
	
}
.security-text h4{
	color:#2d3033;
	font-weight:700;
	font-size: 1.8rem;
}
.security-text p{
	color:#444444;
	line-height:1.4em;
	vertical-align:middle;
	font-size:92%;
}
	@media screen and (min-width: 768px) {
		.security-text{
			width: 80%;
		}
		.security-text h4{
			font-size: 2.0rem;
		}
		.security-text p{
			font-size:100%;
		}
	}

/* ------------------------------------------------------------------------------
	 Flow
-------------------------------------------------------------------------------*/
.bg-Flow h3{
	z-index:3;
}

.bg-Flow {
	background-image:url(../img/bg_flow_sp.jpg);
	background-repeat: no-repeat;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
  background-position:30%;
	padding: 120px 0 90px;
	position: relative;
	background-attachment: fixed;
	z-index:1;
}
.bg-Flow::after {
  content: '';
  background-color: rgba(255,255,255,.4);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	z-index:2;
}
		@media screen and (min-width:992px){
			.bg-Flow{
				clear:both;
				background: url(../img/bg_flow.jpg) fixed center;
				background-size: cover;
				padding: 120px 0 90px;
				
			}
			.bg-Flow::after {
				background: none;
			}
		}

.col {
    display: flex;
}
.txtBox {
    padding: 25px 30px;
    background: #f9f3e3;
    border-radius: 20px;
    box-shadow: 0 3px 15px rgba(125,55,4,0.30);
    font-size: 1.6rem;
}
.flow{
	padding: 10px 0 105px;
}
		@media screen and (max-width:767px){
			.flow{
				padding: 40px 0 70px;
			}

		}
			@media screen and (max-width:500px){
				.flow{
					padding: 0px 12px 30px;
				}
			}


.flow_list{
	max-width: 800px;
	margin: 0 auto 0px;
	counter-reset: number 0;
}
.flow_listItem{
	position: relative;
	z-index: 10;
	justify-content: center;
	align-items: flex-start;
}
.flow_listItem:nth-last-of-type(n+2)::before{
	content: "";
	position: absolute;
	bottom: -5%;
	left: 37px;
	z-index: 1;
	display: block;
	width: 0;
	height: calc(100% - 78px - 20px);
	border-right: 2px dotted #737373;
}
	@media screen and (max-width:767px){
		.flow_listItem:nth-last-of-type(n+2)::before{
			bottom: -15%;
			left: 22px;
			height: calc(100% - 20px - 40px);
			border-right: 2px dotted #737373;
		}	
	}


.flow_listItem + .flow_listItem{
	margin-top: 25px;
}
.flow_listItem .step{
	position: relative;
	z-index: 10;
	margin-right: 30px;
}
.flow_listItem .step .ic{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 78px;
	height: 78px;
	background-color: #f09f2a;
	border-radius: 50%;
	box-shadow: 0 2px 3px rgba(125, 55, 4, 0.26);
}
.flow_listItem .step .ic span{
	font-size:44px;
	color:#FFF;
	line-height: normal;
	padding-top: 8%;
}
.flow_listItem_content{
	width: calc(100% - 78px);
}
.flow_listItem_content .ttl{
	margin-bottom: 10px;
	font-size: 2.2rem;
	font-weight: 700;
	line-height:20px;
	margin-top:1%;
	color:#2d3033;
}
.flow_listItem_content .ttl::before{
	counter-increment: number 1; 
	content: "STEP " counter(number, decimal-leading-zero);
	display: inline;
	font-size: 1.4rem;
	font-weight: 700;
	color: #FF8E3F;
	text-align: right;
	margin-right:20px;
}
.flow_listItem_content .txtBox{
	padding: 20px 25px 10px;
	font-size: 1.4rem;
	box-shadow: 0 2px 3px rgba(125, 55, 4, 0.26);
}
	@media screen and (max-width:767px){
		.flow_list{
			margin-bottom: 50px;
		}
	}
	@media screen and (max-width:500px){
		.flow_listItem_content{
			width: calc(100% - 48px);
		}	
		.flow_listItem + .flow_listItem{
			margin-top: 20px;
		}
		.flow_listItem .step{
			position: relative;
			z-index: 10;
			margin-right: 5px;
		}
		.flow_listItem .step .ic{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 48px;
			height: 48px;
			background-color: #f09f2a;
			border-radius: 50%;
			box-shadow: 0 2px 3px rgba(125, 55, 4, 0.26);
		}
		.flow_listItem .step .ic span{
			font-size:28px;
			color:#FFF;
			line-height: normal;
			padding-top: 8%;
		}
		.flow_listItem_content .ttl{
			margin-bottom: 2px;
			font-size: 1.6rem;
			padding:1rem;
		}
		.flow_listItem_content .txtBox{
			padding: 15px;
		}	
		.flow_listItem_content .txtBox p{
			font-size: 1.2rem;
			margin-bottom:0;
		}
	}

/*	flow_caption-------------------------------*/
.flow_caption{
	position: relative;
}
.flow_caption .person01{
	justify-content: flex-end;
	flex-direction: row-reverse;
}
.flow_caption .person01 .caption_fg{
	margin-top: 40px;
	margin-bottom: 35px;
}
.flow_caption .person02{
	position: absolute;
	top: 23%;
	right: 0;
	flex-direction: row-reverse;
	width: 100%;
}
.flow_caption .person02 .caption_balloon{
	width: calc(100% - 245px - 230px);
}
	@media screen and (max-width:767px){
		.flow_caption{
			max-width: 600px;
			margin: 0 auto;
		}
		.flow_caption .person01{
			align-items: center;
		}
		.flow_caption .person02{
			position: static;
			align-items: center;
			margin-top: 0;
		}
		.flow_caption .caption_fg{
			width: 35%;
		}
		.flow_caption .person01 .caption_fg{
			margin-top: 0;
			margin-bottom: 0; 
		}
		.flow_caption .caption_balloon{
			width: 65%!important;
		}
		.flow_caption .person02 .caption_balloon{
			margin-top: 0;
		}
		.flow_caption .caption_balloon::after{
			bottom: 16px;
			border-width: 8px 10px;
		}
		.flow_caption .person01 .caption_balloon::after{
			left: -18px;
			border-color: transparent #3C2C25 transparent transparent;
		}
		.flow_caption .person02 .caption_balloon::after{
			right: -18px;
			border-color: transparent transparent transparent #93CF30;
		}
	}
	@media screen and (max-width:500px){
		.flow_caption .person02{
			margin-top: 15px;
		}
	}

/* ------------------------------------------------------------------------------
	 Price
-------------------------------------------------------------------------------*/
.price{
	display:block;
	height:auto;
	clear:both;
}


.table-wrapper {
	overflow-x: auto;
}
.table-wrapper table {
	table-layout: fixed;
}
.price-table {
	margin-bottom:2em;
	padding-left:10px;
	padding-right:10px;
}
.price-table table {
	border-spacing: 2px;
	text-indent: 0;
}
.price-table table {
	width: 100%;
	color: #5e5e5e;
}
.price-table table tr td, .price-table table tr th {
	border: 3px solid #d3d3d3;
	border-collapse: collapse;
}
.price-table table tr th, .price-table table tr td{
	padding:20px 0;
}
.price-table table tr th {
	background: #FBF9EF;
	width: 48%;
	text-align: center;
	font-size:92%;
}
.price-table table tr td {
	text-align: center;
	font-weight: 700;
	vertical-align: inherit;
	font-size:110%;
	background-color:#FFF;
}
	@media (min-width: 768px) {
		.price-table table tr th, .price-table table tr td{
			padding: 2% 0;
		}		
		.price-table table tr th {
			width: 50%;
			font-size:110%;
		}
		.price-table table tr td {
			font-size:130%;
		}
	}
.price-table table td, .price-table table th {
	border: 2px solid #e5e5e5;
	border-collapse: collapse;
}
.text-price{
	color:#e60012;
	font-size:150%
}

/* ==========================================================================
	Faq
========================================================================== */

.faq{
	background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.qa-list {
	padding-left:8px;
	padding-right:8px;
}

.qa-list dl {
	position: relative;
	margin: 25px 0 0px;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
	padding: 30px 46px 30px 20px;
	background:#fafafa;
}
.qa-list dl:first-child {
	margin-top: 0;
}
.qa-list dl span::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 24px;
	height: 2px;
	background: #444;
	transform: translateY(-50%);
}

.qa-list dl span::after {
	content: "";
	position: absolute;
	top: 50%;
	/* 8px+12px-1px(幅2pxの半分) */
	right: 19px;
	width: 2px;
	height: 24px;
	background: #444;
	transform: translateY(-50%);
	transition: .3s;
}
.qa-list .open span::after {
	top: 25%;
	opacity: 0;
	transform: rotate(90deg);
}
.qa-list dl dt {
	display:block;
	position: relative;
	margin: 0;
	font-weight: bold;
	font-size:1.8rem;
	padding-left:70px;
	padding-right:50px;
	color:#2d3033;
}

.qa-list dl dt::before {
	content: "Q";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: auto;
	padding-bottom: 5px;
	background-color: #ee7b2f;
	font-size: 1.6rem;
	color: #ffffff;
	line-height: 1;
	border-radius: 50%;
}
.qa-list dl dd {
	display:block;
	position: relative;
	margin: 0;
	padding:30px 50px 10px 70px;
}
.qa-list dl dd p {
	margin: 0;
	font-size:116%;
}
	@media screen and (max-width: 767px) {
	 .qa-list dl {
			margin: 10px 12px 20px;
			padding: 0px;
		}
		.qa-list dl:after {
				top: 20px;
				right: 20px;
				width: 7px;
				height: 7px;
		}
		.qa-list dl dt {
				padding: 16px 40px 16px 48px;
				font-size: 13px;
		}
		.qa-list dl dt::before {
				font-size: 14px;
				top: 0;
				left: 10px;
				width: 28px;
				height: 28px;
				margin: auto;
				padding-bottom: 5px;
				font-size: 1.4rem;
		}
		.qa-list dl dd {
				margin: 0;
				padding: 0 16px 16px 16px;
		}
		.qa-list dl dd p {
				margin: 0;
				font-size:92%;
		}
	}


/* ------------------------------------------------------------------------------
	 Blog
-------------------------------------------------------------------------------*/
.blog{
	background-color:#FFF;
}

.blog-item {
    margin-right: 0.25em;
    margin-left: 0.25em;
}
.blog-item {
    width: 100%;
    max-width: 341px;
    margin-right: auto;
    margin-left: auto;
    vertical-align: top;
    margin-bottom: 3em;
    box-shadow: 0px 0px 12px 0px rgba(34, 34, 34, 0.3);
    border-radius: 0 0 8px 8px;
    padding-bottom: 2em;
		background-color:#FFF;
}
.blog-item .badge-container{
	margin-bottom:1em;
	text-align:left;
	padding:0 1.5em;
}
.blog-item .badge-container span{ display:inline; }

.blog-item a {
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.blog-item a:hover{
	opacity: .7;
	filter: alpha(opacity=70);
	/* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";
	/* ie 8 */
	-moz-opacity: .7;
	/* FF lt 1.5, Netscape */
	-khtml-opacity: .7;
	/* Safari 1.x */
}
.blog-item img {
	margin-bottom: 1.125em;
	border-radius: 8px 8px 0 0;
	max-width:341px;
}

.blog .blog-item .h4-heading {
	text-align:left;
	color:#5e6576;
	padding:0;
	margin:0.25em 1.6em 0.5em;
	line-height: 1.5em;
	font-size:100%;
}
.fc-day{
	font-weight:700;
	text-align:left;
	display:block;
	padding:0 1.25em;
}
.blog-item .p-column_link{
	margin:0.25em 2em 1em;
}
.blog-item a{ color:#5e6576; }

.btn-solid-blog_link {
	margin: auto;
	text-align:center;
}
.btn-solid-blog_link a{
	display: inline-block;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	padding: 1em 2em 1em 2em;
	background-color: #129dd8;
	color: #ffffff !important;
	border-radius: 32px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border: 1px solid #129dd8;
	cursor:pointer;
}
.img-fluid {
	max-width: 100%;
	height: auto;
}
.bg-lightgray{
	background-color:#F5F5F5;
}


/* ------------------------------------------------------------------------------
	 Page - Contactform
-------------------------------------------------------------------------------*/
.header__page {
	background: url(../img/bg_contact_sp.jpg) center no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
	overflow: hidden;
	background-attachment: fixed;
	min-height:400px;
	margin:0;
	position: relative;	
}
.backg-overlay2{
	background: rgba(20,20,0,.6);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	min-height: 400px;
}

.header__page__text{
	 padding-top:50%;
}

.header__page__text h1 {
	color: #fff;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	line-height:1.2em;
}


@media screen and (min-width: 768px) {
	.header__page {
		 background: url(../img/bg_download.jpg) center no-repeat;
		 width: 100%;
		 height: 100%;
		 max-height:300px;		
	}
	.header__page__text{
		 padding-top:25%;
	}
}
@media screen and (min-width: 991px) {
	.backg-overlay2{
		background: rgba(20,20,0,.6);
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		max-height: 300px;
	}	
	.header__page__text{
		 padding-top:20%;
	}
}
@media screen and (min-width: 1280px) {
	.header__page__text{
		 padding-top:12%;
	}
	.header__page__text h1 {
		font-size: 32px;
		line-height:1.4em;
	}
}
@media screen and (min-width: 1440px) {
	.header__page__text h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
		padding-top:50px;
	}
}

@media screen and (max-width: 480px) {
	#contact h3{
		font-size: 24px;
	}
}


.d-none {
  display: none !important;
}
@media (min-width: 1024px) {
  .d-md-none {
    display: none !important;
	}
  .d-md-block {
    display: block !important;
  }
}
	
	


/* ------------------------------------------------------------------------------
	 Download
-------------------------------------------------------------------------------*/
.bg-image2 {
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
.marketing-action {
    background: url(../img/bg_download_sp.jpg) center no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-attachment:fixed;
    position: relative;
}
	@media (min-width: 991px) {
		.marketing-action {
				background: url(../img/bg_download.jpg) center no-repeat;
				width: 100%;
				height: 100%;
				background-size: cover;
				overflow: hidden;
				background-attachment:fixed;
				position: relative;
		}
	}
	
.marketing-action .overlay {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 360px;
}
.marketing-action .overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .7;
	background: #bf6700;
	background: -moz-linear-gradient(left, #bf6700 0%, #ffaa6c 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, #bf6700), color-stop(100%, #ffaa6c));
	background: -webkit-linear-gradient(left, #bf6700 0%, #ffaa6c 100%);
	background: -o-linear-gradient(left, #bf6700 0%, #ffaa6c 100%);
	background	: -ms-linear-gradient(left, #bf6700 0%, #ffaa6c 100%);
	background: -webkit-gradient(linear, left top, right top, from(#bf6700), to(#ffaa6c));
	background-image: linear-gradient(to right, #bf6700 0%, #ffaa6c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf6700', endColorstr='#ffaa6c', GradientType=1 );
}

.marketing-action .text {
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}


.btn_download{ text-align:center; margin-top:2em; margin-bottom:2em; }

.btn_download a{
	-webkit-filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25));
	max-width: 300px;
	height: 80px;
	border-radius: 6px;
	background-color:#FFF;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer;
	position: relative;
	margin:auto;
}
.btn_download a:focus, .btn_download a:hover{
	outline:none;
}
.btn_download a span {
	font-weight: 700;
	font-size: 22px;
	color: #26a3f7;
}




/* ------------------------------------------------------------------------------
	 Footer
-------------------------------------------------------------------------------*/
.bg-gray{ background-color:#f6f8fa; }

.footer {
	background-color: #181818;
	color: #eff0f2;
	padding:3em 0.5em 0.5em;
}

.footer a{ color: rgba(255, 255, 255, 0.50); }

.ft_nav {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}
.ft_nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ft_nav a {
	display: block;
	padding: 0 20px 0 16px;
	color:#FFF;
	position:relative;
}
.ft_nav a:after{
	position:absolute;
	top:50%;
	left:0;
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	font-weight : 700;
	display: inline-block;
	color: #d3d3d3;
	font-size: 10px;
	margin-top:-12px;
}
	@media (max-width: 480px) {
		.ft_nav a {
			font-size:11px;
		}
	}
	
.ft_nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer .footer-company{
	margin:1em auto 1em;
}

.footer .ft_cpname, .footer .ft_logo{
	text-align:left;
	margin:1em auto 1em;
}
.ft_logo img{ margin-left:0; margin-top: .5em; }

	@media (max-width: 480px) {
		.footer .ft_cpname{
			text-align:left;
			margin:2em 0 .5em;
		}
	}
	
.footer .ft_cpname p{ font-size:0.75em; }

	
	@media (max-width: 480px) {
		.footer .ft_logo{
			margin:4em auto .5em;
		}
	}
	
.footer .ft_logo img{
	max-width:100%;
	width:184px;
	height:auto;
	text-align: center;
}
.copyright {
    padding-top: 1.5em;
    text-align: center;
}
.copyright p{ color:rgba(255, 255, 255, 0.50); }
.footer a{ color: rgba(255, 255, 255, 0.50); }



/* navbar collapse for iPad (bootstrap) */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
				display:block!important;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
				display:block!important;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

/* ------------------------------------------------------------------------------
	 button page-top
-------------------------------------------------------------------------------*/
.pagetop {
	clear:both;
	height: 50px;
	width: 50px;
	position: fixed;
	right: 8px;
	bottom: 30px;
	background: #fff;
	border: solid 2px #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	cursor: pointer;
}
.pagetop__arrow {
	height: 10px;
	width: 10px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: translateY(20%) rotate(-45deg);
	display: block;
}
	@media screen and (min-width: 992px) {
		.pagetop {
			right: 10px;
			bottom: 80px;
		}
	}