/*
========== TABLE of CONTENTS ==========

 0.common parts
 1.Guide TOP
 2.Addition of schedule
 3.Edit and deletion of schedule
 4.Addition of work(To do)
 5.Edit and deletion of work
 6.Synchronization
 7.Two or more calendars
 8.Grouping
 9.One screen
10.Registration button
11.Using the form
12.Making of HTML tag

========== TABLE of CONTENTS ==========
*/
/*
0.common parts
------------------------------*/
/* ------ Body ------ */
body {
  font-family: "MS PGothic",sans-serif;
  color: #333;
}

/* ------ #masthead ------ */
#masthead {
  margin-bottom: 15px;
}

/* ------ #contents ------ */
.yj950-2 #contents {
  margin-bottom: 20px;
}

/* ------ #contents-body ------ */
.yj950-2 #contents-body #main {
  float: right;
  width: 700px;
}

.yj950-2 #contents-body #sub {
  float: left;
  width: 230px;
}

/* ------ margin/padding ------ */
.mrg_b5 {
  margin-bottom: 5px;
}

.mrg_b10 {
  margin-bottom: 10px;
}

.mrg_b15 {
  margin-bottom: 15px;
}

.mrg_b20 {
  margin-bottom: 20px;
}

.mrg_b25 {
  margin-bottom: 25px;
}

.mrg_b50 {
  margin-bottom: 50px;
}

.mrg_t5 {
  margin-top: 5px;
}

.mrg_t10 {
  margin-top: 10px;
}

.mrg_t15 {
  margin-top: 15px;
}

.mrg_t20 {
  margin-top: 20px;
}

.mrg_l20 {
  margin-left: 20px;
}

.mrg_l1em {
  margin-left: 1em;
}

.pdg_b20 {
  padding-bottom: 20px;
}

.pdg_b25 {
  padding-bottom: 25px;
}

.pdg_b30 {
  padding-bottom: 30px;
}

.pdg_b40 {
  padding-bottom: 40px;
}

.pdg_l20 {
  padding-left: 20px;
}

/* width */
.w343 {
  width: 343px;
}

.w317 {
  width: 317px;
}

.w162 {
  width: 162px;
}

.w293 {
  width: 293px;
}

.w302 {
  width: 302px;
}

.w10per {
  width: 15%;
}

.w20per {
  width: 20%;
}

.w25per {
  width: 25%;
}

.w30per {
  width: 30%;
}

.w40per {
  width: 40%;
}

.w75per {
  width: 75%;
}

/* ----- clearFix ------ */
/* for FF,Safari,Opera */
.clearFix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ".";
}

/* for Win IE5.5-7 */
.clearFix {
  zoom: 1;
}

/* ------ common class ------ */
.guide_lead {
  padding: 10px 15px;
  background-color: #fff5c4;
  font-size: 87%;
  line-height: 1.3em;
}

.oshirase_lead {
  padding: 10px 15px;
  background-color: #fff1f5;
  border: 1px solid #FFACC2;
  font-size: 87%;
  line-height: 1.3em;
}

.guide_cap {
  margin: 10px 0 0 40px;
  width: 660px;
}

.g_cap {
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

.guide_txt01 {
  margin-left: 20px;
  font-size: 87%;
  line-height: 1.3em;
}

.guide_txt01 li {
  min-height: 19px;
  height: auto !important;
  height: 19px;
  margin-top: 10px;
  padding-top: 2px;
  padding-left: 26px;
  background-position: left top;
  background-repeat: no-repeat;
}

/* list number */
.nmb01 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb01.png);
}

.nmb02 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb02.png);
}

.nmb03 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb03.png);
}

.nmb04 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb04.png);
}

.nmb05 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb05.png);
}

.nmb06 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb06.png);
}

.nmb07 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb07.png);
}

.nmb08 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb08.png);
}

.nmb09 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb09.png);
}

.nmb10 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb10.png);
}

.nmb11 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_nmb11.png);
}

/* oters */
strong {
  font-weight: bold;
}

.a_left {
  float: left;
}

.a_right {
  float: right;
}

.a-center {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 0 0 0;
}

.clear {
  clear: both;
}

.arrow01 {
  padding-left: 10px;
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_arrow01.png) left 0.2em no-repeat;
}

