@charset: 'shift_jis';



/*---------- ページ全体の指定 ----------*/

* {
  box-sizing: border-box;
}

a:link {
  /*font-size: 12px;*/
  color: #00f;
  border-bottom: 1px solid #00f;
}

a:hover {
  /*font-size: 12px;*/
  color: #00f;
  border-bottom: none;
}

a:visited {
  /*font-size: 12px;*/
  color: #00f;
}

ul {
  list-style: none;
}

img {
  display: block;

  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;

  vertical-align: bottom;
}

a img:hover {
  opacity: .7;
}

.jibunshi-contents ul {
  padding: .5em 5px 1em;
}

.jibunshi-contents li {
  padding: .25em ;
}

body {
  font-family: Verdana, '游ゴシック', YuGothic, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 16px;

  max-width: 650px;
  margin: 0 auto;

  letter-spacing: 0;

  color: #333;
  background: #fff;

  -webkit-text-size-adjust: 100%;
}

input[type=submit] {
  font-family: FontAwesome/*FontAwesomeをフォント指定*/
  ;
}



/*---------調整クラス----------*/

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.small {
  font-size: 75%;
}

.bold {
  font-weight: bold;
}

.del {
  font-size: .7rem;

  text-decoration: line-through;
}

.red {
  color: #c93a40;
}

.pink {
  color: #ff7794;
}

.orange {
  color: #f60;
}

.fzxl {
  font-size: 1.5rem;
}

.fzl {
  font-size: 1.2rem;
}

.fzs {
  font-size: .7rem;
}

.mt1r {
  margin-top: 1rem;
}


.ml1r {
  margin-left: 1rem;
}

.ml2r {
  margin-left: 2rem;
}

.mr1r {
  margin-right: 1rem;
}

.mr2r {
  margin-right: 2rem;
}

.mb1r {
  margin-bottom: 1rem;
}

.mb2r {
  margin-bottom: 2rem;
}

.m1r {
  margin: 1rem;
}

.p1r {
  padding: 1rem;
}

.pl1r {
  padding-left: 1rem;
}

.pb1r {
  padding-bottom: 1rem;
}

.m0-a {
  margin: 0 auto;
}


.dblock {
  display: block;
}

.dinline {
  display: inline;
}

.dinlineb {
  display: inline-block;
}

.dflex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.odr1 {
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  -o-order: 1;
  order: 1;
}

.odr2 {
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  -o-order: 2;
  order: 2;
}

.bdn {
  border: none;
}

