@charset "utf-8";
/* CSS Document */

/* ===================================================================

概要：
汎用フォーム向けスタイル設定（2019～）

特記事項：

=================================================================== */



/*===============================================
　　　　　　　　　　初期設定
===============================================*/

/* site parametar */

:root {
	--area-main-decoration-height:13;

	--color-base1	:#fff;
	--color-base2	:#eee;
	--color-main1	:#EA7399;
	--color-main2	:#F4B7CA;
	--color-accent1	:#396;
	--color-accent2	:#369;
	--color-text	:#222;
	--color-link	:#B0000A;

	--color-headline-text	:#099;
	--color-headline-bg1	:#38BBBB;
	--color-headline-bg2	:#099;

	--color-label-bg	:#FFF7D8;

	--color-button-go	:#EA7399;
	--color-button-back	:#888;

	--animation-time:0.6s;
}

html {
	overflow-y:scroll;
}

body , p , div , form , ul , h1 , h2 , h3 , h4 , h5 , h6 ,
a , area , map , address , ul, ol , dl , dt , dd , pre ,
form , fieldset , input , textarea , blockquote , th , td {
	margin:0;
	padding:0;
	list-style-type: none;
	text-align:left;
}


body {
font-size: 16px;
font-size: 1rem;
}

.small {
font-size: 0.75rem; /* 75% of the baseline */
}

.large {
font-size: 1.25rem; /* 125% of the baseline */
}

body{
	line-height:1.5;
	font-size:90%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:var(--color-base1);
}
.clear{
	clear:both;
	display:block;
}

strong {
	font-weight:bold;
	color:#c00;
}

a{
	color:var(--color-link);}
a:hover{
	text-decoration:none;}

p, ul {
	margin-bottom:0.5rem;
}





/*===============================
その他設定
===============================*/
.center {
	text-align:center;
}

.left {
	text-align:left;
}

.right {
	text-align:right;
}

.right_m {
	text-align:right;
	font-size:11px;
}

.clear {
	display:block;
	clear:both;
	
	height:0;
	line-height:0;
}

#area_right ul.attention li {
	list-style:none;
	padding-left:0;
	background:none;
}

ul.attention li:before,
p.attention:before,
span.attention:before {
	content:"※";
	color:#c00;
}



/*===============================
margin
===============================*/
.bottom5{
	margin-bottom:5px;
}

.paddingleft1em{
	padding-left:1em;
}

.margintop10{
	margin-top:10px;
}

.margintop20{
	margin-top:20px;
}

.marginleft100{
	margin-left:100px;
}

.margintop10bottom10{
	margin:10px 0;
}

.margintop20bottom20{
	margin:20px 0;
}

.marginbtm10{
	margin-bottom:10px;
}

.marginbtm0{
	margin-bottom:0px;
}

.marginbtm20{
	margin-bottom:20px;
}

.marginbtm100{
	margin-bottom:100px;
}

.marginbtm200{
	margin-bottom:200px;
}

/*===============================
　　　　clearfixセット
Netspace、Mac IE非対応簡略版
===============================*/

/*.clearfix { /zoom : 1; }*/

.clearfix:after {
	content:'';
	display:block;
	clear:both;
}

/*-----本文部分-----*/
#contents{
/*	width:700px;*/
	margin:20px auto;
	padding:16px 20px;
	background-color:#fff;
	border:solid 5px var(--color-main1);
	border-radius:10px;		/* CSS3草案 */
	-webkit-border-radius:10px;	/* Safari,Google Chrome用 */
	-moz-border-radius:10px;	/* Firefox用 */
	box-shadow:0px 0px 15px rgba(0,0,0,0.33);
	-webkit-box-shadow:0px 0px 15px rgba(0,0,0,0.33);
	-moz-box-shadow:0px 0px 15px rgba(0,0,0,0.33);
}

#form_area {
/*	width:700px;*/
	margin:0 auto;
}

#form_area table {
	width:100%;
}


.text{
	margin-top:20px;
	margin-bottom:10px;}

/*-----戻り-----*/
ul.backtop{
	width:93px;
	padding-top:12px;
/*	/margin-top:12px;*/
	display:block;
	float:right;
	position:absolute;
	right:3px;
	list-style:none;}
