@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
html { font-size: 62.5%;}
body{
	font-size: 1.6rem;
	line-height: 180%;
	text-align: center;
	font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	color: #333;
}
body.android::before,
body.iphone::before,
body.ipad::before{
	content: "";
	display: block;
	position: fixed;
	background-position: center bottom;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg_mb.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
}
body.other #wrap {
	background-image: url(../images/bg.jpg);
	background-position:center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover;
}
body.android #wrap,
body.iphone #wrap,
body.ipad #wrap{ background-image:none;}
a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

* {-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h1 { font-size: 2.2rem;}
h2 { font-size:2rem;}
h3 { font-size: 1.9rem;}
h4 { font-size: 1.8rem;}
h5 { font-size: 1.7rem;}
h6 { font-size: 1.6rem;}
.fs10 { font-size: 1.0rem;}
.fs11 { font-size: 1.1rem;}
.fs12 { font-size: 1.2rem;}
.fs13 { font-size: 1.3rem;}
.fs14 { font-size: 1.4rem;}
.fs15 { font-size: 1.5rem;}
.fs16 { font-size: 1.6rem;}
.fs17 { font-size: 1.7rem;}
.fs18 { font-size: 1.8rem;}
.fs19 { font-size: 1.9rem;}
.fs20 { font-size: 2rem;}
.fs50per { font-size:50%;}
.fs60per  { font-size:60%;}
.fs70per  { font-size:70%;}
.fs80per  { font-size:80%;}
.fs90per  { font-size:90%;}
.fs110per  { font-size:110%;}
.fs120per  { font-size:120%;}
.fs130per  { font-size:130%;}
.fs140per  { font-size:140%;}
.fs150per  { font-size:150%;}
@media print, screen and (min-width: 768px) {
h1 { font-size: 2.4rem;}
h2 { font-size: 2.2rem;}
h3 { font-size: 2rem;}
h4 { font-size: 1.8rem;}
h5 { font-size: 1.7rem;}
}
@media print, screen and (min-width: 980px) {

h1 { font-size: 2.6rem;}
h2 { font-size: 2.4rem;}
h3 { font-size: 2.2rem;}
h4 { font-size: 2rem;}
h5 { font-size: 1.8rem;}
}
/* 共通
------------------------------------------------------------*/
section:before, 
section:after,
column-out-box:before,
column-out-box:after,
.step-column-out-box:before,
.step-column-out-box:after { content: ""; display: table; }
section:after,
column-out-box:after ,
.step-column-out-box:after{ clear: both; }
section,
column-out-box,
.column-out-box { padding:60px 0;}
.inner{
	width: 92%;
	margin: 0 auto;
}
.mainColor { color: #CE3E26;}
.dip-b { display:block;}
.ta__l { text-align:left;}
h2.udline {
position: relative;
display: inline-block;
margin: 0 0 80px 0;
font-size:3rem;
}
h2.udline:before {
content: '';
position: absolute;
bottom: -1em;
display: inline-block;
width: 60px;
height: 1px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #6D3B44;
}
.under-scroll {
	letter-spacing: 0.1em;
	font-size: 1.4rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	text-align: center;
	position:absolute;
	bottom:70px;
	width:100%;
	color:#FFF;
}
.under-scroll span {
	position: absolute;
	top: 30px;
	left: 50%;
	width: 20px;
	height: 40px;
	margin-left: -10px;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
}
.under-scroll span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
.under-scroll span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyangles sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyangles sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@media print, screen and (min-width: 768px) {
h2.udline {
font-size:4rem;
}
}
@media print, screen and (min-width: 1200px) {
.inner{width:1134px;}
}
/* ヘッダー
------------------------------------------------------------*/
#header{
    overflow:hidden;
	display:table;
	width: 100vw;
	height: calc(100vh - 50px);
}
#header-inner{
	display:table-cell;
	vertical-align:middle;
	position:relative;
	margin-bottom:20px;
}
h1#name {
	position:absolute;
	top:20px;
	left:20px;
	color: #fff;
	text-shadow: 0px 0px 1px #333333,
	             0px 0px 2px #333333,
	             0px 0px 3px #333333,
	             0px 0px 4px #333333,
	             0px 0px 5px #333333,
	             0px 0px 10px #333333,
	             0px 0px 15px #333333;	
}
p.catch{
	font-size:2.4rem;
	font-weight:700;
	color: #fff;
	line-height:160% !important;
	margin:0 !important;
	text-shadow: 0px 0px 1px #333333,
	             0px 0px 2px #333333,
	             0px 0px 3px #333333,
	             0px 0px 4px #333333,
	             0px 0px 5px #333333,
	             0px 0px 10px #333333,
	             0px 0px 15px #333333;		 
}
@media print, screen and (min-width: 768px) {
p.catch{
	font-size: 6rem;
}
.header-catch {
	font-size:1.8rem;
}
#header{
	height: 100vh;
}
}
@media print, screen and (min-width: 1200px) {
#header-inner{
	width: 1134px;
}
}
/* sect01
------------------------------------------------------------*/
#sect01 { background-color:#FFF;}
.col-r { margin:10px 0;}
.display_table_lr {
	padding: 0 4%;
}
.display_table_lr img{ height:auto; width:100%;}
.display_table_cell_l {	position: relative;}
.caption {
	position: absolute;
	right: 4px;
	bottom: 4px;
	color: #FFF;
	font-size:1.2rem;
}
@media print, screen and (min-width: 768px) {
.col-r { margin:0;padding:0 15%;}
}


