/* ヘッダーメイン */

@media screen and (min-width: 641px){

#thmain {
	width: 100%;
	margin: 0px 0px 0px 0px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	}

#thmain:before {
	content: '';
	width: 100%;
	height: 100%;
	background: url(img/bgfil.png) center top;
	position: absolute;
	left: 0px;
	top: 0px;
	}

/*
#thmain p {
    width: 100%;
    margin: 0px;
	}

#thmain p:before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	position: absolute;
	left: 0px;
	top: 0px;
	}
*/

#thmain video {
    width: 100%;
	float: left;
	}

#thmain .cop {
	width: 100%;
    font-size: 18px;
	line-height: 250%;
    color: #ffffff;
	letter-spacing: 0.1em;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}

#thmain h2 {
	font-family: "Hannari";
    font-size: 48px;
	font-weight: normal;
	line-height: 150%;
	letter-spacing: 0.1em;
	margin: 0px 0px 40px 0px;
	}

#thmain h2 br:nth-child(1),
#thmain h2 br:nth-child(3) {
	display: none;
	}

#thmain p {
	margin: 0px;
	}

#thmain .cop a {
	width: 280px;
	background: #ffffff;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	font-weight: bold;
	line-height: 50px;
	margin: 50px auto 0px auto;
	display: block;
	}

}

@media screen and (max-width: 640px){

#thmain {
	width: 100%;
	margin: 0px 0px 0px 0px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	}

#thmain:before {
	content: '';
	width: 100%;
	height: 100%;
	background: url(img/bgfil.png) center top;
	position: absolute;
	left: 0px;
	top: 0px;
	}

#thmain video {
    width: 250%;
	margin: 0px 0px 0px -75%;
	float: left;
	}

#thmain .cop {
	width: 100%;
    font-size: 18px;
	line-height: 250%;
    color: #ffffff;
	letter-spacing: 0.1em;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}

#thmain h2 {
	font-family: "Hannari";
    font-size: 24px;
	font-weight: normal;
	line-height: 150%;
	letter-spacing: 0.1em;
	margin: 0px 0px 20px 0px;
	}

#thmain p {
	width: 90%;
	font-size: 12px;
	line-height: 200%;
	margin: 0px auto;
	text-align: left;
	}

#thmain p br:nth-child(1),
#thmain p br:nth-child(3),
#thmain p br:nth-child(5) {
	display: none;
	}

#thmain .cop a {
	width: 220px;
	background: #ffffff;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    font-size: 14px;
	font-weight: bold;
	line-height: 50px;
	margin: 20px auto 0px auto;
	display: block;
	}

}


/* トップページ */

@media screen and (min-width: 641px){

#top {
	line-height: 200%;
	background: url(img/bg.jpg) center top;
	overflow: hidden;
	}

/*
#top .blo ul {
	width : -webkit-calc(100% - 20px) ;
   	width : calc(100% - 20px) ;
	margin: 10px 0px 0px 10px;
  	display: grid;
  	gap: 10px;
  	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  	}

#top .blo a {
	text-align: center;
	display: block;
	position: relative;
	}

#top .blo {
	width: 99.5%;
	margin: 0.5% 0px 0.5% 0.5%;
	}

#top .blo a {
	width: 19.497%;
	margin: 0px 0.5025% 0.5025% 0px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	}

#top .blo a.vid {
	width: 49.498%;
	}

*/

#top .blo {
	width: 99.5%;
	margin: 0.5% 0px 0.5% 0.5%;
	}

#top .blo ul {
	margin: 100px 0px 0px 0px;
	overflow: hidden;
  	}

#top .blo h2 {
	font-family: "Hannari";
    font-size: 42px;
	font-weight: normal;
	line-height: 150%;
	letter-spacing: 0.1em;
	margin: 0px 0px 30px 0px;
	text-align: center;
  	}

#top .blo h2 span {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 16px;
	letter-spacing: 0.05em;
	margin: 0px 0px 0px 0px;
	display: block;
  	}

#top .blo a {
	width: 24.498%;
	margin: 0px 0.502% 0.502% 0px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	}

#top .blo .vid a {
	width: 24.498%;
	margin: 0px 0.502% 0.502% 0px;
	}