.txt_normal {
  font-weight: normal;
}

.clr_red {
  color: #ff0000;
}

.common-txt {
  font-size: 87%;
  line-height: 1.3em;
}

.txt_mrk {
  vertical-align: text-bottom;
  padding: 0 0.2em;
}

/* ------ h1/h2 ------ */
h1 {
  display: block;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  height: 45px;
  margin-bottom: 15px;
  background-position: 0 0;
  background-repeat: no-repeat;
}

h2 {
  margin: 0 0 10px 10px;
  padding-left: 13px;
  background: url("https://s.yimg.jp/images/calendar/tutorial/z/guide_h2_head.png") left 0.2em no-repeat;
  border-bottom: 1px solid #ff8448;
  font-weight: bold;
}

/* ------ Left menu ------ */
#guide_sub_menu p a,
#guide_sub_menu li,
#guide_sub_menu li a {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/guide_menu_sprite.png");
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: 230px;
}

#guide_sub_menu p a {
  height: 81px;
  background-position: 0 0;
}

#menu01 {
  height: 51px;
  background-position: -460px -81px;
}

#menu01 a {
  height: 51px;
  background-position: 0 -81px;
}

#menu01 a:hover {
  background-position: -230px -81px;
}

#menu02 {
  height: 48px;
  background-position: -460px -132px;
}

#menu02 a {
  height: 48px;
  background-position: 0 -132px;
}

#menu02 a:hover {
  background-position: -230px -132px;
}

#menu03 {
  height: 48px;
  background-position: -460px -180px;
}

#menu03 a {
  height: 48px;
  background-position: 0 -180px;
}

#menu03 a:hover {
  background-position: -230px -180px;
}

#menu04 {
  height: 48px;
  background-position: -460px -228px;
}

#menu04 a {
  height: 48px;
  background-position: 0 -228px;
}

#menu04 a:hover {
  background-position: -230px -228px;
}

#menu05 {
  height: 54px;
  background-position: -460px -276px;
}

#menu05 a {
  height: 54px;
  background-position: 0 -276px;
}

#menu05 a:hover {
  background-position: -230px -276px;
}

#menu06 {
  height: 43px;
  background-position: -460px -330px;
}

#menu06 a {
  height: 43px;
  background-position: 0 -330px;
}

#menu06 a:hover {
  background-position: -230px -330px;
}

#menu07 {
  height: 54px;
  background-position: -460px -373px;
}

#menu07 a {
  height: 54px;
  background-position: 0 -373px;
}

#menu07 a:hover {
  background-position: -230px -373px;
}

#menu08 {
  height: 54px;
  background-position: -460px -427px;
}

#menu08 a {
  height: 54px;
  background-position: 0 -427px;
}

#menu08 a:hover {
  background-position: -230px -427px;
}

#menu08c a {
  height: 54px;
  background-position: -460px -427px;
}

#menu09 {
  height: 38px;
  background-position: -460px -481px;
}

#menu09 a {
  height: 38px;
  background-position: 0 -481px;
}

#menu09 a:hover {
  background-position: -230px -481px;
}

#menu10 {
  height: 40px;
  background-position: -460px -519px;
}

#menu10 a {
  height: 40px;
  background-position: 0 -519px;
}

#menu10 a:hover {
  background-position: -230px -519px;
}

/*
1.Guide TOP
------------------------------*/
/* === yj950-1 === */
body#guide_top div#wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}

body#guide_top div#header, body#guide_top div#contents, body#guide_top div#footer {
  margin: 0 auto;
  padding: 0 10px;
  width: 950px;
}

body#guide_top #contents-body span.yj-guid {
  float: none;
  display: block;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  width: 0;
}

body#guide_top div#contents_wrbg {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_bg01_v2.png) left top repeat-x;
}

body#guide_top h2, body#guide_top h3 {
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  margin: 0;
}

body#guide_top div#guide_top_main {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) left -170px no-repeat;
  min-height: 370px;
  _height: 370px;
}

body#guide_top div#guide_top_main h1, div#guide_top_main h2 {
  background: none;
  text-indent: -9999px;
  overflow: hidden;
  display: none;
}