.backtop li a{
	list-style:none;
	list-style-image:none;
	width:93px;
	height:30px;
	background:url("../image/backtop.gif") no-repeat 0 0;
	display:block;
	text-indent:-9999px;}

*:first-child+html ul.backtop{
	right:20px;}

/*-----戻り-----*/
ul.backindex{
	width:93px;
	padding-top:12px;
/*	/margin-top:12px;*/
	display:block;
	position:absolute;
	right:0px;
	bottom:10px;
	list-style:none;}
.backindex li a{
	list-style:none;
	list-style-image:none;
	width:93px;
	height:30px;
	background:url("../image/backindex.gif") no-repeat 0 0;
	display:block;
	text-indent:-9999px;}


/*-----フッター-----*/
ul#foot{
	float:left;
	padding-top:20px;
	padding-left:0px;
	font-size:0.84em;}
#foot li{
	float:left;
	list-style:none;
	list-style-image:none;
	padding-left:10px;
	border-left:1px solid #EA7399;
	margin-right:10px;}
ul#foot li:first-child{
	padding-left:0px;
	border:none;}

/* CSS Document */


.ex{
	width:400px;
	padding:10px 15px;
	margin:0;
	background:url("../image/ex_bg.gif");
	border:1px solid #ccc;
	float:right;}
.ex p{
	text-align:right;
	margin-top:5px;}
.ex h4{
	border-bottom:1px dashed var(--color-headline-text);
	margin-bottom:5px;
	padding-bottom:3px;}

/*コピペ文章下地*/
.copy{
	padding:10px 15px;
	background:url("../image/ex_bg.gif");
	border:1px dashed var(--color-headline-text);
	}

/*リスト設定*/
ul{
	list-style-position:outside;
	list-style-image:url("../image/li.gif");
	padding-left:20px;}

ul.come{
	list-style-image:url("../image/come.gif");}　/*米印つきリスト*/
li.come{
	list-style-image:url("../image/come.gif");}　/*1項目だけ米印にしたい時*/


/*フォームボタン設定*/
.btn_form,.btn_form a,.btn_form a:hover{
	width:241px;
	height:64px;
	display:block;
	text-indent:-9999px;
	margin:10px 20px 0 0;
	padding:0;
	float:left;}
.btn_form a{
	background:url("../image/btn_form_a.jpg") no-repeat 0 0;}
.btn_form a:hover{
	background:url("../image/btn_form_b.jpg") no-repeat 0 0;}
.btn_form_right{
	margin-top:20px;
	width:540px;
	float:right;
	_width:500px;}
.notice div.text li{
	padding-bottom:5px;}

.bn_link{
	width:370px;
	padding:15px;
	border:1px dashed var(--color-link);}
.bn_link dt{
	background:url("../image/ex_bg.gif");
	padding:2px 6px;
	margin-bottom:10px;
	font-weight:bold;}
.bn_link dd{
	margin-bottom:18px;}
.bn_link h5{
	background:url("../image/li.gif") no-repeat 0 center;
	margin-bottom:5px;
	padding-left:16px;
	font-size:1.16em;}

/*-----リンク見本用----*/
#temp_link{
	width:706px;
	margin:10px auto 20px;
	border:1px dashed var(--color-link);
	padding:15px;}
#temp_link p{
	height:235px;
	height:60px;
	background:url("../image/temp_link.jpg") no-repeat 0 0;
	text-indent:-9999px;
	display:block;}
.temp_dl{
	background:url("../image/ex_bg.gif");
	border:1px solid #ccc;
	float:right;
	padding:12px 15px;
	width:430px;}
#temp_link dt{
	width:200px;
	height:40px;}
#temp_link dd{
	margin-left:220px;
	margin-top:-40px;}	

.temp_pr{
	display:block;
	background-color:#fff;
	font-size:0.9em;
	padding:5px;
	margin:2px 0 0 3px;
	border:1px solid #ccc;}

/*-----メール-----*/
#mail_box{
	width:535px;
	border:2px solid var(--color-main1);
	background-color:#fff;
	margin:20px auto;
	padding:16px 20px;
	border:2px solid var(--color-main1);}

