@charset "utf-8";

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

/*		Contents
---------------------------------------------------------------------------

	Common（共通部分）

	HOME								[ / ]
	お申込み or お問い合わせ			[ /entry/ ]

------------------------------------------------------------------------ */


/* ========================================================================
	Common（共通部分）
======================================================================== */
body{
	min-width:320px;
	background:#fffff4;
}

.pc{
	display:none;
}

iframe{
	width:100%;
	height:200px;
}

.line{
	position:relative;
}

.line::before{
	content:"";
	position:absolute;
	top:-3px;
	left:0;
	width:100%;
	height:6px;
	background:url(../../img/line_01.png) repeat-x center;
}


/* ----------------------------------------
	header
---------------------------------------- */
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-width:320px;
	z-index:10;
}

header h1{
	position:relative;
	padding:10px 0 0 10px;
	z-index:1;
}

header h1 img{
	width:auto;
	height:40px;
}


/* entry
---------------------------------------- */
header .entry{
	position:fixed;
	bottom:20px;
	right:10px;
}

header .entry a{
	display:block;
	width:80px;
	height:80px;
	padding:17px 0 0 0;
	background:#fdce52;
	border:3px solid #000000;
	border-radius:50%;
	text-align:center;
	font-size:1.2rem;
	font-weight:700;
	line-height:20px;
	letter-spacing:0.02em;
	text-decoration:none;
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .btn{
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
	z-index:1;
}

#menu ul{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-width:320px;
	height:100%;
	padding:60px 0 0 0;
	background:rgba(255,255,244,0.9);
	text-align:center;
}

#menu ul li{
	padding:0 0 15px 0;
	font-size:1.3rem;
	font-weight:700;
	line-height:23px;
}
#menu ul li a{ text-decoration:none; }


/* ----------------------------------------
	main
---------------------------------------- */
main > div{
	padding:0 10px 40px;
}

main h2{
	padding:40px 0 30px 0;
	text-align:center;
	font-size:3.0rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0.1em;
}

main h2 span{
	font-size:2.0rem;
}

main p{
	line-height:30px;
}


/* list
---------------------------------------- */
main .list{
	overflow:visible;
	padding:18px 0 2px 0;
}

main .list li{
	position:relative;
	margin:0 0 38px 0;
	background:#ffffff;
	border:4px solid #171717;
}

main .list dl{
	padding:38px 10px 20px;
	line-height:30px;
}

main .list dl dt{
	padding:0 0 10px 0;
	text-align:center;
	font-size:1.8rem;
	font-weight:700;
	letter-spacing:0.1em;
}

main .list dl dt span{
	position:absolute;
	top:-22px;
	left:50%;
	width:200px;
	margin:0 0 0 -100px;
	background:#fdce52;
	border:3px solid #171717;
	border-radius:19px;
	font-size:2.0rem;
	line-height:34px;
	letter-spacing:0.1em;
}


/* ----------------------------------------
	footer
---------------------------------------- */
footer{
	padding:30px 100px 10px 10px;
	background:#000000;
	text-align:center;
	color:#ffffff;
}

footer .logo img{
	width:auto;
	height:40px;
}

footer small{
	display:block;
	padding:20px 0 0 0;
	font-size:1.0rem;
	line-height:20px;
}


/* ========================================================================
	HOME								[ / ]
======================================================================== */

/* ----------------------------------------
	key
---------------------------------------- */
#key{
	position:relative;
	padding-top:20px;
}

#key p{
	padding:0 0 30px;
	text-align:center;
	font-weight:500;
}

#key .produce{
	padding:0 80px;
	text-align:center;
}
#key .produce img{ min-width:150px; }


/* interview
---------------------------------------- */
#key .interview{
	position:absolute;
	bottom:0;
	left:10px;
	width:90px;
}

#key .interview::before{
	content:"";
	position:absolute;
	top:-15px;
	left:-5px;
	width:50%;
	height:100%;
	background:url(../../img/key_interview02.png) no-repeat;
	background-size:100% auto;
}


