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


/*========= 全体CSS ===============*/

.wrap {
  width：100%;
}
.main {
   flex: 1;
}
.main,
.sidebar {
   margin: 0;
   border-radius: 0;
}

/*共通 */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;/*rem算出をしやすくするために*/
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Roboto, "Droid Sans",sans-serif;
	color: #595757;
}

img{
	vertical-align:bottom;
}

/*画像表示サイズ*/
.shunen{
	width: 400px;
	height: auto;
	border: 0;
	margin: 50px auto 0;
	padding: 0;
}
.onko{
	width: 600px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 0;
}
.title_fives{
	width: 700px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 0;
}

.logo_left{
	width: 516px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 6.5rem 0 0;
	text-align: left !important;
}
.logo_left2{
	width: 516px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 6.5rem 0 0;
	text-align: left !important;
}

@media screen and (max-width:768px) {
.logo_left{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	text-align: left !important;
}
.logo_left2{
	width: 100%;
	height: auto;
	border: 0;
	margin: 2rem auto 0;
	padding: 0;
	text-align: left !important;
}
}


.logo_bw{
	width: 135px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 6.5rem 0 0;
	text-align: left !important;
}
.logo_bw_txt{
	width: 310px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 1.3rem 0 0;
	text-align: left !important;
}
.logo_onko{
	width: 257px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 0;
	text-align: left !important;
}
.logo_onko_txt{
	width: 300px;
	height: auto;
	border: 0;
	margin: 0 auto;
	padding: 0;
	text-align: left !important;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #595757;
  border-radius: 0.5rem;
}

/* 追加：リンク画像ホバー時に半透明に */
a img {
border:none;
verticle-align:top;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover img {
opacity: 0.7;     /* 透過レベル */
filter: alpha(opacity=80);
}

/* アンカーテキストのリンク色 */
a{
color: #7282b2;
text-decoration: none; /*下線消す*/
}

/*訪問済みの色*/
a:visited{
color: #7282b2;
}

/*ホバー時の色*/
a:hover{
text-decoration: none; /*下線出す*/
}

/*クリック時の色*/
a:active{
color: #7282b2;
}



/*========= レイアウトのためのCSS ===============*/

/*段落２段*/
#col p{
	display:block;
	width:840px;
	margin: 0 auto 3rem;
	padding: 0;
	column-count: 2;
	color: #595858;
	font-size: 1.65rem;
	text-align: left;
	line-height: 2.8rem;
	justify-content: space-evenly;
}

#col span.blue{
	color: #7282b2;
	font-weight: bold;
}
#col span.brown{
	color: #96835f;
	font-weight: bold;
}


@media screen and (max-width:768px) {
	#col p{
		width:100%;
		margin: 0 auto;
		column-count: 1;
		justify-content: space-evenly;
	}
}


/*エリア指定*/
#area-1,
#area-9{
	background: #fff9c3;
}
#area-2{
	display: block;
	width: 1000px;
	margin: 0 auto;
	color: #595858;
	background: #fff;
	text-align: left;

}
#area-2 p{
	text-align: justify;
	margin: 0 auto 3rem;
}
@media screen and (max-width:768px) {
#area-2{
	width: 100%;
}
#area-2 p{
	font-size: 1.7rem;
	line-height: 2.4rem;
}
}

#area-3,
#area-4,
#area-6,
#area-8{
	color: #fff;
	background: #7282B2;
	line-height: 7rem;
}

@media screen and (max-width:768px) {
#area-3,
#area-4,
#area-5,
#area-6,
#area-8{
	width: 100%;
}
#area-3 p,
#area-4 p,
#area-6 p,
#area-8 p{
	font-size: 1.7rem;
	line-height: 2.6rem;
	text-align: justify;
}
}

#area-3 h2{
	line-height: 9rem;
}

@media screen and (max-width:768px) {
#area-3 h2{
	line-height: normal;
}
}

#area-5{
	background-image:url(https://bw-inc.co.jp/onko/images/wall.png);
	background-repeat:no-repeat;
	background-position:top;
	background-size: cover;
}

#mailbox,
#area-7{
	background:#fff;
}