#mail_box.idoll {	
	border:2px solid #FF4288;
}

/*-----組み合わせ用-----*/
.mt10{
	margin-top:10px;}
.mt20{
	margin-top:20px;}
.red{
	font-weight:normal;
	color:#df296b;}
.small{
	font-size:0.9em;}
.fright{
	float:right;}

/*-----テーブル-----*/
table{
/*	width:650px;*/
	border-collapse:collapse;
	margin:0 auto;
	}

/*	
.idoll th{
	background:#FFF4F4;
	color:#000;
	width:200px;
	padding:5px 10px;
	font-weight:normal;
	border: 1px solid #ffe878;
background-image: linear-gradient(
	-45deg,
	#FFF4F4 25%,
	#FFEEEE 25%, #FFEEEE 50%,
	#FFF4F4 50%, #FFF4F4 75%,
	#FFEEEE 75%, #FFEEEE
);

.idoll th .small {
	font-size:75%;
	line-height:1.5em;
}
*/  

#form_area th {
	width:10em;
	
	border:1px solid var(--color-main2);
	padding:0.5rem;
	font-size:0.774rem;

	text-align:left;
}

th.necessary::before {
	content:"必須 ";
	color:#c00;
}

#form_area td {
	border:1px solid var(--color-main2);
	padding:0.5rem 1rem;
	
	background-color:#fffef7;
}

/*-----フォーム-----*/
td input[type="text"] {
/*	width:380px;*/
/*	height:20px;*/
	border:1px solid #999;
	font-size:1em;
	margin-top:3px;}
td select{
/*	height:20px;*/
	border:1px solid #999;
	margin-top:3px;}
td option{
	font-size:1em;
}

label {
	display:inline-block;
	
	padding:0.25em 0.5em;
	margin:0.5rem;
	border:1px solid var(--color-main1);
	
	background-color:var(--color-label-bg);
}

input[type=text],
textarea, select {
	box-sizing: border-box;
	
	padding:0.25em 0.5em;
	width:100%;
	margin-right:0.5em;
}

select {
	height:2.25em;
}

input[type=checkbox],
input[type=radio] {
	margin-right:0.5em;
}

#genre_list li {
	border-bottom:1px dotted var(--color-main2);
}

.button-only {
	display:inline-block;
}

.wrap_button {
	text-align:center;
	padding:0.5em 0;
}

input[type=submit], button {
	cursor:pointer;
	
	display:inline-block;
	
	padding:0.75em 2em;
	margin:0.25rem;
	border:none;

	color:var(--color-text);
}

.button-forward,
.button-go {
	background-color:var(--color-button-go);
}

.button-forward:disabled,
.button-go:disabled {
	cursor:default;
	opacity:0.5;
}

.button-back {
	background-color:var(--color-button-back);
}






td input[type="text"].mail,td input[type="text"].name,td input[type="text"].date,td input[type="text"].tel,td input[type="text"].dealer{
	width:260px;}
	

td input.postcode,td input.count{
	width:80px;}
td input.check{
	width:16px;
	height:16px;
	padding-top:3px;}
td input.radio{
	width:20px;
	height:1em;
	font-size:1em;
	border:none;}
td textarea{
	width:380px;
	height:80px;
	border:1px solid #333;
	font-size:1.1em;
	margin-top:8px;}
.btn{
	width:150px;
	margin:10px auto 0px;
	font-weight:bold;}
.btn_check{
	width:210px;
	margin:10px auto 0px;
	font-weight:bold;}
.btn input.btn_send,.btn_check input.btn_send{
	background:url("../image/btn02.jpg") repeat-x 0 0;
	border:1px solid #f90;
	text-shadow: 1px 1px #fff0b9;
	height:32px;
	width:70px;
	color:#000;
	cursor:pointer;
	float:right;
	font-size:80%;
	text-align:center;}
.btn input.btn_clear,.btn_check input.btn_back{
	background:url("../image/btn01.jpg") repeat-x 0 0;
	border:1px solid #ccc;
	color:#000;
	text-shadow: 1px 1px #fff;
	height:32px;
	cursor:pointer;
	float:left;
	font-size:80%;
	text-align:center;
	}