/* photograph
---------------------------------------- */
#key .photograph{
	position:absolute;
	bottom:0;
	right:10px;
	width:90px;
}

#key .photograph::before{
	content:"";
	position:absolute;
	top:-15px;
	right:-5px;
	width:50%;
	height:100%;
	background:url(../../img/key_photograph02.png) no-repeat;
	background-size:100% auto;
}


/* ----------------------------------------
	about
---------------------------------------- */
#about{
	padding:0 0 40px 0;
}

#about .bg{
	background:#fdce52;
}

#about .inner{
	padding:0 10px;
}

#about h2 span{
	margin-left:-0.5em;
}

#about h2 span.ruby{
	position:relative;
	margin:0;
	font-size:4.0rem;
}

#about h2 span.ruby::after{
	content:"ヴォイス";
	position:absolute;
	bottom:-4px;
	left:0;
	width:100%;
	text-align:center;
	font-size:1.2rem;
}


/* outline
---------------------------------------- */
#about .outline{
	padding:0 10px 80px;
}

#about .outline p{
	padding:0 0 20px 0;
}

#about .outline p.lead{
	font-size:1.8rem;
	font-weight:700;
	line-height:38px;
	letter-spacing:0.1em;
}

#about .outline .merit dl{
	margin:0 0 20px 0;
	padding:20px;
	background:#ffffff;
	border:5px solid #171717;
	border-radius:20px;
}

#about .outline .merit dd{
	padding:10px 0 0 0;
	font-size:1.7rem;
	font-weight:700;
	line-height:28px;
	letter-spacing:0.05em;
}
#about .outline .merit dd br{ display:none; }


/* point
---------------------------------------- */
#about .point figure{
	position:relative;
	max-width:512px;
	margin:-80px auto 46px;
	padding:0 10px;
	text-align:center;
}

#about .point figure::before,
#about .point figure::after{
	content:"";
	position:absolute;
	bottom:-26px;
	left:0;
	width:100%;
	height:16px;
	background:url(../../img/about_point02.png) no-repeat left bottom;
	background-size:auto 100%;
}
#about .point figure::after{
	left:auto;
	right:0;
	background-image:url(../../img/about_point03.png);
	background-position:right bottom;
}


/* member
---------------------------------------- */
#about .member{
	padding:0 0 77px 0;
}

#about .member p.image{
	padding:0 0 30px 0;
	text-align:center;
}

#about .member p.lead{
	padding:0 0 20px 0;
}


/* ---------- btn ---------- */
#about .member .btn{
	padding:20px 0 0 0;
	text-align:right;
}

#about .member .btn a{
	display:inline-block;
	width:200px;
	background:#fdce52;
	border:3px solid #171717;
	text-align:center;
	font-size:1.6rem;
	font-weight:700;
	line-height:44px;
	letter-spacing:0.05em;
	text-decoration:none;
}


/* charm
---------------------------------------- */
#about .charm{
	position:relative;
	padding:57px 10px 30px;
	background:#fdce52;
	border:4px solid #171717;
	border-radius:20px;
	line-height:30px;
}

#about .charm dt{
	position:absolute;
	top:-41px;
	left:50%;
	width:250px;
	margin:0 0 0 -125px;
	padding:10px 0;
	background:#171717;
	border:3px solid #fffff4;
	border-radius:14px;
	text-align:center;
	font-size:1.6rem;
	font-weight:700;
	color:#ffffff;
	line-height:26px;
	letter-spacing:0.1em;
}

#about .charm dd span{
	font-weight:700;
}


/* ----------------------------------------
	trouble
---------------------------------------- */
#trouble{
	background:#dceff7;
}

#trouble h2{
	padding:35px 0 25px 0;
	font-size:2.0rem;
	line-height:30px;
}

#trouble ul{
	margin:0 -5px;
	padding:0 0 25px 0;
}

