@charset "utf-8";

/************
第２階層CSS
************/
/* 共通
------------------------------------------------------------*/
#title{
  background-position:center ;
  background-size:cover;
	width:100%;
  padding: 10px 0;
  color: #fff;
}
#title h2{
  text-align: center;
  letter-spacing: 0.4em;
  font-size: 30px;
  /* white-space: nowrap; */
}
.policy {
  /* background: url("../images/title-2.jpg") no-repeat; */
  background: url("../images/title.png") no-repeat;
}
.homepage {
  /* background: url("../images/title-2.jpg") no-repeat; */
  background: url("../images/title.png") no-repeat;
}
.event {
  /* background: url("../images/title-2.jpg") no-repeat; */
  background: url("../images/eventTitle.png") no-repeat;
}
.des-section{
  padding: 30px 25px 0 25px;
  width: 100%;
}
.l-section{
  text-align: center;
  line-height:2em;
  background: #f4f4f4;
  margin: 50px 0;
}
.m-section{
  width: 80%;
  padding: 20px 0;
  margin:0 auto;
  word-wrap: break-word;
}
.m-section h3{
  font-size: 23px;
  color: #339900;
  position: relative;
  display: block;
  margin-bottom: 1em;
}
/*下線*/
.m-section h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 50px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #339900;/*線の色*/
}
.m-section h4{
  font-size: 16px;
  position: relative;
  display: block;
  margin-bottom: 1em;
  text-align: left;
  text-decoration : underline;
}
/* 箇条書き */
.m-section ol{
  list-style-type: decimal;
  margin:20px auto;
  text-align: left;
  display: inline-block;
}
/* 罫線 */
.m-section hr{
  margin-bottom: 20px;
}
/* ボタン */
.btm{
	width: 230px;
	height: 50px;
	position: relative;
  border: solid 1px #ccc;
  background: #fff;
  opacity: 0.8;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin:0 auto;
}
.btm:hover{
  background: #0a3a72;
}
.m-section a{
  color: #339900;
}
.m-section a:hover{ color:#0a3a72;  }
/* .m-section a:visited {	color: #339933; } */

/* テキスト左寄せ */
.text-l{
  text-align:left;
}
/* テキスト右寄せ */
.text-r{
  text-align:right;
}

/* テキスト 赤文字 */
.text-red{
  color: red;
  font-weight: bold;
}

.sectionImg img{
	width:100%;
	height:auto;
}

/* マンガで見る制作費の違い pricecomic.html
------------------------------------------------------------*/
.comic-img {
 display: block !important;
}
.comic-img  img {
  vertical-align: bottom;
  width: 100%;
}
.comic-img-sp {
display: none !important;
}
.comic-img-sp  img {
  vertical-align: bottom;
}

/* テーブルのスタイル
------------------------------------------------------------*/
.pay_table_style {
	border-collapse:collapse;
	margin: 20px 10px;
  text-align: center;
  width: 100%;
}
.pay_table_style th{
  border: 1px solid #333d26;
	background: linear-gradient( to top,#A4CB67,#339900);
  color: #fff;
	font-size:16px;
	font-weight:bold;
	padding-top: 7px;
	padding-bottom: 2px;
	text-decoration: none;
}
.pay_table_style td {
  padding-left: 10px;
	border:1px #333d26 solid;
	padding-top: 5px;
	padding-bottom: 5px;
  background: #fff;
}
.pay_table_style tr td:nth-of-type(2),
.pay_table_style tr td:last-child{
  padding-right: 10px;
}
/* 決算 ・ 消費税 */
.pay_table {
	border-collapse:collapse;
	margin: 20px 10px;
  width: 100%;
}
.pay_table th{
  border:1px #77d6fd solid;
	padding-top: 5px;
	padding-bottom: 5px;
  background-color: #bceaff;
  text-align: left;
  color: #140295;
}
.pay_table td {
	font-size:16px;
	border:1px #77d6fd solid;
	padding-top: 5px;
	padding-bottom: 5px;
  background: #fff;
	padding-left: 10px;
  text-align: left;
}

/* 事務所概要 campany.html
------------------------------------------------------------*/
.company_table {
  text-align: left;
	border-collapse:collapse;
	margin: 20px auto;
  width: 100%;
}
.company_table th {
  display: block;
}
.company_table td {
  padding-left: 30px;
}
.company_style {
  clear: both;
  padding: 2px 0 5px 15px;
  margin: 10px 0 25px 30px;
	margin-block-end: 0;
  border-left: 2px solid #571E00;
}

/* サイトマップ sitemap.html
------------------------------------------------------------*/
#sitemapBox div{
  display: inline-block;
  vertical-align:  top;
  width: 48%;
  margin: 30px 0;
}
#sitemapBox ul {
  text-align: left;
}
#sitemapBox ul li ul li{
  clear: both;
  padding: 2px 0 5px 10px;
  margin: 10px 0 10px 5px;
	margin-block-end: 0;
  border-left: 1px solid #ddd;
}

