@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;
}
#main {
	width: 960px;
	padding-bottom: 100px;
	margin: 0 auto;
	border-left: 2px solid #ccc;
	border-right: 2px solid #ccc;
	background: #FFF;
}
/* header  -------------------------------------------- */
header{background:#e24a3e}
header h1 {
	color: #fff;
	text-align: center;
	padding: 2rem 0;
	font-family: "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
	font-size: 5rem;
	font-weight: bold;
	text-shadow: 2px 2px 0px #c11e11;
	line-height: 1.2;
}
h2 {
	padding: 2rem 0;
	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: 4rem;
	letter-spacing: -1px;
	line-height: 1.3;
	color: #3f3f3f;
	font-weight: bold;
}
/* 中身  ------------------------------------------------- */
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom:1;}
.side_photo {float: right;padding: 0 0 2rem 2rem;width: 35%;}
.side_photo2 {float: left;padding: 0 2rem 2rem 0rem;width: 35%;}

.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: #d00;}
.ru {color: #d00;text-decoration: underline;font-weight: bold;}

.small {font-size: 80%;}
.large {font-size: 135%;}

.box{border: 1px solid #ccc;border-radius: 5px;padding: 20px;margin: 20px auto;}
.arrow {display: block;width: 0;height: 0;border: 120px solid transparent;border-top: 60px solid #F44336;border-bottom: 0;margin: 20px auto;}
section p {margin-bottom: 2rem;}
.letter {padding: 3rem 5rem;}

/* ボタン------------------------------------------------*/
/*.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: #ddd;
    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;
}
.youtube {
	width: 700px;
	text-align: center;
	margin: 0 auto;
}
.youtube iframe {
	top: 0;
	right: 0;
	width: 700px;
	height: 394px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
【 SP 】
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width:768px) {
/*----------------------------------------------------------------------------------------------
	basic
	----------------------------------------------------------------------------------------------*/
html {font-weight: normal;}
body {background: none;font-size: 4.5vw;font-weight: normal;}
img {max-width: 100%;}
header h1 {font-size: 6vw;padding:1.5rem 0;margin-bottom: 1rem;
}
.side_photo {width: 40%;padding: 0 0 1.4rem 1.4rem;}
.side_photo2 {width: 40%;padding: 0 1.4rem 1.4rem 0;}
.box{padding: 3%;margin: 20px auto;}
.pc {display: none!important;}
.sp {display: block!important;}
#main {padding-bottom: 155px;width: 100%;border: none;}

h2 {padding: 1rem 0;margin: 0;text-align: center;font-size: 5vw;letter-spacing: -1px;line-height: 1.3;}

.letter {width: 90%;padding: 1rem 0;margin: auto;}
.youtube {width: 100%;}
.youtube iframe {top: 0;right: 0;width: 100% !important;height: 200px !important;}
.btn2 {width: 95%;font-size: 6.5vw;}
.arrow {border: 70px solid transparent;border-top: 40px solid #F44336;border-bottom: none;margin: 0 auto;
}
/*--------------------------------------------------------------
	/*----------------------------------------------------------------------------------------------
	footer
	----------------------------------------------------------------------------------------------*/
.footer_logo img {
	display: block;
}
.footer_txt {
	padding: 1rem;
}
#footer__wrap {
	display: block;
	width: 100%;
}

}