#trouble ul li{
	float:left;
	width:269px;
	height:201px;
	margin:0 5px 5px;
	padding:60px 40px 0 60px;
	background-image:url(../../img/trouble_02.png);
	background-size:100% auto;
	font-weight:700;
	letter-spacing:0.1em;
}
#trouble ul li:nth-child(even){ float:right; }
#trouble ul li:nth-child(5){
	width:283px;
	height:209px;
	padding-top:40px;
	background-image:url(../../img/trouble_03.png);
}


/* ----------------------------------------
	plan
---------------------------------------- */
#plan{
	padding:0;
}

#plan > p{
	padding:0 10px;
}

#plan > div:nth-of-type(2){
	background:#fdce52;
}


/* type
---------------------------------------- */
#plan .type{
	padding:40px 10px;
}

#plan .type h4{
	padding:0 0 20px 0;
	text-align:center;
	font-size:1.8rem;
	font-weight:700;
	line-height:28px;
	letter-spacing:0.1em;
}

#plan .type p{
	padding:0 0 20px 0;
}

#plan .type ul{
	margin:0 -5px;
	padding:0 0 20px 0;
}

#plan .type ul li{
	float:left;
	width:50%;
	padding:0 5px 10px;
}

#plan .type dl dt{
	padding:0 0 0 0;
	font-size:1.6rem;
	font-weight:700;
	line-height:26px;
	letter-spacing:0.1em;
}

#plan .type table{
	margin:10px 0 0 0;
	border:1px solid #171717;
	border-bottom:none;
	font-size:1.5rem;
	line-height:38px;
	letter-spacing:normal;
}

#plan .type table th{
	display:block;
	background:#171717;
	text-align:center;
	font-weight:700;
	color:#ffffff;
}

#plan .type table td{
	display:block;
	background:#ffffff;
	border-bottom:1px solid #171717;
	text-align:center;
	font-weight:700;
	line-height: 2em;
}

#plan .type .price{
	padding:15px 0 0 0;
	text-align:right;
	font-size:2.4rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0.1em;
}

#plan .type .price span{
	font-size:1.6rem;
	letter-spacing:normal;
}
#plan .type .price > span:first-of-type{ padding:0 8px 0 0; }
#plan .type .price span.yen{ font-weight:400 }
#plan .type .price span.yen span{ font-size:1.4rem; }
#plan .type .price span.tax{ font-size:1.4rem; font-weight:400; }


/* box
---------------------------------------- */
#plan .box{
	position:relative;
	margin:0 0 30px 0;
	padding:0 0 30px 0;
	background:#ffffff;
	border:5px solid #171717;
	border-radius:20px;
	text-align:center;
}

#plan .box h3{
	padding:40px 10px 20px;
	font-size:2.0rem;
	font-weight:700;
	line-height:30px;
	letter-spacing:0.1em;
}

/*#plan .box h3 img{
	position:absolute;
	top:-22px;
	left:-10px;
	width:50px;
}*/

#plan .box h3 span{
	display:block;
	margin:0 0 10px 0;
	background:#171717;
	font-size:1.4rem;
	color:#ffffff;
	line-height:42px;
	letter-spacing:normal;
}

#plan .box p{
	padding:0 10px 20px;
	font-size:2.0rem;
    font-weight:700;
	line-height:30px;
}

#plan .box figure{
	padding:0 10px;
}

#plan .box .or{
	position:relative;
	margin:0 0 30px 0;
	padding-bottom:30px;
	background:url(../../img/line_02.png) repeat-x 3px bottom;
	background-size:10px 3px;
}
#plan .box .or::before{
	content:"";
	position:absolute;
	bottom:-15px;
	left:50%;
	width:30px;
	height:30px;
	margin:0 0 0 -15px;
	background:url(../../img/plan_and.png) no-repeat center;
	background-size:30px;
}


/* option
---------------------------------------- */
#plan .option{
	padding:40px 0 0 0;
}