.btn input.btn_clear{
	width:70px;
	}
.btn_check input.btn_back{
	width:130px;
	}
.btn input.btn_close{
	background:url("../image/btn02.jpg") repeat-x 0 0;
	border:1px solid #f90;
	text-shadow: 1px 1px #fff0b9;
	height:32px;
	width:70px;
	color:#000;
	cursor:pointer;
	font-size:1.1em;
	margin:0 auto;
	display:block;}


.btn input:hover,.btn_check input:hover{
	background-position:0 -32px;
}
.btn input:active,.btn_check input:active{
	background-position:0 -64px;
}	
/*イベントリスト用*/
#entry_event{
	width:236px;
	border:2px solid #fdaa30;
	float:left;
	padding:10px;
	margin-top:32px;
	position:relative;}
#entry_event h4 {
	background-color:#1a1a1a;
	color:#fff;
	padding-left:5px;
	margin-bottom:5px;}
#entry_event ul{
	list-style-image:url("../image/li_ev.gif");
	margin-bottom:5px;
	font-size:0.9em;
	}
#entry_list{
	width:550px;
	float:right;}
#entry_list hr{
	height:0;
	border:0;
	background-image:none;
	background-color:#ddd;
	width:auto;
	border-top: 1px solid #ddd;
	margin:10px 0;
	}
*html #entry_list hr{
	display:inline ;}
*:first-child+html #entry_list hr{
	display:inline;}
	
#entry_list dl{
	width:540px;
	padding-left:10px;
	margin-bottom:26px;
	background:url("../image/list_bg.gif") repeat-y 0 0;}
#entry_list dt{
	width:200px;
	height:40px;}
#entry_list dd{
	margin-left:210px;
	margin-top:-40px;}	
	
	
/*=================
　注意書きなど
=================*/

.noticearea {
	border:solid 2px #FFCCCC;
	border-radius:10px;     /* CSS3草案 */
	-webkit-border-radius:10px; /* Safari,Google Chrome用 */
	-moz-border-radius:10px;    /* Firefox用 */
	background:#FFEDED;
	padding:10px 10px 10px 10px;
	margin:20px 0;
}

.noticearea p {
	margin:0;
	padding:0;
	text-align:center;
}


	
#h2_workshop {
	background:url(../workshop/images/h2.jpg) no-repeat 0 0;
	width:700px;
	height:50px;
	text-indent:-9999px;
	margin:0 auto 10px;
	padding:0;}
	
	
	
/*	
h3 {
	position: relative;
	height: 40px;
	line-height: 40px;
	padding: 0 0 0 1em;
	background-color: var(--color-headline-bg1);
	margin:30px -10px 20px -10px;
	color:#fff;
}
h3::before,
h3::after {
	content: '';
	position: absolute;
}
h3::before {
	top: 100%;
	left: 0;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: transparent;
	border-right-color: var(--color-headline-bg2);
}
h3::after {
	top: 0;
	right: 0;
	z-index: 2;
	border-width: 20px 20px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #fff;
}
*/

#h2_contact {
	position: relative;
	padding-bottom: .5em;
	color:var(--color-headline-text);
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}
#h2_contact::before,
#h2_contact::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	height: 4px;
}
#h2_contact::before {
	z-index: 2;
	width: 15%;
	background-color:var(--color-main1);
}
#h2_contact::after {
	width: 100%;
	background: -webkit-repeating-linear-gradient(45deg
	, #fff
	, #fff 2px
	, var(--color-main1) 2px
	, var(--color-main1) 4px
	);
	background: repeating-linear-gradient(45deg
	, #fff
	, #fff 2px
	, var(--color-main1) 2px
	, var(--color-main1) 4px
	);
}



.width_full {
	width:100% !important;
}

button#go_next {
	background-color: var(--color-button-go);
	color:#fff;
}

button#go_next:disabled {
	opacity:0.5;
	cursor:default;
}

button#go_prev {
	background-color: var(--color-button-back);
	color:#fff;
}



/* --- YouClub独自設定 --- */

#header {
	background: none;
}