@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*----------------------------------------------------------------------------------------------
【記載ルール】
・ブレークポイント、キーフレームでインデント
・不要な半角スペースやタブは削除
・短縮できるものは短縮（例）0.7 → .7、#FFFFFF → ＃FFF
・継承を考え、無駄なプロパティを削除（特にSP）
----------------------------------------------------------------------------------------------*/
/* RESET CSS */
article, aside, details, figcaption, figure, footer, header, hgroup, img, menu, nav, section {display: block}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline}
body {
	line-height: 1;
	height: auto!important;/*footerした固定*/
	min-height: 100%;/*footerした固定*/
}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:after, blockquote:before, q:after, q:before {content: '';content: none}
table {border-collapse: collapse;border-spacing: 0}
img {margin: 0 auto;padding: 0;max-width: 100%;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
/*----------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------*/
html {
	font-size: 62.5%;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height: 100%;
}
body {
	margin: 0;
	color: #3f3f3f;
	font-size: 2.2rem;
	line-height: 1.6;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: "palt" 1;
	background: #f3f0f0;
	min-height: 100%;
	position: relative;
	background-attachment: fixed;
	background-image: radial-gradient(at 50% 40%, hsl(184deg 100% 98%) 0, transparent 50%), radial-gradient(at 80% 0%, hsla(0, 0%, 100%, 1) 0, transparent 50%), radial-gradient(at 0% 50%, hsla(0, 0%, 100%, 1) 0, transparent 50%), radial-gradient(at 90% 60%, hsl(194deg 57% 93%) 0, transparent 50%), radial-gradient(at 10% 100%, hsl(182deg 100% 96%) 0, transparent 50%), radial-gradient(at 80% 100%, hsla(0, 0%, 100%, 1) 0, transparent 50%), radial-gradient(at 20% 29%, hsl(179deg 100% 97%) 0, transparent 50%);
}
#main {
	width: 960px;
	padding-bottom: 120px;
	margin: 0 auto;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	background: #FFF;
}
/* prihead -----------------------*/
#prihead {
	z-index: 20;
	position: fixed;
	width: 958px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background: #464646;
}
#prihead #CDT {
/*	width: 960px;*/
	padding: 1rem 0;
	margin: 0 auto;
	color: #fff;
	line-height: 1.2;
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif, monospace;
}
#prihead #CDT .count_num {
	display: inline-block;
	padding: 0 .4rem;
	margin: 0 .4rem;
	border-radius: 3px;
	font-size: 150%;
}
@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop, #prihead #CDT .count_num {
		padding: 1rem .4rem 0;
		line-height: 1;
	}
}
/* header  -------------------------------------------- */
header h1 {
		color: #fff;
		text-align: center;
		font-family: "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
		font-size: 4.5rem;
		font-weight: bold;
		line-height: 1.5;
		padding: 3rem 0;
		margin: 0 auto;
		background-size: 8rem, 8rem;
}
#header_img.header {background: #ff7f3b;}
/* section  -------------------------------------------- */
section p {margin-bottom: 2rem;}
.sec_inner {padding: 3rem 5rem;}
/* h2  -------------------------------------------- */
h2 {
	padding: 4rem 0 1rem;
	margin: 0;
	text-align: center;
	font-family: "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
	font-size: 3.5rem;
	letter-spacing: -1px;
	line-height: 1.2;
	color: #333;
	font-weight: bold;
}
h2 img{width: 80%;}
/* 中身  ------------------------------------------------- */
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom:1;}
.pc {display: block!important;}
.sp {display: none!important;}
/* font */
.b {font-weight: bold;}
.u {text-decoration: underline;}
.bu {font-weight: bold;text-decoration: underline;}
.rub {font-weight: bold;border-bottom: 2px solid #EB0003;}
.r {color: #e40708;}
.ru {color: #d00;text-decoration: underline;font-weight: bold;}
.mark_y{background: linear-gradient(transparent 60%, #ff6 60%);}
.mark_w{background: #fff;color: #ff7f3b;padding: 0 1rem;}
.small {font-size: 80%;}
.large {font-size: 110%;}
.txt_c{text-align: center;}
.arrow {display: block;width: 0;height: 0;border: 120px solid transparent;border-top: 60px solid #AD2D2C;border-bottom: 0;margin: 20px auto;}
.bottom{margin-bottom: 3rem;}
.box{border: 1px solid #ccc;border-radius: 5px;padding: 20px;margin: 20px auto;}
.txt_box{background: #fff8f8;padding: 2rem;text-align: center;font-weight: bold;font-size: 3rem;line-height: 1.3;width: 80%;margin: 5rem auto -2rem;}
/*list-----------------*/
ul.list1 {
	margin: 0 auto 4rem;
	padding: 1rem 0;
	background: #fff;
	border: 2px solid #b8a38c;
	border-radius: 3px;
}
ul.list1 li:nth-child(2n) { background-color: #eee;}
ul.list1 li {position: relative;padding: 1rem 1rem 1rem 6rem;font-weight: bold;}
.list1 li:before,.list1 li:after{content: "";position: absolute;}
.list1 li:before{
	top: 1rem;
	left: 3rem;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 1rem;
	height: 2rem;
	border-right: 3px solid #8b6b4e;
	border-bottom: 3px solid #8b6b4e;
}
.list1 li:after{top: 1.5rem;left: 2rem;width: 2rem;height: 2rem;border:2px solid #131f4f52;border-radius: 2px;}
/* youtube  -------------------------------------------- */
.youtube {width: 860px;text-align: center;margin: 0 auto;}
.youtube iframe {top: 0;right: 0;width: 860px;height: 483px;}
/* mv_btn-----------------*/
.mv_btn{background: #999;border-radius:30px;width: 60%;color: #fff;transition: all .3s;padding: 1rem;margin: 0 auto;}
.mv_btn a{text-decoration: none;text-align: center;color: #fff;font-weight: bold;}
.mv_btn a p{margin: 0;}
.mv_btn:hover{opacity: 0.8;letter-spacing: 1px;}
/* btn-----------------*/
.btn {
	width: 700px;
    margin: 7rem auto 2rem;
    color: #fff;
    padding: 2.5rem 0;
    text-align: center;
    font-size: 4.3rem;
    font-weight: bold;
    line-height: 1.2;
    background: #0088c9;
    border-radius: 5px;
    font-family: "Gothic MB101 Bold";
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    position: relative;
    box-shadow: 5px 5px 0px #d1e6ea;
}
.btn:hover{opacity: 0.8;letter-spacing: 1px;transform:scale(1.01);}
/*.btn p{line-height: 1.4; padding: 2rem 0;color: #fff;font-size: 3.5rem; font-weight: bold;text-align: center;text-decoration: none;}*/
.btn a{line-height: 1.4; color: #fff;font-size: 3.5rem; font-weight: bold;text-align: center;text-decoration: none;display: inline-block;font-family: "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";}
.btn_copy{margin: .5rem auto 5rem;font-size: 1.8rem; text-align: center;}
.btn::after {
    position: absolute;
    content: '';
    background: url(../img/cta.png)no-repeat;
    width: 100px;
    height: 100px;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%)scale(.28);
    display: inline-block;
}
/* ボタン------------------------------------------------*/
/*.view_timer{display: none;}*/
.btn2 {
	text-decoration: none;
	display: block;
	width: 80%;
	text-align: center;
	font-weight: bold;
	font-size: 3rem;
	color: #fff!important;
	line-height: 1.2;
	margin: 30px auto;
	padding: 20px 0;
	background: #0277BD;
	border-radius: 3px;
	transition: 0.2s;
	-webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
	box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
	-webkit-appearance: none;
}
/*----------------------------------------------------------------------------------------------
footer
----------------------------------------------------------------------------------------------*/
footer {background: #ededed; position: absolute; bottom: 0; width: 100%;}
.footer_logo img {max-width: 300px;}
.footer_txt {padding: 0 0 0 2rem;font-size: 1.1rem;text-align: left;line-height: 1.9;}
#footer__wrap {display: flex;width: 800px;padding: 2rem 0;margin: 0 auto;font-size: 80%;justify-content: center;}
#footer__wrap li {display: inline-block;padding: 0 1rem 0;border-left: 1px solid #aaa;}
#footer__wrap li:first-child {border: none;padding: 0 1em 0 0;}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
【 SP 】
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width:768px) {
	/*--------basic---------------------------------------------*/
	section,#header_img{
		pointer-events:none;
		-webkit-touch-callout:none;
		-webkit-user-select:none;
		-moz-touch-callout:none;
		-moz-user-select:none;
		touch-callout:none;
		user-select:none;
		}
	section,#header_img,.bottom_btn img{
		pointer-events: auto;
		-webkit-touch-callout: auto;
		-webkit-user-select: auto;
		-moz-touch-callout: auto;
		-moz-user-select: auto;
		touch-callout: auto;
		user-select: auto;
	}
	html {font-weight: normal;}
	body {background: none;font-size: 4.5vw;font-weight: normal;}
	#main {padding-bottom: 155px;width: 100%;border: none;}
	img {max-width: 100%;}
	/* prihead  -------------------------------------------- */
	#prihead {font-size: 4.2vw;z-index: 20;padding: 2vw 0;width: 100%;}
	#prihead #CDT {	width: 100%;padding: .4rem 0;font-size: 2.8vw;}
	#prihead #CDT .count_num {
		padding: 0 1vw;
		margin: 0 1vw;
		border-radius: 3px;
		font-size: 140%;
	}
	/* header  -------------------------------------------- */
	header h1 {font-size: 6vw;margin-bottom: 1rem;width: 100%;background: url(../img/mv_icon.jpg)no-repeat 3vw 15vw, url(../img/mv_icon2.jpg)no-repeat 83vw 15vw;background-size: 15vw, 15vw;padding: 5vw 0;}
	header h1 img { width: 100%; height: auto; }
	/* h2  -------------------------------------------- */
	h2 {padding: 2vw;margin: 0;text-align: center;font-size: 5vw;letter-spacing: -1px;line-height: 1.3;}
	h2 img{width: 95%;}
	/* 中身  -------------------------------------------- */
	.pc {display: none!important;}
	.sp {display: block!important;}
	/* font */
	.mark_w{font-size: 90%;}
	.sec_inner {width: 90%;padding: 1rem 0;margin: auto;}
	.arrow {border: 60px solid transparent;border-top: 24px solid #AD2D2C;border-bottom: none;margin: 0 auto 2rem;}	.box{padding: 3%;margin: 20px auto;}
	.txt_box{padding: 4vw;width: 90%;font-size: 4.8vw;margin: 6vw auto 0;}
	.bottom{margin-bottom: 3vw;}
	/*list--------------------------------------------*/
	ul.list1{margin: 4vw auto;padding: 0;}
	ul.list1 li {font-size: 3.9vw;padding: 2vw 3vw 2vw 11vw;    line-height: 1.3;}
	.list1 li:before{width: 1vw;height: 3vw;top: 3vw;left: 4vw;border-right: 2px solid #8b6b4e; border-bottom: 2px solid #8b6b4e;}
	.list1 li:after{width: 3vw;height: 3vw;top:3vw;left: 3vw;border:2px solid #131f4f52;border-radius: 2px;}
	/*youtube------------------------------------------*/
	.youtube {width: 100%;margin: 8vw auto 0;}
	.youtube iframe {top: 0;right: 0;width: 100%;height: 50vw;}
	/* mv_btn------------------------------------------*/
	.mv_btn{width: 90%;padding: 2vw;font-size: 90%;margin: 0 auto 8vw;}
/* btn---------------------------------------------*/
	.btn{width: 90%; margin: 7vw auto 2vw;; border-radius: 10px;padding: 3vw;}
	.btn::after {right: -7vw;transform: translateY(-50%)scale(.2);}
	.btn a{line-height: 1.5;font-size: 4.8vw;}
	.btn2 {width: 95%;font-size: 6.5vw;}
	/*-footer-------------------------------------------*/
	.footer_logo img {display: block;}
	.footer_txt { padding: 3vw; text-align: center;font-size: 3vw;}
	#footer__wrap {display: block; width: 100%;padding: 3vw 0;}
}