.ofh {
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.bgct {
  background-color: transparent;
}

.bt {
  border-top: 2px solid #eaeaea;
}


.uline-blue {
  border-bottom: 1px solid #05a9c5;
}


/*-------自分史メニュー部分---------*/

.jibunshi-menu {
  background: #048782;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #048782 0%, #42a2aa 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #048782 0%, #42a2aa 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #048782 0%, #42a2aa 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#048782', endColorstr='#42a2aa', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.jibunshi-menu ul {
font-size: 0;
}

.jibunshi-menu li {
  border: 1px solid #ccc;
  text-shadow: 1px 1px 2px #000;
display: inline-block;
width: 50%;
font-size: 1rem;
}

.jibunshi-menu a {
  font-size: 1rem;

  display: block;

  text-align: center;
  text-decoration: none;

  color: #fff;
  border: none;
}



/*-------見出し部分---------*/



/*h2.jibun-h2 {
  font-size: 1.3rem;

  margin-bottom: 2rem;

  text-align: center;

  background-color: rgba(255, 255, 255, .8);
}
*/
h2.jibun-sougi-h2 {
  line-height: 1.8rem;

  margin-right: .7rem;
  margin-left: .7rem;
  padding: .4rem .6rem;

  border-bottom: 1px solid #05a9c5;
  border-left: 10px solid #05a9c5;
  background-color: rgba(255, 255, 255, .8);
}
h2.jibun-sougi-h2 span {
  color: #f00;
}

/*----------メイン部分----------*/

main {
  max-width: 650px;
  margin: 0 auto;
}

.jibunshi-contents {
  padding-bottom: 1rem;
  padding-top: 1rem;

  background-image: url(../img/jibun-bg-moto.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
}


.block {
  line-height: 1.5rem;

  overflow: hidden;

  margin: 0 .7rem .7rem .7rem;
  /*  border-right: 2px solid#eaeaea;
  border-bottom: 2px solid#eaeaea;
  border-left: 2px solid#eaeaea;*/
  background-color: rgba(255, 255, 255, .8);
}


.jibunshi-pan ul {
  line-height: .9rem;
  background-color: #D9F0C1;
}

.jibunshi-pan li {
  font-size: .8rem;

  display: inline;

  margin: 0;
}

.jibunshi-pan li a {
  border-bottom: none;
}


.jibunshi-merit ul {
  padding: .5em 5px 1em;
}

.jibunshi-merit ul li {
  /*border-bottom: 1px solid #333;*/
}


.jibunshi-merit ul li:before {
  margin-right: .3rem;
  padding-left: 1rem;

  content: '\02714';

  color: red;
}

.block-link {
  display: block;

  padding: 0 1rem 1rem 1rem;

  text-align: right;
}




/*-----カウンター-----*/

.counter {
  font-size: .8em;

  text-align: center;
}

.counter img {
  display: inline;

  vertical-align: bottom;
}




/*---------フッター部分---------*/

.jibun-footer {
  background-image: url(../img/jibun-bg-moto.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
}

.jibun-footer .footer-address {
  line-height: 1.5;

  background-color: rgba(255, 255, 255, .8);
}

.jibun-footer .counter {
  background-color: #b2c480;
}




/*----------------------------------------------- ここから各ページの
デザイン -----------------------------------------------*/


/*-----自分史とはページ-----*/

.jibunshi-toha-list li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

  margin-bottom: 1rem;

  border: 1px solid #b2c480;
}


.jibunshi-toha-list div {
  -webkit-flex: 0 0 30%;
  -moz-flex: 0 0 30%;
  -ms-flex: 0 0 30%;
  -o-flex: 0 0 30%;
  flex: 0 0 30%;
}

.jibunshi-toha-list p {
  font-size: .8rem;
  line-height: 1rem;

  padding-bottom: 0;

  -webkit-flex: 0 0 70%;
  -moz-flex: 0 0 70%;
  -ms-flex: 0 0 70%;
  -o-flex: 0 0 70%;
  flex: 0 0 70%;
}


/*----------特徴と活用方法ページ----------*/
.checkbox-list li:before{
  content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 1rem;/*画像の幅*/
    height: 1rem;/*画像の高さ*/
    background-image: url(../../mm_img/checkbox.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
    margin-left: .5rem;
}

/*----------メニューご案内ページ----------*/

.jibun-sougi-menupage {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.jibun-sougi-menupage p {
  -webkit-flex: 0 0 65%;
  -moz-flex: 0 0 65%;
  -ms-flex: 0 0 65%;
  -o-flex: 0 0 65%;
  flex: 0 0 65%;
}

.jibun-sougi-menupage .menupage-img {
  margin-top: 1rem;
  padding-right: 1rem;

  -webkit-flex: 0 0 35%;
  -moz-flex: 0 0 35%;
  -ms-flex: 0 0 35%;
  -o-flex: 0 0 35%;
  flex: 0 0 35%;
  -ms-align-self: flex-start;
  align-self: flex-start;
}



/*----------制作後の活用例ページ----------*/

.jibun-katsuyoupage .block {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

  align-content: center;
}

.jibun-katsuyoupage .block p {
  -webkit-flex: 0 0 70%;
  -moz-flex: 0 0 70%;
  -ms-flex: 0 0 70%;
  -o-flex: 0 0 70%;
  flex: 0 0 70%;
}

.jibun-katsuyoupage .block img {
  -webkit-flex: 0 0 30%;
  -moz-flex: 0 0 30%;
  -ms-flex: 0 0 30%;
  -o-flex: 0 0 30%;
  flex: 0 0 30%;
  -ms-align-self: flex-start;
  align-self: flex-start;
}



/*----------完成までの流れページ----------*/

.jibun-nagarepage .block {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

  align-content: center;
}

.jibun-nagarepage .block img {
  width: 20%;
  padding: 1rem;

  -webkit-flex: 0 0 20%;
  -moz-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  -o-flex: 0 0 20%;
  flex: 0 0 20%;
  -ms-align-self: flex-start;
  align-self: flex-start;
}

.jibun-nagarepage .block p {
  -webkit-flex: 0 0 80%;
  -moz-flex: 0 0 80%;
  -ms-flex: 0 0 80%;
  -o-flex: 0 0 80%;
  flex: 0 0 80%;
}



/*----------ご挨拶と会社概要ページ----------*/

.company-info table {
  margin: 1rem auto 1rem auto;
  padding-bottom: 1rem;
  width: 95%;

  border-collapse: collapse;

  text-align: left;
}
.company-info th{

background-color: #ffffe8;
width: 30%;
}
.company-info th,
.company-info td {
  padding: .5rem;

  border: 1px solid #000;
}



/*----------他の自分史との違いページ----------*/

.difference-table {
  margin: 0 1rem 1rem 1rem;
  padding-bottom: 1rem;

  border-collapse: collapse;

  text-align: left;
}

.difference-table th,
.difference-table td {
  padding: .3rem;

  border: 1px solid #000;
}

tr.diff-media {
  background-color: #e7e7e7;
}


.difference-table td:nth-child(4n) {
  background-color: #ffc3c6;
}

.difference-table th {
  background-color: #ffc;
}



/*----------自分史の制作料金ページ----------*/

.charge-table {
  margin: 0 1rem 1rem 1rem;

  border-collapse: collapse;

  text-align: left;
}

.charge-table th,
.charge-table td {
  padding: .3rem;

  border: 1px solid #000;
}

.charge-table th {
  width: 35%;

  background-color: #ffffe8;
}

.add-service {
  font-size: 1.2rem;
  font-weight: bold;

  display: inline-block;

  padding-bottom: .5rem;

  color: #c93a40;
}


/*----------お申込みページ----------*/

.order-table {
  margin: 0 1rem 1rem 1rem;

  border-collapse: collapse;

  text-align: left;
  text-align: center;
}

.order-table th,
.order-table td {
  padding: .3rem;

  border: 1px solid #000;
}

.order-table th {
  width: 35%;

  background-color: #ffffe8;
}


.jibun-order {
  text-align: center;
}



.jibun-order-select {
  width: 80%;
  padding: 10px;

  border: 1px solid #05a9c5;
  border-radius: 6px;
  background: #eee;
  background: url(../img/arrow.png) 95% 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #efebe1 100%);
  background: url(../img/arrow.png) 95% 50% no-repeat, linear-gradient(to bottom, #fff 0%, #efebe1 100%);
  background-size: 20px, 100%;
}

.jibun-order-submit {
  font-weight: bold;

  position: relative;

  width: 60%;
  margin-top: .5rem;
  margin-bottom: 2rem;
  padding: 10px;

  color: #fff;
  /*border: 1px solid #999;*/
  border-radius: 6px;
  background: #c93a40;
  box-shadow: 0 5px 0 #7d3f42;
}

.jibun-order-submit:hover {
  cursor: pointer;
}

.jibun-order-submit:active {
  top: 5px;

  box-shadow: none;
}

.jibun-nagarepage div {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

  border-bottom: 1px solid #ccc;

  align-content: center;
}

.jibun-nagarepage div img {
  width: 20%;
  padding: 1rem;

  -webkit-flex: 0 0 20%;
  -moz-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  -o-flex: 0 0 20%;
  flex: 0 0 20%;
  -ms-align-self: flex-start;
  align-self: flex-start;
}

.jibun-nagarepage div p {
  -webkit-flex: 0 0 80%;
  -moz-flex: 0 0 80%;
  -ms-flex: 0 0 80%;
  -o-flex: 0 0 80%;
  flex: 0 0 80%;
}



/*----------自分史関連施設ページ----------*/

table.jibun-shisetsu-table {
  width: 95%;
  margin: 0 auto .5rem auto;

  border-collapse: collapse;

  text-align: left;
}

.jibun-shisetsu-table th {
  width: 30%;

  background-color: #ffffe8;
}


.jibun-shisetsu-table th,
.jibun-shisetsu-table td {
  padding: .5rem;

  border: 1px solid #000;
}

.jibun-youtube {
  position: relative;

  width: 100%;
  width: 95%;
  margin: 0 auto;
  padding-top: 56.25%;
}

.jibun-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;

  width: 100% !important;
  height: 100% !important;
  padding-bottom: .5rem;
}



/*----------2017/12/22追加分----------*/
video {
  width: calc(100% - 8px);
  margin: -16px 4px 0;
  border: 6px inset #444;
  border-radius: 10px;
}
.w90per {
  width: 90%;
  margin: auto;
}
.cha {
	color: #8a0808;
}
.merit {
	background: url('../../mm_img/check.png') no-repeat;
	background-size: 24px;
	margin-left: 12px;
	padding-top: 8px;
	padding-left: 24px;
}
.aka {
	color: #f00;
}
.green {
	color: #080;
}
.tdub {
	text-decoration: underline;
}
.try {
	display: table;
	width: 100%;
	max-width: 420px;
	margin: auto auto 6px;
	padding: 4px;
	border: 0 !important;
}
.nowrap {
	white-space: nowrap
}
.go {
	font-weight: bold;
	font-size: 14px;
	line-height: 44px;
	text-align: center;
	border-radius: 18px;
	border: outset 2px #333 !important;
	margin: 8px 16px 16px;
	padding: 0;
	box-shadow: 2px 2px 2px #777;
}
.go a {
	display: block;
	width: 100%;
	height: 48px;
	background: #dfe;
	border: outset 2px #aaa !important;
	border-radius: 16px;
	margin: 0;
	padding: 0;
}