body#guide_top div#guide_top_main div#text_area {
  width: 610px;
  float: right;
  margin-top: 75px;
  line-height: 1.4;
  font-size: 91%;
}

body#guide_top div#guide_top_main div#text_area p {
  margin-bottom: 10px;
}

body#guide_top div#guide_top_main div#text_area dl {
  float: left;
  font-size: 94%;
  margin-bottom: 5px;
}

body#guide_top div#guide_top_main div#text_area dl.left {
  margin-right: 20px;
  width: 270px;
}

body#guide_top div#guide_top_main div#text_area dl.right {
  width: 320px;
}

body#guide_top div#guide_top_main div#text_area dl dt {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) no-repeat;
  margin-bottom: 5px;
  width: 270px;
  height: 23px;
  text-indent: -9999px;
}

body#guide_top div#guide_top_main div#text_area dl.left dt {
  background-position: -950px -42px;
}

body#guide_top div#guide_top_main div#text_area dl.right dt {
  background-position: -950px -89px;
}

body#guide_top div#guide_top_main div#text_area dl dd {
  margin-bottom: 10px;
  padding: 0 5px;
}

body#guide_top div#guide_top_main div#text_area dl dd.image {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) no-repeat;
}

body#guide_top div#guide_top_main div#text_area dl.left dd.image {
  background-position: -1250px 0px;
  width: 250px;
  height: 160px;
  margin: 10px auto;
  text-indent: -9999px;
}

body#guide_top div#guide_top_main div#text_area dl.right dd.image {
  background-position: -1237px -200px;
  width: 306px;
  height: 160px;
  margin: 10px auto;
  text-indent: -9999px;
}

body#guide_top div#box_wr {
  border-left: 1px solid #c1c564;
  border-right: 1px solid #c1c564;
  background-color: #fffff5;
  position: relative;
  margin: 10px 0 17px 0;
  zoom: 1;
}

body#guide_top div#box_wr dl.BottomBox {
  padding: 10px 10px 3px 10px;
}

body#guide_top div#box_wr dl.BottomBox dd {
  margin-top: -0.5em;
}

body#guide_top div#box_wr dl.BottomBox dd span {
  float: right;
  *zoom: 1;
}

body#guide_top dl.BottomBox dd span img {
  margin-right: 5px;
}

body#guide_top div#box_wr span#t_rbox, div#box_wr span#b_rbox {
  display: block;
  font-size: 0;
  position: absolute;
  height: 7px;
  width: 414px;
}

body#guide_top span#t_rbox {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) left -151px no-repeat;
  left: -1px;
}

body#guide_top span#b_rbox {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) -417px -151px no-repeat;
  left: -1px;
}

body#guide_top h2.guide_h200 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) left top no-repeat;
  width: 936px;
  height: 44px;
  border: 1px solid #cfcfcf;
  margin: 0px 0 0 12px;
}

body#guide_top div.box_wr02 {
  margin: 20px 14px 0 34px;
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_bg03.png) left -1px repeat-y;
}

body#guide_top div.box_bgt02 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_bg03.png) -902px top no-repeat;
  padding-top: 5px;
  zoom: 1;
}

body#guide_top div.box_bgb02 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_bg03.png) -1804px bottom no-repeat;
  padding-bottom: 5px;
  position: relative;
  zoom: 1;
}

body#guide_top div.box_wr02 div.textBox_wr {
  width: 435px;
  float: left;
  margin-left: 3px;
  color: #484848;
}

body#guide_top div.box_wr02 div.textBox_wr_rco {
  width: 435px;
  float: left;
  margin-right: 3px;
  float: right;
}

body#guide_top div.box_wr02 dl.textBox {
  padding-bottom: 35px;
  min-height: 90px;
}

body#guide_top div.box_wr02 dl.textBox dt {
  width: 263px;
  height: 41px;
  background-image: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_list.png);
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
  top: -16px;
}

body#guide_top div.box_wr02 dl#textBox01 dt {
  background-position: 0 -5px;
  left: -12px;
}

body#guide_top div.box_wr02 dl#textBox02 dt {
  background-position: -281px -5px;
  left: 448px;
}

body#guide_top div.box_wr02 dl#textBox03 dt {
  background-position: -587px -5px;
  left: -12px;
}

