/*---------------------------------------*/
/* BASE */
/*---------------------------------------*/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, blockquote, th, td {
	margin: 0;
	padding: 0;
	direction: ltr;
}

body {
	color:#111;
	font-size:14px;
	box-sizing: border-box;
	-webkit-font-feature-settings: 'pkna'; /* テキストの文字詰め（カーニング）letter-spacingで調整 */
	font-feature-settings: 'pkna';
	text-size-adjust: 100%;  /* スマホ横向き時のフォントサイズ */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
body *{
  box-sizing: inherit; /* box-sizingの値は継承されないので明示的に設定 */
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

p {

}

a {
	color:#111;
	text-decoration: none;
}

/*矢印が右に移動する*/
a.btnarrow4{
    margin-top:1em;
    margin-right:1em;
    float:right;
    text-decoration: none;

}
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}


span {
	display: inline-block;

}

ul {
	list-style: none;
}

a:hover {
	text-decoration: underline;
}

a:hover img {
	opacity: 0.8;
	transition: all .5s;
}

a.link_button {
	width:75%;
	border:1px #ccc solid;
	margin:0 auto;
	padding:1em 0;
	background:#fff;
	text-align:center;
	text-decoration: none;
	display:block;
}
a.link_button:hover {
	border:1px #FBC93E solid;
	background:#FBC93E;
}

.update {
	color:#fff;
	padding:0.25em 0.75em;
	font-size:12px;
	text-align:right;
	background:#7B191E;
	border-right:1px solid #7B191E;
	border-bottom:1px solid #7B191E;
	border-left:1px solid #7B191E;
	text-decoration: none;
	opacity:0.75;
}
.update:hover {
	text-decoration: none;
}

#wrapper {
	width:100%;
	margin:0 0;
	padding:0 0;
	position: relative;
	background:#f3f3f3;
}
.container {
	width:100%;
	margin:0 0;
	padding:0 0;
	position: relative;
	background:#fff;
	box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .2);
}

