@charset "utf-8";

/* ---------------------------------------- reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html { font-size: 62.5%; }
body {
	font-size: 10px;
	font-size: 1.0rem;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}

ol,ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	-webkit-backface-visibility: hidden;
	-ms-interpolation-mode: bicubic;
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering:   -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast; /* Webkit (非標準の名前) */
	image-rendering: crisp-edges;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	color: inherit;
	-webkit-touch-callout: none; /* iOS長押しポップアップを阻止 */
}

del { text-decoration: line-through; }

ins {
	background-color: #ff9;
	color: inherit;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: inherit; 
	font-style: italic;
	font-weight: bold;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor:help;
}

hr {
    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input[type="text"], input[type="password"], input[type="submit"], , input[type="email"], input[type="tel"], button, textarea {
	vertical-align: middle;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* IE text, password */
input::-ms-reveal,
input::-ms-clear {
	visibility: hidden;
}

@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop, main {
		display: block;
	}
}

/* ---------------------------------------- font set */

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v11/If2RXTr6YS-zF4S-kcSWSVi_szLviuEHiC4Wl-8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v11/If2RXTr6YS-zF4S-kcSWSVi_szLuiuEHiC4Wl-8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v11/If2RXTr6YS-zF4S-kcSWSVi_szLgiuEHiC4W.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Dancing Script Bold'), local('DancingScript-Bold'), url(https://fonts.gstatic.com/s/dancingscript/v11/If2SXTr6YS-zF4S-kcSWSVi_szpbr_QlqiM8rebBwWg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Dancing Script Bold'), local('DancingScript-Bold'), url(https://fonts.gstatic.com/s/dancingscript/v11/If2SXTr6YS-zF4S-kcSWSVi_szpbr_QkqiM8rebBwWg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Dancing Script Bold'), local('DancingScript-Bold'), url(https://fonts.gstatic.com/s/dancingscript/v11/If2SXTr6YS-zF4S-kcSWSVi_szpbr_QqqiM8rebB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------- basis */

body { 
	color:#6f6f6f; 
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans CJK JP","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}

/* ---------------- font size */

#wrapper { 
	font-family: "游ゴシック", "Yu Gothic", "YuGothic", Arial, Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Roboto, "Droid Sans", Meiryo, "ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}
#sidebar {
	font-size: 1.3rem;
	line-height: 1.4;
	font-family: "游ゴシック", "Yu Gothic", "YuGothic", Arial, Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Roboto, "Droid Sans", Meiryo, "ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

h1,h2,h3,h4 { 
	font-weight: bold; 
	line-height: 1.6;
}

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

	#wrapper { 
		font-size: 1.3rem;
		line-height: 2.2;
	}
	
	h1 {
		font-size: 2.0rem;
		margin: 0 0 1em;
	}
	
	h2 {
		font-size: 1.8rem;
		margin: 0 0 1.2em;
	}

	h3 {
		font-size: 1.6rem;
		margin: 0 0 1em;
	}
	
	h4 {
		font-size: 1.4rem;
		margin: 0 0 1em;
	}

	.dancing { font-size: 2.8rem; }
}

@media screen and (min-width:481px) and ( max-width:599px) {

      #wrapper { 
          font-size: 1.3rem;
          line-height: 2.2;
      }
	
	h1 {
		font-size: 2.3rem;
		margin: 0 0 1em;
	}
	
	h2 {
		font-size: 2.1rem;
		margin: 0 0 1.2em;
	}

	h3 {
		font-size: 1.7rem;
		margin: 0 0 1em;
	}
	
	h4 {
		font-size: 1.5rem;
		margin: 0 0 1em;
	}
	
	.dancing { font-size: 3.0rem; }
}

@media screen and (min-width:600px) and ( max-width:896px) {

      #wrapper { 
          font-size: 1.4rem;
          line-height: 2.2;
      }
	
	h1 {
		font-size: 2.4rem;
		margin: 0 0 1em;
	}
	
	h2 {
		font-size: 2.2rem;
		margin: 0 0 1.2em;
	}

	h3 {
		font-size: 1.8rem;
		margin: 0 0 1em;
	}
	
	h4 {
		font-size: 1.6rem;
		margin: 0 0 1em;
	}
	
	.dancing { font-size: 3.4rem; }
}
 
@media screen and (min-width:897px) and ( max-width:1280px) {

      #wrapper { 
          font-size: 1.5rem;
          line-height: 2.2;
      }

	h1 {
		font-size: 2.5rem;
		margin: 0 0 1.25em;
	}
	
	h2 {
		font-size: 2.3rem;
		margin: 0 0 1.2em;
	}

	h3 {
		font-size: 1.9rem;
		margin: 0 0 1em;
	}
	
	h4 {
		font-size: 1.7rem;
		margin: 0 0 1em;
	}
	
	.dancing { font-size: 3.8rem; }
}
 
@media screen and (min-width:1281px) {

      #wrapper { 
          font-size: 1.6rem;
          line-height: 2.2;
      }
	
	h1 {
		font-size: 2.6rem;
		margin: 0 0 1.4em;
	}
	
	h2 {
		font-size: 2.4rem;
		margin: 0 0 1.5em;
	}
	
	h3 {
		font-size: 2.0rem;
		margin: 0 0 1.2em;
	}
	
	h4 {
		font-size: 1.8rem;
		margin: 0 0 1em;
	}

	.dancing { font-size: 4.0rem; }
}

/* ---------------- wrappers */

section + section { 
	border-top: 1px #e0e0e0 solid;
}

@media (max-width: 768px) {

	section + section { 
		padding: 4em 0 0;
		margin: 4em 0 0; 
	}
	article + article { margin: 3em 0 0; }
	.inner { margin: 0 1.5em; }
	
}

@media screen and (min-width:769px) and ( max-width:1240px) {

	section + section { 
		padding: 5em 0 0;
		margin: 5em 0 0; 
	}
	article + article { margin: 4em 0 0; }
	.inner { margin: 0 24px; }

}

@media (min-width: 1241px) {

	section + section { 
		padding: 6em 0 0;
		margin: 6em 0 0; 
	}
	article + article { margin: 5em 0 0; }
	.inner {
		width: auto;
		max-width: 1200px;
		margin: 0 auto;
	}

}