body#guide_top div.box_wr02 dl#textBox04 dt {
  background-position: -882px -5px;
  left: 448px;
}

body#guide_top div.box_wr02 dl.textBox dd.image {
  background-image: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png);
  background-repeat: no-repeat;
  position: absolute;
  text-indent: -9999px;
}

body#guide_top div.box_wr02 dl#textBox01 dd.image {
  background-position: -970px -149px;
  width: 88px;
  height: 105px;
  top: 22px;
  left: 325px;
}

body#guide_top div.box_wr02 dl#textBox02 dd.image {
  background-position: -970px -430px;
  width: 126px;
  height: 103px;
  top: 14px;
  right: 8px;
}

body#guide_top div.box_wr02 dl#textBox03 dd.image {
  background-position: -970px -296px;
  width: 108px;
  height: 91px;
  top: 22px;
  left: 315px;
}

body#guide_top div.box_wr02 dl#textBox04 dd.image {
  background-position: -1078px -149px;
  width: 82px;
  height: 85px;
  top: 24px;
  right: 30px;
}

body#guide_top div.box_wr02 dl.textBox dd.Text {
  padding: 30px 0 15px;
  margin: 0 140px 0 15px;
  font-size: 87%;
  line-height: 1.5em;
}

body#guide_top div.box_wr02 dl.textBox dd span {
  font-weight: bold;
}

body#guide_top div.box_wr02 dl.textBox dd.btn_detail {
  position: absolute;
  bottom: 15px;
}

body#guide_top div.box_wr02 dl.textBox dd.btn_detail a {
  display: block;
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) -970px 0 no-repeat;
  width: 159px;
  height: 30px;
  text-indent: -9999px;
  overflow: hidden;
  margin-left: 135px;
}

body#guide_top div.box_wr02 dl.textBox dd.btn_detail a:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

body#guide_top h3.guide_h300 {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_sprite_v3.png) left -54px no-repeat;
  width: 936px;
  height: 33px;
  border: 1px solid #cfcfcf;
  margin: 20px 0 0 12px;
}

body#guide_top div.box_wr03 {
  border: 1px solid #cfcfcf;
  border-top: none;
  padding: 2px;
  margin-left: 12px;
  font-size: 87%;
  line-height: 1.3em;
}

body#guide_top div.box_wr03 dl {
  display: block;
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_top_bg02.png) left bottom repeat-x;
  padding: 10px 0 10px 20px;
  zoom: 1;
}

body#guide_top div.box_wr03 dl dd {
  margin-top: 10px;
}

body#guide_top div.box_wr03 li {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_arrow02.png) left 0.2em no-repeat;
  padding-left: 13px;
  margin-left: 20px;
  margin-bottom: 0.35em;
}

body#guide_top div.box_wr03 li.lft_list {
  margin-left: 0;
}

p#foot_calendar {
  text-align: center;
  margin: 20px 0 10px;
}

/* list order */
body#guide_top .box_wr03 ul {
  width: 240px;
  float: left;
}

body#guide_top .box_wr03 ul li {
  margin-left: 10px;
}

body#guide_top .box_wr03 ul.ul_second {
  width: 290px;
}

body#guide_top .box_wr03 ul.ul_third {
  width: 360px;
}

body#guide_top .box_wr03 ul.ul_third li.sub_li {
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide_list01.png) left 0.2em no-repeat;
  font-size: 90%;
  margin-left: 20px;
  padding-left: 20px;
}

/*
2.Addition of schedule
------------------------------*/
.guide_h102,
.g02_cap01,
.g02_cap02,
.g02_cap03,
.g02_cap04 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide02_sprite.png");
}

.g02_cap01 {
  height: 78px;
  background-position: 0 -45px;
}

.g02_cap02 {
  height: 387px;
  background-position: 0 -123px;
}

.g02_cap03 {
  height: 340px;
  background-position: 0 -510px;
}

.g02_cap04 {
  height: 144px;
  background-position: 0 -850px;
}

/*
3.Edit and deletion of schedule
------------------------------*/
.guide_h103,
.g03_cap01,
.g03_cap02,
.g03_cap03,
.g03_cap04 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide03_sprite.png");
}

.g03_cap01 {
  height: 150px;
  background-position: 0 -45px;
}