/*キラキラ背景表示*/
.bg-kira{
	display: block;
    width: 840px;
    height: auto;
    margin: 0 auto;
	padding: 0;
	line-height: 2rem;
	background-image:url(https://bw-inc.co.jp/onko/images/bg-kira-right.png),
					 url(https://bw-inc.co.jp/onko/images/bg-kira-left.png);
	background-repeat:no-repeat,
					  no-repeat;
	background-position:right top,
						left top;
	color: #9E495B;
}
@media screen and (max-width: 768px) {
.bg-kira{
	width: 100%;
	margin: 0 auto;
	padding: -5rem 0 0;
}
.bg-kira h2{
	display: block;
	width: 100%;
 	font-size: 3rem;
	line-height: 4rem;
	text-align: center;
	margin: 0 auto;
	padding: -5rem 0 0;
	}
}

/*見出し*/
h1,
h2{
	display: block;
	margin: 0 auto;
	padding: 7rem 1rem;
	text-align: center;
	font-weight: bold;
	font-size: 6rem;
}
h2.soushin{
	color: #7282B2;
	font-size: 1.8rem;
	font-weight: normal;
	letter-spacing: 0.5rem;
	line-height: 3rem;
	text-align: center;
	margin: 10px 0 30px;
}
h2.white{
	color: #fff;
	font-size: 3.3rem;
	font-weight: normal;
	letter-spacing: 0.5rem;
	line-height: 5.5rem;
	text-align: center;
	margin: 0 0 30px 0;
}
h2.yellow{
	color: #FFFAC5;
}
h1.blue{
	display: block;
	margin: 0 auto;
	padding: 7rem 1rem;
	text-align: center;
	font-weight: bold;
	font-size: 6rem;
	color: #fff;
	background-color: #7282B2;
}

@media screen and (max-width: 768px) {
h1.blue{
	font-size: 2.6rem;
	text-align:justify;
}
h2.yellow{
	margin: 0 auto;
	padding: 0;
}
}


h2.fives{
	color: #595757;
	font-size: 3.3rem;
	font-weight: normal;
	letter-spacing: 0.5rem;
	line-height: 5.5rem;
	text-align: center;
	margin: 0 0 30px 0;
}
h2.white_m{
	font-size: 4rem;
	color: #fff;
	margin: 0 auto;
	padding: 0;
}
@media screen and (max-width: 768px) {
h2.white_m{
	font-size: 2.4rem;
	margin: 0 auto;
	padding: 0;
	line-height: 4rem;
}
}

h2.white_big{
	color: #fff;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

@media screen and (max-width: 768px) {
h2.white_big span{
	font-size: 2rem;
	line-height: 3.3rem;
	text-align: justify;
}
h2.white_big{
	font-size: 3rem;
	line-height: 4rem;
	text-align: justify;
}
}
h2 div.bubble-container{
	display: flex;
	margin: 2.8rem auto 0;
	padding: 0;
}
h2 div.bubble-inner{
	display: block;
	margin: 0 auto;
	padding: 0 36px;
	font-size: 4rem;
	color:#9E495B;
	background-color: #fff;
	border-radius: 70px;
	letter-spacing: .5rem;
}
h2 div.bubble-inner strong{
	font-size: 5.5rem;
	padding: 0 3px;
}
h2 span{
	font-size: 4.5rem;
}

h2.h2_shibata{
	display: block;
	max-width: 840px;
	margin: 0 auto;
	padding: 0;
	color: #595858;
	font-size: 4.5rem;
	text-align: left;
	line-height: 5rem;
}
h2.h2_shibata span{
	display: block;
	font-size: 2.2rem;
}
h2.h2_shibata .date{
	display: block;
	font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
h2.h2_shibata{
	font-size: 2.8rem;
	text-align: justify;
	line-height: 3.3rem;
}
h2.h2_shibata span{
	display: block;
	font-size: 1.7rem;
	line-height: 3rem;
}
h2.h2_shibata .date{
	display: block;
	font-size: 1.4rem;
	line-height: 2rem;
}
}

	
h3 {
	color: #7282B2;/*文字色*/
	padding: 0.5em 0;/*文字周りの余白*/
	display: inline-block;/*おまじない*/
	font-size: 4rem;
	font-weight: bold;
	line-height: 6rem;/*行高*/
	vertical-align: middle;
}

h3:before {
  content: '■';
  color: #7282B2;
  margin-right: 8px;
}

@media screen and (max-width: 768px) {
h3 {
	font-size: 2.2rem;
	line-height: 3rem;/*行高*/
	vertical-align: middle;
}

h3:before {
}
}

.wrap-a5{
	display: block;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

@media screen and (max-width: 768px) {
.wrap-a5{
	width: 100%;
}
.wrap-a5 h2{
	width: 100%;
}
}

.shunen_1{
	background-image:url(https://bw-inc.co.jp/onko/images/shunen_no1.png);
	background-repeat:no-repeat;
	background-position:10% 40%;
	text-align:center;
	width:1000px;
	height: 135px;
	margin: 7rem auto;
	color: #595858;
	text-align: left;
	padding: 0 0 0 200px;
	font-size: 5.8rem !important;
	background-color: none !important;
}
@media screen and (max-width: 768px) {
.shunen_1,
.shunen_2,
.shunen_3,
.shunen_4,
.shunen_5{
	background-position:left;
	background-size: contain;
	width: auto;
	height: 50px;
	margin: 7rem auto;
	background-color: none !important;
	font-size: 3rem !important;
	padding: 0 0 0 100px;
}
h2.shunen_1,
h2.shunen_2,
h2.shunen_3,
h2.shunen_4,
h2.shunen_5{
	width:100%;
	height: auto;
	margin: 0 auto;
	text-align: left;
	font-size: 3rem !important;
}
h2.shunen_1 span,
h2.shunen_2 span,
h2.shunen_3 span,
h2.shunen_4 span,
h2.shunen_5 span{
	width:100%;
	height: auto;
	margin: 0 auto;
	text-align: left;
	font-size: 1.7rem !important;
}
}

.shunen_2{
	background-image:url(https://bw-inc.co.jp/onko/images/shunen_no2.png);
	background-repeat:no-repeat;
	background-position:10% 40%;
	text-align:center;
	width:1000px;
	height: 135px;
	margin: 7rem auto;
	color: #595858;
	text-align: left;
	padding: 0 0 0 200px;
	background-color: none !important;
}
.shunen_3{
	background-image:url(https://bw-inc.co.jp/onko/images/shunen_no3.png);
	background-repeat:no-repeat;
	background-position:10% 40%;
	text-align:center;
	width:1000px;
	height: 135px;
	margin: 7rem auto;
	color: #595858;
	text-align: left;
	padding: 0 0 0 200px;
	background-color: none !important;
}
.shunen_4{
	background-image:url(https://bw-inc.co.jp/onko/images/shunen_no4.png);
	background-repeat:no-repeat;
	background-position:10% 40%;
	text-align:center;
	width:1000px;
	height: 135px;
	margin: 7rem auto;
	color: #595858;
	text-align: left;
	padding: 0 0 0 200px;
	background-color: none !important;
}
.shunen_5{
	background-image:url(https://bw-inc.co.jp/onko/images/shunen_no5.png);
	background-repeat:no-repeat;
	background-position:10% 40%;
	text-align:center;
	width:1000px;
	height: 135px;
	margin: 7rem auto;
	color: #595858;
	text-align: left;
	padding: 0 0 0 200px;
	background-color: none !important;
}

.shunen_1 span,
.shunen_2 span,
.shunen_3 span,
.shunen_4 span,
.shunen_5 span{
	display: block;
	font-size: 3.8rem !important;
}

.headline{
	font-weight: bold;
}

.p-5{
	display: block;
	width: 860px;
	margin: 20px auto;
	padding: 0;
	text-align: left;
	font-size: 2.0rem;
	line-height: 3.3rem;
}

ul.p-5-1{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-1 li{
	display: inline-block;
	width: 400px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: #dd6b87;
	border-radius: 10px;
	text-align: match-parent;
}

@media screen and (max-width: 768px) {
.p-5{
	width: 100%;
	font-size: 1.7rem;
	line-height: 2.4rem;
}
.headline{
	font-size: 2.4rem;
	line-height: 3.3rem;
}
ul.p-5-1{
	display: block;
	width: 100%;
}

ul.p-5-1 li{
	display: block;
	width: 100%;
	margin: 1rem 0;
	float: none;
}
}

ul.p-5-2{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-2 li{
	display: inline-block;
	width: 400px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: #41648b;
	border-radius: 10px;
	text-align: match-parent;
}

@media screen and (max-width: 768px) {
ul.p-5-2{
	display: block;
	width: 100%;
}

ul.p-5-2 li{
	display: block;
	width: 100%;
	margin: 1rem 0;
	float: none;
}
}


ul.p-5-3{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-3 li{
	display: inline-block;
	width: 400px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: #c29665;
	border-radius: 10px;
	text-align: match-parent;
}

@media screen and (max-width: 768px) {
ul.p-5-3{
	display: block;
	width: 100%;
}

ul.p-5-3 li{
	display: block;
	width: 100%;
	margin: 1rem 0;
	float: none;
}
}


ul.p-5-4{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-4 li{
	display: inline-block;
	width: 400px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: #73a1ac;
	border-radius: 10px;
	text-align: match-parent;
}

@media screen and (max-width: 768px) {
ul.p-5-4{
	display: block;
	width: 100%;
}

ul.p-5-4 li{
	display: block;
	width: 100%;
	margin: 1rem 0;
	float: none;
}
}


ul.p-5-5{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-5 li{
	display: inline-block;
	width: 400px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: #9e9173;
	border-radius: 10px;
	text-align: match-parent;
}

@media screen and (max-width: 768px) {
ul.p-5-5{
	display: block;
	width: 100%;
}

ul.p-5-5 li{
	display: block;
	width: 100%;
	margin: 1rem 0;
	float: none;
}
}



ul.p-5-works{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-works li{
	display: inline-block;
	width: 400px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: none;
	border-radius: 10px;
}
.p-5-works li span{
	display: block;
	margin: 0 auto;
	padding: 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: #595858;
}
@media screen and (max-width: 768px) {
ul.p-5-works{
	display: block;
	width: 100%;
}
.p-5-works li{
	display: block;
	width: 100%;
	float: none;
}
}

.client-name{
	display: block;
	width: 860px;
	margin: 0 auto !important;
	padding: 0;
	text-align: left;
	font-size: 2.0rem;
	line-height: 3.3rem;
	font-weight: bold;
	text-indent: -1rem;
}

@media screen and (max-width: 768px) {
.client-name{
	display: block;
	width: 100%;
	font-size: 1.7rem;
	line-height: 2.4rem;
}
}


ul.p-5-works2{
    display:block;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-works2 li{
	display: inline-block;
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: none;
	border-radius: 10px;
	text-align: left;
}
.p-5-works2 li span{
	display: block;
	margin: 0 auto;
	padding: 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: #595858;
}

@media screen and (max-width: 768px) {
ul.p-5-works2{
	display: block;
	width: 100%;
}
.p-5-works2 li{
	display: block;
	width: 100%;
	float: none;
}
}

ul.p-5-works3{
    display:block;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-works3 li{
	display: inline-block;
	width: 720px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: none;
	border-radius: 10px;
	text-align: left;
}
.p-5-works3 li span{
	display: block;
	margin: 0 auto;
	padding: 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: #595858;
}
@media screen and (max-width: 768px) {
ul.p-5-works3{
	display: block;
	width: 100%;
}
.p-5-works3 li{
	display: block;
	width: 100%;
	float: none;
}
}

ul.p-5-works4{
    display:block;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-works4 li{
	display: inline-block;
	width: 100%;
	margin: 30px auto;
	padding: 10px;
	list-style: none;
	background-color: none;
	border-radius: 10px;
	text-align: center;
}
.p-5-works4 li span{
	display: block;
	margin: 20px auto;
	padding: 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: #595858;
}
.p-5-works4 li img{
	width: 480px;
}

@media screen and (max-width: 768px) {
ul.p-5-works4{
	display: block;
	width: 100%;
}
.p-5-works4 li{
	display: block;
	width: 100%;
	float: none;
}
}

ul.p-5-works5{
    display:block;
	width: 860px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

.p-5-works5 li{
	display: block;
	width: 720px;
	margin: 0 auto;
	padding: 10px;
	list-style: none;
	background-color: none;
	border-radius: 10px;
	text-align: center;
}
.p-5-works5 li span{
	display: block;
	margin: 20px auto;
	padding: 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: #595858;
}

@media screen and (max-width: 768px) {
ul.p-5-works5{
	display: block;
	width: 100%;
}
.p-5-works5 li{
	display: block;
	width: 100%;
	float: none;
}
}


.client-name-wrap{
	display: block;
	width: 180px;
	float:right;
	margin: 0 0 0 6rem;
	text-align: center;
	font-size: 1.7rem;
	line-height: 5rem;
}

.client-name-wrap p.client-name img{
	display: block;
	width: 100%;
}
@media screen and (max-width: 768px) {
.client-name{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-indent: 0;
}
.client-name-wrap{
	display: block;
	width: 70%;
	float:none;
	margin: 1rem auto;
	text-align: center;
}
}


p.client{
	display: block;
	width: 860px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	color: #595858;
	font-size: 1.7rem;
	line-height: 3rem;
	letter-spacing: -0.03rem;
	text-align: justify;
}



@media screen and (max-width: 768px) {
p.client{
	display: block;
	width: 100%;
	font-size: 1.7rem;
	line-height: 2.4rem;
}
}

.client-list{
    display:block;
	width: 860px;
	margin: 0 auto;
	padding: 0;
	font-size: 1.7rem;
	font-weight: normal;
}
.client-list li span{
	display: block;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 768px) {
.client-list{
    display:block;
	width: 100%;
}
}

ol.client-list{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.client-list li{
	position:relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 0px;
	font-weight: bold;
	font-size: 1.7rem;
	font-weight: normal;
	line-height: 30px;
}
ol.client-list li:before{
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 17px;
	width: 17px;
	border-radius: 50%;
	background: #c36a85;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


.client-list2{
    display:block;
	width: 860px;
	margin: 0 auto;
	padding: 0;
	font-size: 1.7rem;
	font-weight: normal;
}
.client-list2 li span{
	display: block;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 768px) {
.client-list2{
    display:block;
	width: 100%;
}
}

ol.client-list2{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.client-list2 li{
	position:relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 0px;
	font-weight: bold;
	font-size: 1.7rem;
	font-weight: normal;
	line-height: 30px;
}
ol.client-list2 li:before{
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 17px;
	width: 17px;
	border-radius: 50%;
	background: #4e6388;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


.client-list3{
    display:block;
	width: 860px;
	margin: 0 auto;
	padding: 0;
	font-size: 1.7rem;
	font-weight: normal;
}
.client-list3 li span{
	display: block;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 768px) {
.client-list3{
    display:block;
	width: 100%;
}
}

ol.client-list3{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.client-list3 li{
	position:relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 0px;
	font-weight: bold;
	font-size: 1.7rem;
	font-weight: normal;
	line-height: 30px;
}
ol.client-list3 li:before{
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 17px;
	width: 17px;
	border-radius: 50%;
	background: #c29665;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}



@media screen and (max-width: 768px) {
	h1,
	h2{
		font-size: 3rem;
		text-align:justify;
		padding: auto;
	}
	h2 div.bubble-container{
		display: block;
	}
	h2 div.bubble-inner{
		display: block;
		margin: 0 auto;
		padding: 1rem 10px;
		text-align: center;
		font-size: 3rem;
		color:color:#9E495B;
		background-color: #fff;
		border-radius: 50px;
	}
	h2 div.bubble-inner strong{
		font-size: 4rem;
		padding: 0 3px;
	}
	h2 span{
		font-size: 2.6rem;
	}
}

p{
	margin-top: 20px;
	font-size: 2.4rem;
	line-height: 5rem;
}

@media screen and (max-width: 768px) {
	p{
		width: 97%;
		font-size: 2rem;
		line-height: 3.7rem;
		text-align: justify;
	}
}

p.onko-top{
	display: block;
	width:100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.parent {
	display: flex;
	width: 100%;
	height: 200px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	justify-content: space-between;
	line-height: 200px;
}
.child1 {
	width:200px;
	padding: 0;
	line-height: 200px;
}
.child2 {
	width:200px;
	padding: 0;
	text-align: center;
	line-height: 200px;
}

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

@media screen and (max-width: 768px) {
.parent {
	width: 100%;
	height: auto;
}

.child1 {
	width:100%;
}
.child2 {
	width:100%;
}
}


small{
  color: #fff;
  display: block;
  text-align: center;
}

#header{
	display: block;
	margin: 0 auto;
	background:#fff;
	color:#7282B2;
	text-align: center;
	padding: 0;
}

section{
	display: block;
	width: 100vw;
	margin: 0 auto;
	padding: 7rem 3rem;
	text-align: center;
	overflow:hidden;　　/*要素はみ出さないように*/
}

@media screen and (max-width: 768px) {
	section{
		padding: 50px 10px;
	}
}

section:nth-child(1){
	min-height: 100vh;
}

section:nth-child(2n){
	background: #f3f3f3; 
}

/*フッター設定*/
#footer{
  background: #7282B2;
  position: relative;
  z-index: 2;
  padding:100px 20px;
}

#footer p{
	display: block;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
#footer div.line-left{
	padding-left: 10rem;
	text-align: left !important;
}
#footer div.line-left p{
	text-align: left !important;
}


#footer a{
	color: #fff;
}

/*訪問済みの色*/
#footer a:visited{
	color: #fff;
}

/*ホバー時の色*/
#footer a:hover{
	text-decoration: underline;
}

/*クリック時の色*/
#footer a:active{
	color: #fff;
}

#footer ul{
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
#footer li{
	display: block;
	width: 50%;
	margin: 0 auto;
	text-align: left;
	float: left;
}
@media screen and (max-width: 768px) {
#footer li{
	width: 100%;
	float: none;
	margin: 0 auto 5rem;
}
}

.foot_linkname{
	display: block;
	margin: 0 auto;
	padding: 1rem 0 0;
	font-family: 'TBUDGothic B', sans-serif;
	font-size: 2.1rem;footer
}
.foot_telno{
	display: block;
	margin: 0 auto;
	padding: 3rem 0 0;
	font-size: 3rem;
	letter-spacing: 0.3rem;
}
.foot_add{
	display: block;
	margin: 0 auto;
	padding: 0;
	font-family: 'TBUDGothic B', sans-serif;
	font-size: 1.6rem;
	line-height: 2.8rem;
}
.foot_name{
	display: block;
	margin: 0 auto;
	padding: 0;
	font-family: 'TBUDGothic B', sans-serif;
	font-size: 1.7rem;
	line-height: 2.8rem;
	text-align: left;
}


/*コピーライト設定*/
#copyright {
	font-family: 'TBUDGothic B', sans-serif;
	font-size: 1.2rem;
	position: absolute;
	bottom: 0; left: 0; right: 0;
}


/*横並びリスト*/
ul.list_shunen {
    margin:0 auto;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    width:840px;
	text-align: center;
}
ul.list_shunen li {
	margin:0 0 10px 0;
	padding:10px;
	border:none;
	width:420;
	list-style:none;
}

@media screen and (max-width: 768px) {
	ul.list_shunen {
		width:100%;
		margin: 0 auto;
	}
	ul.list_shunen li {
        width:100%;
		margin: 0 auto;
	}

}


/*フラッグ見出し*/
div.bgflag {
	position: relative;
	max-width: 685px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
div.bgflag img {
  width: 100%; /* divの幅に対する割合 */
}
div.bgflag p {
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
	font-size: 4rem !important;
	line-height: 5.2rem;
	font-weight: 700;
	color: #fff;
}

div.flag_p{
	display: block;
	max-width: 685px;
	margin: 1rem auto 5rem;
	padding: 0;
	text-align: center;
}
div.flag_p p{
	display: block;
	max-width: 490px;
	margin: 0 auto;
	padding: 0;
	text-align: justify;
	font-size: 2.3rem !important;
	line-height: 4rem;
}

div.bgflag2 {
	position: relative;
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
div.bgflag2 img {
  width: 100%; /* divの幅に対する割合 */
}
div.bgflag2 p {
	position: absolute;
	left: 50%;
	top: 38%;
	transform: translate(-50%,-50%);
	font-size: 2.2rem !important;
	line-height: 3.5rem;
	font-weight: 700;
	color: #fff;
}

div.flag_p2{
	display: block;
	max-width: 400px;
	margin: 1rem auto 5rem;
	padding: 0;
	text-align: center;
}
div.flag_p2 p{
	display: block;
	max-width: 340px;
	margin: 0 auto;
	padding: 0;
	text-align: justify;
	font-size: 2rem !important;
	line-height: 3.3rem;
}

@media screen and (max-width:768px) {
div.bgflag p,
div.bgflag2 p {
	top: 35%;
	left: 73%;
	transform: translate(-50%,-50%);
	font-size: 2.2rem !important;
	line-height: 3rem;
}
div.flag_p{
	max-width: 400px;
}
div.flag_p p{
	max-width: 340px;
	font-size: 2rem !important;
	line-height: 3.3rem;
}
}


/*両端斜線の吹き出し文字*/
div.fukidashi-wrap{
	display:flex;
	margin: 0 auto;
	padding: 0;
}

div.fukidashi {
	display:block;
    position: relative;
	margin: 0 auto;
    padding: 1rem 3rem;
	font-size: 4rem;
    font-weight: bold;
	color: #595858;
    text-align: center;
}

div.fukidashi::before,
div.fukidashi::after {
    position: absolute;
    top: 1rem;
    height: 6rem;
    content: '';
}

div.fukidashi::before {
    border-left: solid 3px;
    left: 0;
    transform: rotate(-20deg);
}

div.fukidashi::after {
    border-right: solid 3px;
    right: 0;
    transform: rotate(20deg);
}
@media screen and (max-width:768px) {
div.fukidashi {
	font-size: 2rem;
}
div.fukidashi::before,
div.fukidashi::after {
    top: 1rem;
    height: 3rem;
}
}

/*期間画像*/
#area-9 div.ribbon{
	display: block;
	width:535px;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width:768px) {
#area-9 div.ribbon{
	width:100% !important;
}
#area-9 div.ribbon img{
		width:100% !important;
		height: auto;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
#area-9 div.logo_camp p{
		font-size: 1.7rem;
	}
}

/*50thロゴ画像*/
.logo_50th{
	width: 142px;
	height: 183px;
	margin: 33px auto 0;
	padding: 0;
}

/*周年ロゴキャンペーン説明部分*/
.logo_camp{
	display: block;
	max-width:1000px;
	margin: 0 auto;
	padding: 0;
}

.logo_camp ul{
    margin:0 auto;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	justify-content: space-evenly;
}

.logo_camp li{
	display: block;
	max-width: 580px;
	margin: 0 auto;
	text-align: center;
	list-style: none;
}

.logo_camp p{
	display: block;
	margin: 33px auto;
	text-align: justify;
	font-size: 2.24rem;
	line-height: 3.7rem;
}

.logo_camp span{
	display: block;
	margin: 33px auto;
	text-align: center;
	font-size: 1.52rem;
}

/*お問い合わせボタン*/
.bnr_space{
	display: block;
	margin: 7rem auto 10rem;
	padding: 0;
	text-align: center;
}
.bnr_bt{
	display: block;
	max-width:600px;
	height: auto;
	margin: 3rem auto 0;
	padding: .45rem;
	font-size: 2.2rem;
	font-weight: bold;
	color: #7282b2;
	background-color: #fff;
	border: 1px solid #7282b2;
	text-align: center;
}

#area-5 div.bnr_bt,
#area-9 div.bnr_bt{
	display: block;
	max-width:600px;
	height: auto;
	margin: 3rem auto 0;
	padding: 2.2rem;
	font-size: 2.2rem;
	font-weight: bold;
	color: #7282b2;
	background-color: #fff;
	border: 1px solid #7282b2;
	text-align: center;
}


/*ホバー時の色*/
a:hover .bnr_bt,
#area-5 a:hover div.bnr_bt,
#area-9 a:hover div.bnr_bt{
	color: #fff;
	background-color: #a35160;
	border: 1px solid #884350;
}

@media screen and (max-width:768px) {
    .bnr_bt{
		width:97%;
		margin: 0 auto;
		padding: 2rem 1rem;
		font-size: 1.7rem;
		line-height: 2rem;
	}
}

/*キャンペーンの囲みメッセージ*/
.cp_message{
	display: block;
	max-width:840px;
	height: auto;
	margin: 3rem auto 0;
	padding: .52rem;
	font-size: 1.8rem;
	color: #595858;
	background-color: #fff;
	border: 1px solid #595858;
	text-align: center;
}
@media screen and (max-width:768px) {
    .cp_message{
		width:97%;
		margin: 0 auto 3rem;
		padding: 1rem;
		font-size: 1.7rem;
		line-height: 2rem;
		text-align: left;
	}
}


/*シバタクラシックの会場風景画像*/

ul.shibata_wrap{
	display: block;
	max-width: 870px;
	margin: 0 auto 50px;
	padding: 0;
}
.shibata_wrap li{
	display: block;
	width: auto;
	margin: 0 auto;
	padding: 7px;
	float: left;
}
ul.shibata_inner1{
	display: block;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
ul.shibata_inner2{
	display: block;
	max-width: 540px;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
ul.shibata_inner1 li,
ul.shibata_inner2 li{
	text-align: right;
	font-size: 1.5rem;
}

@media screen and (max-width:768px) {
	ul.shibata_wrap{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	.shibata_wrap li{
		width: 100%;
		padding: 7px;
		float: left;
	}
	ul.shibata_inner1{
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
	ul.shibata_inner2{
		display: block;
		max-width: 100%;
		margin: -13px auto;
	}
}

/*シバタ・社長名*/
.president{
	display: block;
	max-width: 840px;
	margin: 0 auto 2rem;
	padding: 0;
	text-align: left;
	font-size: 1.8rem;
	line-height: 7rem;
	font-weight: bold;
}
.president span{
	margin: 0 auto 2rem;
	font-size: 2.6rem;
	padding: 0 0.5rem;
}
@media screen and (max-width:768px) {
.president{
	margin:  2rem auto;
	font-size: 1.4rem;
	line-height: 2rem;
}
.president span{
	font-size: 2rem;
	line-height: 3rem;
}
}


/*PCでは無効（改行しない）*/
.spbr{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .spbr{
        display: block;
    }
}

/*PCでは無効（下余白）*/
.spspace{
    margin-bottom: auto;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .spspace{
     margin-bottom: 1.2em;
    }
}

/*SPでは無効（改行しない）*/
.pcbr{
	display: block;
}

/*PCでは有効（改行する）*/
@media screen and (max-width:768px) {
    .pcbr{
		display: none;
	}
}


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

/*フッター設定*/

.foot_telno{
	font-size: 2.4rem;
}
.foot_add{
	text-align: left !important;
	font-size: 1.8rem;
	line-height: 3rem;
}

/*コピーライト設定*/
#copyright {
	font-family: 'TBUDGothic B', sans-serif;
	font-size: 1.2rem;
	position: absolute;
	bottom: 0; left: 0; right: 0;
}

}

.bg-bl{
	display: block;
	margin: 0 auto;
	padding: 7rem 0;
	text-align: center;
	font-weight: bold;
	font-size: 6rem;
	color: #fff;
	background-color: #7282B2;
}

.box_yellow{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 1rem 3rem 3rem;
	background-color: #FFFCD2;
	border-radius: 10px;
}
.box_yellow p span{
	color: #7282B2 !important;
}
.box_yellow p img{
	padding: 2rem;
}
.box_yellow .small{
	font-size: 2rem;
	text-align: left;
	text-indent: 1rem;
	padding: 0;
	margin: -3rem auto;
}

@media screen and (max-width:768px) {
.box_yellow{
	padding: 1rem;
}
.box_yellow p{
	line-height: 2.8rem;
}
.box_yellow p img{
	padding: .5rem;
}
.box_yellow p span{
	line-height: 2rem;
}
.box_yellow p span{
	line-height: 2rem;
}
.box_yellow .small{
	font-size: 1.2rem;
	text-align: left;
	text-indent: 1rem;
	line-height: 1.5rem;
}
}

.box_bl{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 1rem 3rem;
	background-color: #7282B2;
	border-radius: 10px;
}
.box_bl p{
	color: #fff;
	font-size: 3rem;
	text-align: center !important;
	padding: 2rem 0 0;
}

@media screen and (max-width:768px) {
.box_bl{
	padding: 1rem;
}
.box_bl p{
	font-size: 2rem;
	text-align: left !important;
	line-height: 2.8rem;
}
}

img.cycle{
	display: block;
	margin: 0 auto 7rem;
	padding: 0;
	max-width: 600px;
}
@media screen and (max-width:768px) {
img.cycle{
	max-width: 97%;
}
}

div.table{
	display: table;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
div.table p{
	display: table-cell;
	margin: 0 auto;
	padding: 0;
}
div.table p.blue{
	width: 840px;
	background-color: #7282B2;
	padding: 3rem;
	color: #fff;
	font-size: 3.3rem;
	font-weight: bold;
	text-align: center !important;
	margin: 0 auto;
}
div.table p.bgray{
	width: 840px;
	background-color: #EDEFF5;
	padding: 3rem 4rem;
	font-size: 2rem;
	line-height: 3.5rem;
}


/*仕切り線*/

hr.style1{
	border-top: 1px solid #595858;
	margin: 7rem auto 3rem;
}
hr.style2 {
	border-top: 3px double #595858;
	margin: 7rem auto 3rem;
}
hr.style3 {
	border-top: 1px dashed #595858;
	margin: 7rem auto 3rem;
}
hr.style4 {
	border-top: 1px dotted #595858;
	margin: 7rem auto 3rem;
}
hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #595858;
	margin: 7rem auto 3rem;
}
hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #595858;
	margin: 7rem auto 3rem;
}

section #area-white{
	display: block;
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
}


/*お問い合わせフォーム部分・フレーム*/

iframe {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 1700px;
}


/*制作物タイトル*/

.shunen-ttitle-1{
	display: block;
	width: 644px;
	margin: 8rem 0 8rem 8rem;
	padding: 0;
	text-align: left;
}
.shunen-ttitle-2{
	display: block;
	width: 644px;
	margin: 15rem 0 8rem 8rem;
	padding: 0;
	text-align: left;
}
.shunen-ttitle-3{
	display: block;
	width: 741px;
	margin: 15rem 0 8rem 8rem;
	padding: 0;
	text-align: left;
}
.shunen-ttitle-4{
	display: block;
	width: 576px;
	margin: 15rem 0 8rem 8rem;
	padding: 0;
	text-align: left;
}
.shunen-ttitle-5{
	display: block;
	width: 794px;
	margin: 15rem 0 8rem 8rem;
	padding: 0;
	text-align: left;
}

@media screen and (max-width:768px) {
.shunen-ttitle-1,
.shunen-ttitle-2,
.shunen-ttitle-3,
.shunen-ttitle-4,
.shunen-ttitle-5{
	width: 100%;
	margin-bottom:0;
	margin-left: 0;
}
}