/* 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;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
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;}

/* 共通
------------------------------------------------------------*/
body{font-weight: 300;overflow-x: hidden;color: #000;background: #fff;}
a{ color: #0066ff; text-decoration: none;}
a:hover, .active{ text-decoration: underline;}
a:active, a:focus,input:active, input:focus{outline:0;}

#header{position: relative;overflow:hidden;width:100%;height:720px;}
#header img{position:absolute;left:50%;width:1580px;height:720px;margin-left:-790px;}

.sec04{position: relative;overflow:hidden;width:100%;height:220px;}
.himg{position:absolute;left:50%;width:1580px;height:210px;margin-left:-790px;}

/* 共通
------------------------------------------------------------*/
img{ width: 100%; height: auto;}
section{clear:both;}
section h2{font-size: 22px;font-weight:normal;text-align: center;}
.inner{width: 94%;margin: 0 auto;padding-bottom: 50px;}
video{width: 50vh;height: auto;}

.line-reg {position:absolute;left:50%;width:430px;height:150px;margin-left:-250px;}

.modal-content {
	width: 60vh ;
	margin: 0 ;
	padding: 0px 0px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}

.card-group{
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  width: 100%;
  height: auto;
   /* ポイント１ */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
/* ポイント２ */
.card-group > :nth-child(2n){
  margin-left: 20px;
}
/* ポイント３ */
.card-group > :nth-child(n+3){
  margin-top: 20px;
}
.card{
  /* ポイント４ */
  width: calc((100% - 20px * 1) / 2);
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.2)
}
.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 7	px;
  background: #bbb;
  box-sizing: border-box;
}

/* SEC02
------------------------------------------------------------*/
.bg{	line-height: 0;}
.txt h2{	padding: 0 0 20px !important;}

/* SEC04
------------------------------------------------------------*/
#sec04{
	background: url(../images/bgSec04.jpg) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	color: #fff;
}
/* SEC05
------------------------------------------------------------*/
#sec03{	padding-top: 20px;}

------------------------------------------------------------*/
#modal-content{
	width:100%;
	height:120%;
	margin:1.5em auto 0;
	padding:10px 20px;
	border:2px solid #aaa;
	background:#fff;
	z-index:2;
	position:fixed;
	top:0;
	left:0;
}
.modal-p{margin-top:1em;}
.modal-p:first-child{margin-top:0;}
.button-link{color:#00f;text-decoration:underline;}
.button-link:hover{cursor:pointer;color:#f00;}
/* RESPONSIVE 設定
------------------------------------------------------------*/
@media only screen and (min-width: 1200px){
	/*　画面サイズが横1200px〜はここを読み込む　*/
	.inner{width: 1024px;padding-bottom: 120px;}
	section h2{	padding: 70px 0 20px;}
	.txt h2{	padding: 0 0 20px !important;}
	.sec01img{	width: 90%;	height: auto;}
	.sec02img{	width: 90%;	height: auto;	margin-left: auto;}
	.sec03img{	width: 90%;	height: auto;}
	.col3 li{	margin-bottom: 50px;}
	.col3 img{	display: block;}
	.linkimg{ width: 90%; height: auto;}
	video{	width: 78vh;	height: auto;}
}
@media only screen and (min-width: 800px){
	/*　画面サイズが横800px〜はここを読み込む　*/
	.sec01img{	width: 70%;	height: auto;}
	.sec02img{	width: 72%;	height: auto;}
	.sec03img{	width: 120%;	height: auto;}
	.linkimg{ width: 50%; height: auto;}
	/* SEC02
	-----------------*/
	.txt, .bg{width: 50%;float: left;display: table;background: #f6f6f6;}
	#sec02 .txt, #sec02 .bg{float: right;}
	.vMid{display: table-cell;padding: 0 100px;vertical-align: middle;text-align: right;}
	/* SEC03
	-----------------*/
	.col3{	text-align: center;}
	.col3 li{display: inline-block;width: 30%;padding: 0 1.5%;margin-bottom: 0;vertical-align: top;}
	/* SEC04
	-----------------*/
	.sec4{opacity: 0.55;background-color:#ffffff;color: red;padding: 20px;}
}

@media only screen and (max-width: 799px){
	.col3 li{margin: 0 auto;display: block;max-width: 500px;}
}
@media only screen and (max-width: 1199px){
	/*　画面サイズが1199pxまではここを読み込む　*/
	section h2{	padding: 50px 0 20px 0;}
	#sec01 h2{	padding: 70px 0 20px;}
	.vMid{	padding: 0 20px;}
}