div.faux40_fes {
	width:40%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux40_fesmax {
	width:40%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux50 {
	width:50%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux60 {
	width:60%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux70 {
	width:70%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux80 {
	width:80%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux90 {
	width:90%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux95 {
	width:95%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}

div.faux100 {
	width:100%;
	margin:0 auto;
	padding:0em 0px;
	overflow:hidden;
}


/*---------------------------------------*/
/* markerUnder */
/*---------------------------------------*/

.markerUnder {
	font-weight:bold;
	background:linear-gradient(transparent 35%, #F7F399 0%);
	display:inline;
	padding:0 1px 0px;
}

.markerUnder_link {
	font-weight:normal;
	background:linear-gradient(transparent 35%, #F7F399 0%);
	display:inline;
	padding:0 1px 0px;
}

/*---------------------------------------*/
/* font 見出し */
/*---------------------------------------*/

h1 {
	padding: 7px 0.1em;
}

h2 {
	padding: 7px 0.1em;
}

h2 span {
	padding: 7px 0.1em;
}

h3 {
	font-size:1.5em;
	padding: 7px 0em;
	line-height:1.5em;
	letter-spacing: 0.05em;
}

h4 {
	padding: 7px 0.1em;
}

h5 {
	padding: 7px 0.1em;
}

h6 {
	padding: 7px 0.1em;
}

.topics_title {
	font-size:2.5em;
	font-family:serif;
	margin:1em 0;
	padding: 7px 0em;
	line-height:1.5em;
	letter-spacing: 0.05em;
	text-align:center;
}

div.topics_backimg {
	width:100%;
	margin:0 auto;
	padding:14em 0px;
	overflow:hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}



/*---------------------------------------*/
/* font size */
/*---------------------------------------*/


.fontbold {
	font-weight:bold;
}

.fontsize-xs {
	font-size:8px;
}
.fontsize-s {
	font-size:12px;
}
.fontsize-m {
	font-size:16px;
}
.fontsize-l {
	font-size:18px;
}
.fontsize-xl {
	font-size:22px;
}
.fontsize-xxl {
	font-size:26px;
}


/* Text align */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/*---------------------------------------*/
/* margin */
/*---------------------------------------*/

.mt1 {
    margin-top: 1em;
}
.mt2 {
    margin-top: 2em;
}
.mt3 {
    margin-top: 3em;
}
.mt4 {
    margin-top: 4em;
}
.mt5 {
    margin-top: 5em;
}
.mt6 {
    margin-top: 6em;
}
.mt7 {
    margin-top: 7em;
}
.mt8 {
    margin-top: 8em;
}
.mt9 {
    margin-top: 9em;
}
.mt10 {
    margin-top: 10em;
}

.mb1 {
    margin-bottom: 1em;
}
.mb2 {
    margin-bottom: 2em;
}
.mb3 {
    margin-bottom: 3em;
}
.mb4 {
    margin-bottom: 4em;
}
.mb5 {
    margin-bottom: 5em;
}
.mb6 {
    margin-bottom: 6em;
}
.mb7 {
    margin-bottom: 7em;
}
.mb8 {
    margin-bottom: 8em;
}
.mb9 {
    margin-bottom: 9em;
}
.mb10 {
    margin-bottom: 10em;
}


/* Targets all elements */

.row-eq-height {
	display: flex;
	flex-wrap: wrap;
}

[class*='col-'] {
    float: left;
    padding: 20px;
}
[class*='fb-'] {
    float: left;
    padding:10px 0;
}

#clients .col-2-3 [class*='col-'] {
    padding: 0;
}

/* Clearfix */


.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/*---------------------------------------*/
/* main width */
/*---------------------------------------*/

.col-5 {
	width: 5%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-10 {
	width: 10%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-15 {
	width: 15%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-20 {
	width: 20%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-25_footer {
	width: 25%;
	padding:0em 0em;
   	height: 100%;
}

.col-25 {
	width: 25%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-30 {
	width: 30%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-30-1 {
	width: 30%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-33-1 {
	width: 33.33%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-33-2 {
	width: 33.33%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-35 {
	width: 35%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-40_gnav {
	width: 40%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-40 {
	width: 40%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-45 {
	width: 45%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-50 {
	width: 50%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-55 {
	width: 55%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-60_gnav {
	width: 60%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-60 {
	width: 60%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-65 {
	width: 65%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-65-1 {
	width: 65%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-70 {
	width: 70%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-75 {
	width: 75%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-80 {
	width: 80%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-85 {
	width: 85%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-90 {
	width: 90%;
	padding:0.5em 1em;
   	height: 100%;
}

.col-95 {
	width: 95%;
	padding:0.5em 1em;
   	height: 100%;
}






/*------------------------------------------------------------------------------------------*/
/* Responsive Elements */
/*------------------------------------------------------------------------------------------*/

/* =Media Queries for Nav
===============================*/
@media all and (max-width: 1024px) {

.sp_none {
	display:none!important;
}

}



/* Landscape mobile & down
===============================*/
@media screen and (max-width: 640px) {

body {
	font-size:15px;
}

	#wrapper {
		margin:0;
		padding:0;
	}

	.page-border, #scrollUp, #scrollUp:before {
		display:none;
	}

	.row {
		padding: 15px !important;
	}

	.col-5, .col-10, .col-15, .col-20, .col-25, .col-30, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-65, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95, .row {
		width: 50%;
		padding:0.5em 0.25em;
	}

	.col-25_footer {
		width: 100%;
		padding:0.5em 0.25em;
	}

	.col-30-1, .col-65-1 {
		width: 100%;
		padding:0.5em 0.25em;
	}

	.col-33-1 {
		width: 100%;
		padding:0.5em 0.25em;
	}

	.col-33-2 {
		width: 50%;
		padding:0.5em 0.25em;
	}

	div.model_home div.col-50 {
		width: 100%;
		padding:0.5em 0.25em;
	}
	div.model_home div.col-25 {
		width: 50%;
		padding:0.5em 0.25em;
	}

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-2-3, .col-3-4, .col-9-10, .col-61, .col-38 {
		padding-right: 0;
		padding-left: 0;
	}

	div.faux40_fes {
		width:90%;
		margin:0 auto;
		padding:0em 0px;
		overflow:hidden;
	}

	div.faux40_fesmax {
		width:100%;
		margin:0 auto;
		padding:0em 0px;
		overflow:hidden;
	}

	div.faux50 {
		width:100%;
	}

	div.faux60 {
		width:95%;
	}

	div.faux70 {
		width:95%;
	}

	div.faux80 {
		width:95%;
	}

	div.faux90 {
		width:95%;
	}

	div.faux95 {
		width:95%;
	}

	div.faux100 {
		width:100%;
	}

}
/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 767px) {

	.topics_title {
		font-size:1.5em;
	}

	div.faux40_fes {
		width:90%;
		margin:0 auto;
		padding:0em 0px;
		overflow:hidden;
	}

	div.faux40_fesmax {
		width:100%;
		margin:0 auto;
		padding:0em 0px;
		overflow:hidden;
	}

	div.faux50 {
		width:90%;
	}

	div.faux60 {
		width:90%;
	}

/* --------- g_nav ---------- */

	.col-40_gnav {
		width: 100%;
		padding:0.5em 1em;
	   	height: 100%;
	}
	.col-60_gnav {
		width: 100%;
		padding:0.5em 1em;
	   	height: 100%;
	}
	.footer_menu .col-50 {
		width: 100%;
	}

	.col-30-1 {
		width: 100%;
		padding:0.5em 0.25em;
	}
	.col-65-1 {
		width: 100%;
		padding:0.5em 0.25em;
	}
	.col-33-1 {
		width: 100%;
		padding:0.5em 0.25em;
	}
	.col-33-2 {
		width: 50%;
		padding:0.5em 0.25em;
	}

	div.model_home div.col-50 {
		width: 100%;
		padding:0.5em 0.25em;
	}
	div.model_home div.col-25 {
		width: 50%;
		padding:0.5em 0.25em;
	}

}

/* Mobile
===============================*/
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */

	.topics_title {
		font-size:1.5em;
	}


/* --------- top_main ---------- */

	.top_main h2 {
		font-size: 3em;
		margin-top: 3.5em;
		margin-right: 10px;
		font-weight: bold;
		padding: 0;
		line-height: 1.2em;
		opacity:0.85;
		color:#fff;
		text-shadow: 0em 0em 0.1em rgba(0,0,0,1);
	}

	.top_main p {
		font-size: 1em;
		margin-top: 2em;
		margin-bottom: 0em;
		line-height: 1.4em;
		color:#fff;
		text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1);
	}


/* --------- g_nav ---------- */

	#g-nav .col-40_gnav .f_list {
		display:none;
	}


	.col-40_gnav {
		width: 100%;
		padding:0.5em 1em;
	   	height: 100%;
	}
	.col-60_gnav {
		width: 100%;
		padding:0.5em 1em;
	   	height: 100%;
	}
	.footer_menu .col-50 {
		width: 100%;
	}

	div.popularity_home a.col-50 {
		width: 80%;
		padding:0.5em 0.25em;
		margin:0 10%;
	}

	.sh_none {
		display:none;
	}

	.col-25_footer {
		width: 100%;
		padding:0em 0em;
	}

}


/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 768px) and (max-width: 1024px) {

	div.faux40_fes {
		width:90%;
		margin:0 auto;
		padding:0em 0px;
		overflow:hidden;
	}

	div.faux40_fesmax {
		width:100%;
		margin:0 auto;
		padding:0em 0px;
		overflow:hidden;
	}

	div.faux50 {
		width:90%;
	}

	div.faux60 {
		width:90%;
	}

	.price_home .col-25 {
		width: 33.33%;
		padding:0.5em 0.25em;
	}

	.col-33-1 {
		width: 50%;
		padding:0.5em 0.25em;
	}

	.col-33-2 {
		width: 50%;
		padding:0.5em 0.25em;
	}

	.col-25_footer {
		width: 33.33%;
		padding:0em 0em;
	}

}