@charset "UTF-8";

*{
	font-size:16px;
	-webkit-text-size-adjust: 100%;          
}


/* 要素リセット */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
}
div .main div {
margin-left: 0px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
.aboutCopy-sage h3  {
font-size: 18px;
color: #00a3df;
font-weight: bold;
margin-bottom: -10px;
margin-top: 16px;
}

ol, ul {
  list-style: none
}

body{
	color: #666; /* 標準文字色 */
	background-color: #fff;
	font-family:'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Arial,'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}


/* ヘッダー */

#headerContainer{
height: 40px;
overflow: hidden;
width: auto;
background-color: #00a3df;
}
/*閉じるボタン*/
#headerContainer button {
font-size: 12px;
display: block;
text-align: left;
color: rgba(255,255,255,0.90);
width: 720px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background: none;
border: none;
outline: none;
appearance: none;
padding-top: 13px;
padding-right: 0;
padding-bottom: 0;
cursor: pointer;
}

#header{
	width: 720px;
	margin-right: auto;
	margin-left: auto;
}
#header img{
	margin-bottom: 10px;
	margin-top: 15px;
	margin-left: 15px;
}
.titleKawai{
	width: 96%;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	background-image: url(../images/rd-header_kawai.jpg);
	background-repeat: no-repeat;
	height: 68px;
	text-indent: -9999px;
	max-width: 720px;
}

#imageMainFlame{
	width: 100%;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}
#imageMainFlame img{
	width: auto;
	max-width: 100%;
}

#roudokuSakuhinTitle{
	position: relative;
	width: auto;
}
h1{
	font-size: 40px;
	color: #666666;
	text-align: center;
	line-height: 125%;
	font-weight: bold;
	margin-bottom: 0.5em;
}
h1.small {
	font-size: 2em;
}
#imageMainFlame h1 {
/* [disabled]margin-bottom: 0px; */


}
#imageMainFlame h2 {
font-size: 32px;
font-weight: bold;
margin-bottom: 10px;
margin-top: 0px;
}


.moji {
　vertical-align: 50px;
}
p.large{
	font-size: 18px;
	color: #000000;
	text-align: center;
	margin-bottom: 10px;
	font-weight: bold;
}
p.small{
	font-size: 16px;
	color: #FC9D08;
	text-align: center;
	font-weight: bold;
}
p.small2{
font-size: 14px;
color: #00a3df;
margin-bottom: 10px;
}
#audioBox {
	width: 540px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
}
audio {
	width: 100%;
}

.container {
	width: 100%;
	margin: 0 auto;
}
.smallText{
	font-size: 0.85em;
}

#textBox {
	width: 580px;
	text-align: center;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}
#textBox h1{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
	color: #666666;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #c0c0c0;
	padding-bottom: 20px;
}

#textBox p{
	font-size: 0.85em;
	text-align: left;
	line-height: 1.8em;
	margin-bottom: 1.5em;
}

#textBox .blockSage{
	margin-right: 25%;
	margin-left: 25%;
}
#textBox .blockSage32{
	margin-left: 5.5%;
}
#textBox .blockSage96{
	margin-left: 96px;
}
.tablePosition{
	margin-left: 258px;
	width: 4em;
}

#footerContainer{
	height:50px;
	width: auto;
	background-color: #00a3df;
}
#footerCopyright{
	padding-top: 12px;
	text-align: center;
}
#footerCopyright p{
	color: #FFFFFF;
	font-size: 0.9em;
}

#ido {
	width: 720px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	text-align: center;
}
#ido p {
	font-size: 0.8em;
	color: #668edc;
}
#ido p a {
	font-size: 1em;
	color: #668edc;
	text-decoration: none;
}
#ido p a:hover {
	text-decoration: underline;
}



/* =======================================================
  レスポンシブル設定
======================================================= */

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


#headerContainer{
height: 40px;
margin-bottom: 30px;
}
#header{
	display: none;
}
#modoruBtn {
}
#modoruBtn a{
}
.titleKawai{
	width: 90%;
	margin-right: auto;
	margin-bottom: 5%;
	margin-left: auto;
	margin-top: 20px;
}

#imageMainFlame{
	margin:0 auto;
	width: 95%;
}

#imageMainFlame img{
	width: 90%;
	height: auto;
}

#imageMain{
	width: 100%;
	background-image: url(../voice/images/rd70_image_01.jpg);
	background-repeat: no-repeat;
	height: 360px;
}

h1{
	font-size: 7vw;
	line-height: 110%;
	margin-bottom: 0.4em;
}
h1.small {
	font-size: 5.5vw;
}
p.large{
	margin-bottom: 8px;
	font-size: 16px;
}
p.small{
	font-size: 15px;
}

#audioBox {
	position: relative;
	top: 8px;
	left: 0px;
	width: 90%;
	right: 0px;
	margin-right: 5%;
	margin-left: 5%;
}

#textBox {
	width: 70%;
	margin-top: 50px;
	margin-bottom: 50px;
}
#textBox h1{
	font-size: 1em;
	margin-bottom: 15px;
}
#textBox h2{
	font-size: 0.85em;
	margin-bottom: 15px;
	padding-bottom: 20px;
}
.tablePosition{
	margin-left: 0px;
	float: right;
	margin-right: 16px;
}

#textBox p{
	margin-top: 18px;
}
#textBox .blockSage32{
	margin-left: 32px;
}
#textBox .blockSage96{
	margin-left: auto;
	margin-right: auto;
}
#textBox .blockSage{
	margin-right: 20%;
	margin-left: 20%;
}

#footerCopyright p{
	font-size: 0.8em;
}
#ido {
	width: 95%;
	text-align: center;
}


}

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

#header{
	display: none;
}
h1{
	font-size: 7vw;
}

p.large{
	font-size: 15px;
}
p.small{
	font-size: 14px;
}
#audioBox {
	top: 5px;
}

#textBox {
	width: 80%;
	margin-top: 40px;
	margin-bottom: 50px;
}
#textBox h1{
	font-size: 1em;
	margin-bottom: 13px;
}
#textBox h2{
	font-size: 0.85em;
	margin-bottom: 15px;
	padding-bottom: 20px;
}

#textBox p{
	margin-top: 16px;
}
#textBox .blockSage{
	margin-right: 16%;
	margin-left: 16%;
}
#textBox .blockSage32{
	margin-left: 10px;
}

}


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

#header{
	display: none;
}
h1{
	font-size: 7vw;
}

p.large{
	font-size: 13px;
}
p.small{
	font-size: 12px;
}

#audioBox {
	top: 3px;
}
#textBox {
	width: 90%;
	margin-top: 30px;
	margin-bottom: 30px;
}
#textBox h1{
	font-size: 1em;
	margin-bottom: 13px;
}
#textBox h2{
	font-size: 0.85em;
	margin-bottom: 15px;
}

#textBox p{
	margin-top: 12px;
}


}