/* sect02
------------------------------------------------------------*/
#sect02{
	background-color:#f6f6f6;
}
.column3,
.column4{
	max-width:480px;
	text-align: left;
	margin:20px auto;
	background-color:#333;
	color:#FFF;
}
.column3 a,
.column4 a  { display:block; color:#FFF !important;}
.column3 a:hover ,
.column4 a:hover{ text-decoration:none;}
.column3:last-child,
.column4:last-child{ margin-bottom:0;}
.column3 h3,
.column4 h3 {
	font-size:2rem;
	font-weight:500;
	padding: 10px;
}
.add {
	padding: 0 10px 10px 10px;
}
.addTxt{
	display: block;
}
.linkTxt{
	color: #F60;
	text-align: right;
	display: block;
}
h3.angle{
position: relative;
display: inline-block;
margin:40px 0;
padding: 0 45px;
}
h3.angle:before, h3.angle:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: black;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
h3.angle:before {left:0;}
h3.angle:after {right: 0;}
.button {
  position: relative;
  display: inline-block;
  padding: .9em 20%;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
}
.button::after {
  position: absolute;
  top: 50%;
  right: .2em;
  content: '';
  margin-top: -5px;
  border: 7px solid transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #fff;
  transition: all .3s;
}
.button:hover {
  background-color: #fff;
  color: #333;
  text-decoration:none;
}
.button:hover::after {
  border-left-color: #333;
}
@media print, screen and (min-width: 768px) {

.column3 {
	float: left;
	width: 31.333333%;
	margin:0 0 0 3%;
}
.column4 {
	float: left;
	width: 23.125%;
	margin:0 0 0 2.5%;
}
.column3:nth-child(1),
.column4:nth-child(1){
	margin:0;
}
.column3:last-child,
.column4:last-child{ margin-bottom:20px;}
.button {
  padding: .9em 5em;
}
}
/* sect03
------------------------------------------------------------*/
#sect03{ background-color:#FFF;}
.column2 {
	max-width:480px;
	text-align: left;
	margin:0 auto;
}
.column2:first-child { margin-bottom:80px;}
.details { clear:both; text-align:left;}
.details dt{
	position:relative;
	font-weight: 500;
	padding:0.5em 0 0 1.5em;
}
.details dt::before {
	position:absolute;
	content: "\2500";
	left:0;
	display: inline;
}
.details dd{
	padding:0 0 0.5em 1.5em;
}

.details dd {
	border-bottom:dotted 1px #CCCCCC;
}
@media print, screen and (min-width : 480px){
.details dt {
	float:left;
	width:10em;
	padding:1em 0 1em 1.5em;
	clear:both;
	
}
.details dd {
	padding:1em 0 1em 11em;
}

}
@media print, screen and (min-width: 768px) {

.column2 {
	float: left;
	max-width:46%;
	width: 46%;
	margin:0 0 0 8%;
}
.column2:nth-child(1){
	margin:0;
}
.column2::first-child { margin-bottom:0;}

}
/* sect04
------------------------------------------------------------*/
#sect04{ background-color:#FFF;}

/* 	ページトップ
---------------------------------------------------- */
#pgTop {
	font-size:1.0rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
}
#pgTop a {
	width: 100%;
	color: #FFF;
	position: relative;
	padding-top: 34px;
	display: block;
	background-color: #6D3B44;
}
#pgTop a span {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-left: 8px solid #fff;
  border-top: 8px solid #fff;
  -webkit-transform: rotate(45deg)  ;
  transform: rotate(45deg);
  box-sizing: border-box;
}
#pgTop a:hover {
	text-decoration: none;
	background-color: #9E868B;
}


/* footer
------------------------------------------------------------*/
#footer {
	background-color: rgba(0,0,0,1);
	color: #fff;
}
#copyright { font-size:1.2rem; padding:0 0 10px 0;}