#plan .option h5{
	padding:0 0 10px 0;
	text-align:center;
	font-size:1.5rem;
	font-weight:700;
	line-height:22px;
}
#plan .option h5 img{ margin:0 1.0em 0 0; }

#plan .option figure{
	padding:0 0 10px 0;
	text-align:center;
}

#plan .option p.lead{
	padding:0 0 10px 0;
	font-size:1.8rem;
	font-weight:700;
	letter-spacing:0.1em;
}


/* ----------------------------------------
	member
---------------------------------------- */
#member{
	padding-bottom:10px;
	background:#fdce52;
}

#member h2{
	padding:35px 0 25px 0;
	font-size:2.0rem;
	line-height:30px;
}

#member ul li{
	margin:0 0 30px 0;
}

#member img{
	display:block;
	margin:0 auto 15px;
}

#member h3{
	padding:10px 0 20px 0;
	text-align:center;
	font-size:1.6rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0.2em;
}

#member h3 span{
	display:block;
	padding:6px 0 0 0;
	font-size:1.1rem;
	font-weight:400;
	letter-spacing:0.05em;
}

#member p{
	font-size:1.3rem;
	line-height:25px;
	letter-spacing:0.05em;
}
#member p:first-of-type{ text-align:center; }


/* ----------------------------------------
	case
---------------------------------------- */


/* ----------------------------------------
	area
---------------------------------------- */
#area{
	background:#b99c24;
}

#area h2{
	color:#ffffff;
}

#area .inner{
	padding:30px 10px;
	background:#ffffff;
	border:5px solid #171717;
	border-radius:20px;
}

#area figure{
	padding:0 0 30px 0;
	text-align:center;
}

#area p,
#area .column{
	padding:0 0 20px 0;
}

#area p.lead{
	font-size:2.0rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0.1em;
}

#area p.note{
	padding-left:1.0em;
	text-indent:-1.0em;
	font-size:1.3rem;
}

#area table{
	width:200px;
	margin:0 auto;
	line-height:30px;
}

#area table th{
	text-align:left;
	font-weight:700;
	color:#b99c24;
}

#area table td{
	text-align:right;
	font-weight:700;
}

#area table td span{
	font-size:1.0rem;
}

#area dl{
	padding:20px 0 0 0;
	background:url(../../img/line_02.png) repeat-x center top;
	background-size:10px 3px;
	line-height:30px;
}

#area dl dd ul li{
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
}


/* ----------------------------------------
	data
---------------------------------------- */
#data ul{
	line-height:30px;
}

#data ul li{
	padding:0 0 20px 1.0em;
	text-indent:-1.0em;
}

#data figure{
	padding:0 0 30px 0;
	text-align:center;
}

#data p{
	font-size:1.3rem;
	line-height:25px;
}

#data p.rgb{
	overflow:hidden;
	margin:0 0 20px 0;
	padding:20px 10px;
	background:#ffffff;
	border:1px solid #171717;
}

#data p.rgb img{
	float:right;
	width:140px;
	margin:10px 0 10px 10px;
}

#data p.note{
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
}


/* ----------------------------------------
	flow
---------------------------------------- */
#flow{
	background:#fdce52;
}

#flow ol li{
	position:relative;
	margin:0 0 45px 0;
	padding:10px;
	background:#ffffff;
	border:2px solid #ffffff;
	text-align:center;
	font-size:1.8rem;
	font-weight:700;
	line-height:26px;
	letter-spacing:0.1em;
}
#flow ol li:last-child{ margin:0; }
#flow ol li.bg{
	background:#b99c24;
	color:#ffffff;
}

#flow ol li::after{
	content:"";
	position:absolute;
	bottom:-32px;
	left:50%;
	margin:0 0 0 -15px;
	border-style:solid;
	border-width:15px 15px 0 15px;
	border-color:#8a7234 transparent transparent transparent;
}
#flow ol li:last-child::after{ display:none; }