.g03_cap02 {
  height: 131px;
  background-position: 0 -195px;
}

.g03_cap03 {
  height: 131px;
  background-position: 0 -326px;
}

.g03_cap04 {
  height: 139px;
  background-position: 0 -457px;
}

/*
4.Addition of work(To do)
------------------------------*/
.guide_h104,
.g04_cap01,
.g04_cap02 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide04_sprite.png");
}

.g04_cap01 {
  height: 241px;
  background-position: 0 -45px;
}

.g04_cap02 {
  height: 224px;
  background-position: 0 -300px;
}

/*
5.Edit and deletion of work
------------------------------*/
.guide_h105,
.g05_cap01 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide05_sprite.png");
}

.g05_cap01 {
  height: 263px;
  background-position: 0 -45px;
}

/*
6.Synchronization
------------------------------*/
.guide_h106,
.g06_cap01,
.g06_cap02 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide06_sprite.png");
}

/*.g06_cap01{width:675px;height:336px;background-position:0 -45px;}*/
.g06_cap01 {
  width: 675px;
  height: 380px;
  background-position: 0 -45px;
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/v4/caldav_setting_img.png) 0 0 no-repeat;
  margin-left: 10px;
}

.g06_cap02 {
  height: 544px;
  background-position: 0 -381px;
}

.guide_clrbg01 {
  margin-left: 20px;
  margin-bottom: 5px;
  padding: 20px 15px 20px 50px;
  background: #e5f6ff url(https://s.yimg.jp/images/calendar/tutorial/z/guide06_mrk01.png) 15px 10px no-repeat;
}

.guide_clrbg01 ul {
  _margin-top: -10px;
}

.guide_clrbg01 li {
  margin-top: 10px;
  padding-left: 15px;
  background: url(https://s.yimg.jp/images/calendar/tutorial/z/guide06_mrk02.png) left 0.4em no-repeat;
}

.guide_clrbg01 li:first-child {
  margin-top: 0;
}

.guide_clrbg02 {
  margin-left: 20px;
  padding: 15px 15px 15px 50px;
  background: #fff1f5 url(https://s.yimg.jp/images/calendar/tutorial/z/guide06_mrk03.png) 15px 13px no-repeat;
}

/*
7.Two or more calendars
------------------------------*/
.guide_h107,
.g07_cap01,
.g07_cap02,
.g07_cap03,
.g07_cap04,
.g07_cap05,
.g07_cap06,
.g07_cap07,
.g07_cap08,
.g07_cap09 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide07_sprite.png");
}

.g07_cap01 {
  height: 358px;
  background-position: 0 -45px;
}

.g07_cap02 {
  width: 395px;
  height: 195px;
  background-position: 0 -403px;
}

.g07_cap03 {
  width: 374px;
  height: 224px;
  background-position: 0 -597px;
}

.g07_cap04 {
  width: 374px;
  height: 224px;
  background-position: 0 -821px;
}

.g07_cap05 {
  height: 356px;
  background-position: 0 -1045px;
}

.g07_cap06 {
  width: 564px;
  height: 195px;
  background-position: 0 -1401px;
}

.g07_cap07 {
  width: 511px;
  height: 239px;
  background-position: 0 -1596px;
}

.g07_cap08 {
  width: 538px;
  height: 413px;
  background-position: 0 -1835px;
}

.g07_cap09 {
  width: 480px;
  height: 219px;
  background-position: 0 -2248px;
}

/*
8.Grouping
------------------------------*/
.guide_h108,
.g08_cap01,
.g08_cap02,
.g08_cap03,
.g08_cap04 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide08_sprite.png");
}

.g08_cap01 {
  height: 214px;
  background-position: 0 -45px;
}

.g08_cap02 {
  height: 194px;
  background-position: 0 -282px;
}

.g08_cap03 {
  height: 164px;
  background-position: 0 -535px;
}

.g08_cap04 {
  height: 199px;
  background-position: 0 -698px;
}

/*
9.One screen
------------------------------*/
.guide_h109,
.g09_cap01,
.g09_cap02 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide09_sprite.png");
}

.g09_cap01 {
  height: 436px;
  background-position: 0 -45px;
}