/* お問い合わせ otoiawase.html
------------------------------------------------------------*/
.contact_table_style {
	border-collapse:collapse;
	margin: 0 10px;
  text-align: left;
  width: 100%;
}
.contact_table_style th{
  border: 1px solid #000;
	background: #339900;
	font-size:16px;
	font-weight:bold;
	padding: 7px 0 5px 15px;
	color: #fff;
	text-decoration: none;
}
.contact_table_style td {
  padding-left: 10px;
	border:1px solid;
	padding-top: 5px;
	padding-bottom: 5px;
  background: #fff;
}
.contact_table_style textarea{
  width:90%;
  height:30%;
}

.right-text{
  text-align: right;
}

/* tablet,スマホ用
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
  #title{
    padding: 10px 0;
  }
  .policy {
  /* background: url("../images/title-2-sp.jpg") no-repeat; */
  background-color: #339900;
}
.homepage {
  /* background: url("../images/title-2-sp.jpg") no-repeat; */
  background-color: #339900;
}
  .m-section{
    width: 90%;
  }
  .m-section img{
    width:100%;
  }
/**マンガ**/
.comic-img {
 display: none !important;
}
.comic-img-sp {
display: block !important;
}
/**事務所概要**/
  .company_table th,.company_table td {
    display: block;
    width: 100%;
  }
  .company_table td {
    padding: 0 50px;
  }
/**お問い合わせ ***/
  .contact_table_style th,.contact_table_style td {
    display: block;
    width: 100%;
  }
  .contact_table_style td {
    padding: 8px 20px;
  }
  .width_sp {
    width: 90%;
  }
/** サイトマップ */
  #sitemapBox div{
    display: block;
    width: 100%;
  }
}
.eventImg img{
  width: 90%;
}
.eventImgHafe img{
  width: 45%;
}
@media only screen and (max-width:768px){
  .eventImg img,.eventImgHafe img{
    width: 100%;
  }
}


/* パートナーさんのご紹介 intro.html
------------------------------------------------------------*/
.intro_flex{
  display: flex;
  text-align: left;
}

.intro_img_click input {
  display: none;
}
.intro_img_click input + img{
  width: 80%; 
  cursor: pointer;
  padding: 0 1em 0 0;
}
.intro_img_click input + img.h_img {
  cursor: pointer;
  height: 320px;
  width: auto;
}
.intro_img_click input:checked + img {
  width: 100%;
}
.intro_img_click input:checked + img.h_img {
  height: auto; 
}

.manga_flex{
  display: flex;
  align-items:flex-end;
  flex-wrap: wrap;
  justify-content:center;
}
.manga_flex img {
  width: 190px;
  text-align: center;
  padding-right: .5em;
}

@media only screen and (max-width:1024px){
  .intro_flex{
    display: block;
    text-align: center;
  }
  
  .intro_img_click input + img,.intro_img_click input + img.h_img {
    height: auto;
    width: 70%;
  }
  /* .intro_img_click input:checked + img.h_img {
    height: auto;
    width: 80%;
  } */
  .intro_img_click input:checked + img {
    width: 100%;
  }
}

/* 自動見積もり estimate.php
------------------------------------------------------------*/
.estimate-section{
  padding: 1em;
  border: 1px solid #eee;
  margin-bottom: 3em;
}
.small_font{
  font-size: 13px;
  font-weight: normal;
}
.err_msg{
  color: red;
}
.estimate_btn{
  font-size: 17px;
  padding: .5em 1em;
  background-color: #339900;
  color: #fff;
  border: none;
  width: 200px;
  max-width: 70%;
  letter-spacing: .2em;
}
.estimate_btn:hover{
  opacity: .7;
}
.estimate_title{
  font-size: 25px;
  text-align: center;
  margin: 50px 0;
}
.estimate_name{
  font-size: 25px;
}
.total_price{
  font-size: 18px;
  font-weight: bold;
  display: flex;
  text-align: center;
}
.total_price dt{
  background-color: #339900;
  color: #fff;
  width: 150px;
  max-width: 30%;
  padding: .3em;
}
.total_price dd{
  border: 1px solid #ddd;
  margin: 0;
  width: 250px;
  max-width: 70%;
  padding: .3em;
}

.estimate_table_style {
	border-collapse:collapse;
	margin: 20px 0 50px;
  text-align: left;
  width: 100%;
}
.estimate_table_style thead th{
  background-color: #339900;
  color: #fff;
  text-align: center;
  padding: .5em 1em;
  letter-spacing: 1em;
}
.estimate_table_style th{
  border: 1px solid #ddd;
	background: #eee;
	padding: .5em 1em;
}
.estimate_table_style tbody tr th.green{
  background: #339900;
  color: #fff;
  letter-spacing: 1em;
  text-align: center;
  font-size: 16px;
}
.estimate_table_style td {
	border:1px solid #ddd;
  padding: .5em 1em;
  text-align: right;
}
.estimate_table_style tbody td:nth-child(2){
  text-align: center;
}
.estimate_table_style tbody tr td.txt-right{
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}
.print-off {
  display: none;
}
.print-btn{
  display: block;
  margin: 0 auto 50px;
  text-align: center;
}
select{
  font-size: 15px;
  min-width: 200px;
  height: 30px;
  border-radius: 0 ;
  border: 1px solid #666666;
}