#top a img {
	width: 100%;
	height: auto;
	}

#top a p {
	width: 280px;
	height: 50px;
	background: #ffffff;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	font-weight: bold;
	line-height: 100%;
	margin: 0px;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	bottom: 10px;
	}

/*
#top a.gyo p {
	background: #CCEDE5;
	}

#top a.gyo02 p {
	background: #F4D9E9;
	}

#top a.kum p {
	background: #F9E6E8;
	}

#top a.kum02 p {
	background: #FEEBF1;
	}

#top a.kon p {
	background: #F9D6DA;
	}

#top a.fuk p {
	background: #E3DAEE;
	}

#top a.ssgyo p {
	background: #F4EFE9;
	}
*/

#top a span {
	font-size: 12px;
	font-weight: normal;
	margin: 6px 0px;
	display: block;
	}

#top a font {
	font-size: 10px;
	font-weight: ;
	position: absolute;
	right: 20px;
	top: 7px;
	}

#top a.gyo font {
	color: #00A37E;
	}

#top a.gyo02 font {
	color: #C94093;
	}

#top a.kum font {
	color: #DF828A;
	}

#top a.kum02 font {
	color: #F89AB8;
	}

#top a.kon font {
	color: #DF3346;
	}

#top a.fuk font {
	color: #7445AA;
	}

#top a.ssgyo font {
	color: #C9AC92;
	}

#top a .pla {
	width: 60px;
	height: 60px;
	border: 3px #ffffff solid;
    border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}

#top a .pla:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	left: 22px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	}

}

@media screen and (max-width: 640px){

#top {
	line-height: 200%;
	background: url(img/bg.jpg) center top;
	padding: 0px 0px 50px 0px;
	overflow: hidden;
	}

#top .blo ul {
	width : 90%;
	margin: 50px 5% -5% 5%;
  	}

#top .blo h2 {
	font-family: "Hannari";
    font-size: 28px;
	font-weight: normal;
	line-height: 150%;
	letter-spacing: 0.1em;
	margin: 0px 0px 20px 0px;
	text-align: center;
  	}

#top .blo h2 span {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 12px;
	letter-spacing: 0.05em;
	margin: 0px 0px 0px 0px;
	display: block;
  	}

#top .blo a {
	margin: 0px 0px 5.55% 0px;
	text-align: center;
	display: block;
	position: relative;
	}

#top .blo .vid {
	display: flex;
	flex-wrap: wrap;
	}

#top .blo .vid a {
	width: 47.225%;
	margin: 0px 5.55% 5.55% 0px;
	}

#top .blo .vid a:nth-child(2n+1) {
	margin: 0px 0px 5.55% 0px;
	}

#top a img {
	width: 100%;
	height: auto;
	}

#top a p {
	width: 94%;
	height: 50px;
	background: #ffffff;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	font-size: 14px;
	font-weight: bold;
	line-height: 100%;
	margin: 0px;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	bottom: 3%;
	}

/*
#top a.gyo p {
	background: #CCEDE5;
	}

#top a.gyo02 p {
	background: #F4D9E9;
	}

#top a.kum p {
	background: #F9E6E8;
	}

#top a.kum02 p {
	background: #FEEBF1;
	}

#top a.kon p {
	background: #F9D6DA;
	}

#top a.fuk p {
	background: #E3DAEE;
	}

#top a.ssgyo p {
	background: #F4EFE9;
	}
*/

#top a span {
	font-size: 12px;
	font-weight: normal;
	margin: 6px 0px;
	display: block;
	}

#top a font {
	font-size: 10px;
	font-weight: ;
	position: absolute;
	right: 20px;
	top: 7px;
	}

#top a.gyo font {
	color: #00A37E;
	}

#top a.gyo02 font {
	color: #C94093;
	}

#top a.kum font {
	color: #DF828A;
	}

#top a.kum02 font {
	color: #F89AB8;
	}

#top a.kon font {
	color: #DF3346;
	}

#top a.fuk font {
	color: #7445AA;
	}

#top a.ssgyo font {
	color: #C9AC92;
	}

#top a .pla {
	width: 60px;
	height: 60px;
	border: 3px #ffffff solid;
    border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}

#top a .pla:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	left: 22px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	}

}