.g09_cap02 {
  height: 383px;
  background-position: 0 -481px;
}

.frame_w680 {
  margin-left: 20px;
  padding: 13px 20px;
  border: 1px solid #cccccc;
  background: #ededed;
}

/*
10.Registration button
------------------------------*/
.guide_h110,
.g10_cap01 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide10_sprite.png");
}

.g10_cap01 {
  width: 400px;
  height: 337px;
  background-position: 0 -45px;
}

.frame_w400 {
  width: 358px;
  margin: 0 auto 20px;
  padding: 13px 20px;
  border: 1px solid #cccccc;
  background: #ededed;
}

/*
11.Using the form
------------------------------*/
.guide_h111 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide11_sprite.png");
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

.form_tbl01 {
  width: 100%;
  border-collapse: collapse;
  border: #b6b6b6 solid 1px;
  font-size: 87%;
  line-height: 1.3em;
}

.form_tbl01 th,
.form_tbl01 td {
  padding: 13px;
  border-bottom: #b6b6b6 dotted 1px;
}

.form_tbl01 th {
  width: 30%;
  background: #eee;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
}

span.show1up {
  display: inline-block;
  margin-top: -4px;
  margin-left: 5px;
  vertical-align: middle;
}

input.type1 {
  width: 150px;
}

input.type2 {
  width: 200px;
}

input.type3 {
  width: 300px;
}

select.type4 {
  margin-right: 6px;
}

input.calendarInput {
  margin-right: 5px;
}

textarea.description {
  width: 300px;
  height: 100px;
}

input.image01, input.image02 {
  height: 24px;
  margin-right: 8px;
  margin-bottom: 7px;
}

input.others, input.yblog {
  margin-right: 5px;
}

div.button {
  margin: 5px auto;
  text-align: center;
}

button.submit {
  margin: 10px auto;
}

div.sourseBox {
  padding: 5px 0px 20px;
  margin-bottom: 10px;
  text-align: left;
  border: #b6b6b6 solid 1px;
}

div.sourseBoxShow {
  display: block;
}

textarea.sourse {
  height: 150px;
  width: 380px;
  float: left;
  margin: 0 0 0 20px;
}

div.sampleModule {
  background: #fff;
  border: 1px solid #aaa;
  float: left;
  height: 150px;
  margin: 0 0 0 20px;
  text-align: center;
  width: 228px;
  position: relative;
}

div.sampleModule .sample_text {
  display: block;
  background: #ffe87e;
  font-weight: bold;
  line-height: 30px;
}

div.sampleModule .sample_image {
  display: inline-block;
  padding-top: 45px;
  color: #7b7b7b;
}

.txt_org {
  margin-bottom: 10px;
  color: #ff671c;
  font-weight: bold;
  text-align: center;
}

/*
12.Making of HTML tag
------------------------------*/
.jsoff {
  background: #ffd;
  border: 1px solid #f03;
  clear: both;
  color: #f03;
  margin: 10px auto;
  padding: 10px;
}

.jsoff p {
  margin: 0;
}

.guide_h112 {
  background-image: url("https://s.yimg.jp/images/calendar/tutorial/z/v4/guide12_sprite.png");
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

.frame_bdr01 {
  margin-left: 20px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #cccccc;
  word-break: break-all;
}

.guide_tbl01 {
  width: 100%;
  margin-bottom: 5px;
  border-collapse: collapse;
  border: #b6b6b6 solid 1px;
}

.guide_tbl01 th,
.guide_tbl01 td {
  padding: 10px;
  border: 1px solid #cccccc;
  word-break: break-all;
}

.guide_tbl01 th {
  background: #ededed;
  text-align: center;
}

/*
12-1.Making of HTML tag hide
------------------------------*/
tr.putPlace td,
tr.putPlace th {
  border-bottom: none !important;
}

td.hideOuter {
  padding: 0;
  border-bottom: none !important;
}

.hidewrrap {
  overflow: hidden;
}

.hidewrrap .hidetd {
  width: 100%;
}

.subArea {
  width: 100%;
}

.subArea th, .subArea td {
  border-bottom: none !important;
  border-top: 1px dotted #B6B6B6 !important;
}

span.timer {
  margin: 0 10px;
}