#flow ol li span{
	vertical-align:bottom;
	font-size:1.4rem;
	font-weight:400;
}

#flow table th{
	display:block;
	position:relative;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	font-weight:700;
}

#flow table th::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#707070;
}
#flow .bg table th::before{ background:#ffffff; }

#flow table td{
	display:block;
	font-weight:700;
}


/* ----------------------------------------
	after
---------------------------------------- */
#after{
	padding-bottom:0;
}


/* ----------------------------------------
	faq
---------------------------------------- */
#faq{
	padding-bottom:20px;
	background:#b99c24;
}

#faq h2{
	color:#ffffff;
}

#faq dl{
	padding:0 0 40px 0;
	line-height:30px;
}

#faq dl dt{
	position:relative;
	margin-top:20px;
	padding:10px 34px 10px 40px;
	background:#ffffff;
	font-weight:700;	
	cursor:pointer;
}
#faq dl dt:first-of-type{ margin-top:0; }

#faq dl dt::after{
	content:"";
	position:absolute;
	top:0;
	right:14px;
	width:14px;
	height:100%;
	background:url(../../img/faq_open.png) no-repeat center;
	background-size:14px;
}
#faq dl dt.close::after{ background-image:url(../../img/faq_close.png); }

#faq dl dd{
	display:none;
	position:relative;
	padding:10px 34px 10px 40px;
	background:#fdce52;
}
#faq dl dd:first-of-type{ display:block; }

#faq dl dt::before,
#faq dl dd::before{
	content:"Q";
	position:absolute;
	top:15px;
	left:0;
	width:40px;
	text-align:center;
	font-size:2.0rem;
	line-height:1;
}
#faq dl dd::before{
	content:"A";
	font-weight:700;
	color:#ef4c72;	
}



/* btn
---------------------------------------- */
#faq .btn a{
	display:block;
	width:100%;
	margin:0 0 20px 0;
	padding:15px 20px;
	background:#171717;
	border:2px solid #ffffff;
	text-align:center;
	font-size:1.6rem;
	font-weight:700;
	color:#ffffff;
	line-height:26px;
	letter-spacing:normal;
	text-decoration:none;
}
#faq .btn a.entry{
	background:#fdce52;
	color:#171717;
}
#faq .btn span{ padding:0 0.5em; }


/* ========================================================================
	お申込み or お問い合わせ			[ /entry/ ]
======================================================================== */
#entry{
	padding-top:30px;
}

#entry h2{
	padding:40px 0 30px 0;
	font-size:2.0rem;
	line-height:30px;
}

#entry > p{
	padding:0 0 30px 0;
	text-align:center;
}

#entry form > table{
	margin:0 auto;
	line-height:30px;
	letter-spacing:normal;
}

#entry table th{
	display:block;
	padding:0 0 10px 0;
	text-align:left;
	font-weight:700;
}

#entry table td{
	display:block;
	padding:0 0 20px 0;
}

#entry table td span.attention{
	font-weight:700;
	color:#dd0000;
}

#entry ul li{
	padding:15px 0;
	border-bottom:1px solid #171717;
}
#entry ul li:first-child{ border-top:1px solid #171717; }

#entry ul li > label{
	margin:0;
	font-weight:700;
}

#entry ul li p{
	font-size:1.3rem;
	line-height:25px;
	letter-spacing:0.1em;
}

#entry ul li table{
	margin:10px 0 0 0;
}

#entry ul li table th{
	padding:0;
	font-weight:400;
}

#entry ul li table td{
	padding:0 0 10px 0;
}
#entry ul li table tr:last-child td{  padding:0; }


/* ----------------------------------------
	btn
---------------------------------------- */
#entry .btn{
	padding:0 0 10px 0;
	text-align:center;
}

#entry .btn button,
#entry .btn input{
	width:100%;
	margin:0 0 20px 0;
	background:#fdce52;
	border:none;
	line-height:50px;
}


}