@charset "UTF-8";

/*
Theme Name: roof-rescue
Theme URI: http://
Author:
Author URI:
Description:
Version: 1.1
*/

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp {  border: 0;  margin: 0;  padding: 0;  font-size: 100%;list-style:none;box-sizing: border-box;}

/* general */
BODY {font-family: YuGothic,"游ゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",Osaka,sans-serif;font-size: 1em;line-height: 1.6;
/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
}

img {max-width: 100%;}


/* text */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}



header {width: 1028px;margin: 0 auto;padding: 20px 0;}
#main {margin: 0 auto;width: 100%;}
.row {width: 1028px;margin: 0 auto;}
footer {width: 1028px;margin: 0 auto;}

header .logo {float: left;margin-right: 30px;}
header .copy {float: left;}
header .freedial {float: right;}
header .freedial2 img{margin-right: 5px;}
header .freedial2 {font-size: 42px;color:#00b900;font-weight: bold;line-height: 42px;}
header .freedial3 {text-align: right;color:#00b900;font-size: 16px;font-weight: bold;}

.sp .freedial {margin: 0 auto;}
.sp .freedial2 {font-size: 38px;color:#00b900;font-weight: bold;line-height: 38px;text-align: center;}
.sp .freedial3 {text-align: center;color:#00b900;font-size: 16px;font-weight: bold;}

.ttl-green {font-size: 24px;font-weight: bold;border-radius: 50px;background-color: #009fa8;color: #fff;display: inline-block;padding: 5px 25px 5px 50px;position: relative;margin: 2em auto;}
.ttl-green:before {content: url(img/h2-icon-home-green.png);position: absolute;left:-35px;bottom:-20px;}

.ttl-blue {font-size: 24px;font-weight: bold;border-radius: 50px;background-color: #1d2088;color: #fff;display: inline-block;padding: 5px 25px 5px 50px;position: relative;margin: 2em auto;}
.ttl-blue:before {content: url(img/h2-icon-home-green2.png);position: absolute;left:-35px;bottom:-20px;}

.mainimg {width:100%;background-image: url(img/top-img-bg.png);background-size: cover;margin-bottom: 2em;}
.mainimg-inner {width: 1028px;margin: 0 auto;}

.top-hoken {
background-size: auto auto;
background-color: rgba(59, 201, 59, 1);
background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(0, 185, 0, 1) 12px, rgba(0, 185, 0, 1) 24px );padding:40px;margin-bottom: 2em;}




.top-hoken-inner {background-color: #fff;padding: 30px;}
.top-hoken h2 {color:#00b900;font-size: 24px;margin-bottom: 1em;}
.top-hoken p {margin-bottom: 1em;}
.top-hoken-illust {width: 80%;margin: 0 auto;margin-bottom: 1em;}
.top-hoken-btn a{background-color:#00b900;border-radius:50px;padding: 15px 30px;color: #fff;font-weight: bold;font-size: 125%;width:auto;display: inline-block;}

.ryokin {width: 100%;padding: 30px 0;margin-bottom: 2em;
background-size: auto auto;
background-color: rgba(231, 245, 213, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(226, 240, 210, 1) 4px, rgba(226, 240, 210, 1) 8px );
}

.plan li {box-shadow: 0 2px 4px rgba(0,0,0,0.5);border-radius: 10px;margin-bottom: 2em;padding: 15px;}
.plan h3 {font-weight: bold;font-size: 24px;color: #009fa8;margin-bottom: 10px;}
.plan img {}
.plan .price{font-weight: bold;}
.plan .fontred{font-size: 24px;color: #ff3a00;font-weight: bold;vertical-align:baseline;padding-left: 5px;}

.reason {max-width: 800px;margin: 0 auto;}
.reason  p{text-align: left;}
.reason li {box-shadow: 0 2px 4px rgba(0,0,0,0.5);border-radius: 50px 0 0 0;margin-bottom: 2em;padding: 15px;background-color: #c1db80;}
.reason-ttl {font-size: 24px;font-weight: bold;color: #fff;}
.reason-ttl .number {display:inline-block;margin-right: 10px;font-size: 42px;font-family: serif;font-weight: bold;color:#98ae66;vertical-align:middle;}
.reason img {width: 100%;margin-bottom: 10px;}

.anshin {width:100%;
	background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(241, 241, 241, 1) 4px, rgba(241, 241, 241, 1) 8px );}
.anshin .row {width:800px;padding: 30px 0;}
.anshin .ttl {margin: 1em 0;}
.anshin li {border: #00b900 4px solid;background-color: #fff;font-size: 24px;margin-bottom: 20px;}
.anshin .step {background-color:#00b900;padding: 10px;text-align: center;display: inline-block;float: left;width: 20%;font-weight: bold;color: #fff;}
.anshin .content {float: left;width: 73%;padding: 10px;text-align: center;font-weight: bold;color:#4e4e4e;margin: 0 auto;}


.top-gallery {width:100%;margin-bottom: 3em;padding-bottom: 2em;
	background-size: auto auto;
background-color: rgba(253, 248, 212, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(235, 230, 194, 1) 4px, rgba(235, 230, 194, 1) 8px );
}

.top-gallery .row {width: 1028px;margin: 0 auto;}
.top-gallery .ttl-area {position: relative;}
.top-gallery .ttl-area .btn {position: absolute;right:0;top:30px;}
.top-gallery .ttl-area .btn-gallery {position: absolute;right:0;top:50px;display:inline-block;}

.btn-gallery a{background-color:#00b900;color:#fff;padding: 5px 20px;font-size: 16px;font-weight: bold;border-radius: 50px;display: inline-block;margin: 0 auto;}
.btn-gallery a:hover {background-color:#00b900;color:#fff; }


.top-gallery > .row > ul > li {padding: 20px;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.5);margin-bottom: 20px;}
.top-gallery h3 {font-size: 24px;font-weight: bold;color:#73b3d9;margin-bottom: 10px;}

.hosho-bnnr {margin-bottom: 3em;}
/* return to top */

#page-top {position: fixed;bottom: 10px;right: 20px;font-size: 77%;}
#page-top a {text-decoration: none;color:#1d2088;width: 100px;padding: 10px 0;text-align: center;display: block;border-radius: 5px;}
#page-top a:hover {text-decoration: none;}


/* flexbox */
.div2 {display:-webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.div2 li {width:45%;}
.div3 {display:-webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.div3 li {width:30%;}
.div4 {display:-webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.div4 li {width:25%;}

.g_div2 {display:-webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;position: relative;}
.g_div2 .arrow {position: absolute;left:43%;top:32%;z-index: 990;}
.g_div2 li {width:47%;padding: 0;position: relative;}
.g_div2 li img {width: 100%;}
.g_div2 > li > .before {background-color: #666666;color:#fff;left: 35%;bottom:8px;margin: 0 auto;position: absolute;padding:0 10px;}
.g_div2 > li > .after {background-color: #ec775e;color:#fff;left: 35%;bottom:8px;margin: 0 auto;position: absolute;padding:0 10px;}


.step {padding-bottom: 3em;}
.step ul {width:800px;margin:0 auto;}
.step li {text-align: left;}
.step li h3{color:#1d2088;font-size: 24px;font-weight: bold;padding-bottom: 5px;margin-bottom: 5px;border-bottom: 3px solid #1d2088;}
.step .arrow {text-align: center;margin: 20px auto;}

.btn2 {margin-bottom: 2em;}
.btn2 a{color:#1d2088;border: 4px solid #1d2088;padding: 10px 30px;font-size: 24px;font-weight: bold;border-radius: 50px;display: inline-block;margin: 0 auto;}
.btn2 a:hover {background-color:#1d2088;color:#fff; }

.btn3 {margin-bottom: 2em;}
.btn3 a{color:#00b900;border: 4px solid #00b900;padding: 10px 30px;font-size: 24px;font-weight: bold;border-radius: 50px;display: inline-block;margin: 0 auto;}
.btn3 a:hover {background-color:#00b900;color:#fff; }

.update h4 {color:#1d2088;font-weight: bold;font-size: 18px;margin-bottom: 1em;}
.update {background-color: #fffbc7;width:100%;padding: 2em 0;margin-bottom: 2em;}
.update ul {margin-bottom: 2em;}
.update li a {color:#1d2088;margin-bottom: .5em;display: block;}
.update li a:hover {text-decoration: underline;}

footer {width: 100%;padding: 20px 0;background-color: #00b900;text-align:center;}
.ft-freedial{float:none;padding-top: 5px;margin:0 auto;}
.ft-txt {float:none;font-weight: bold;color:#fff;}
.ft-freedial2 {font-size: 18px;font-weight: bold;color:#fff;line-height: 18px;}
.ft-freedial3 img{height: 40px;margin-right:5px;}
.ft-freedial3 {font-size: 60px;color:#fff;font-family: bilo,sans-serif;font-weight: 700;font-style: normal;line-height:1em;}
.ft-tel {display:none;}


/* clearfix --------------------------------------- */
.clearfix:after{content: ".";display: block;height: 0;font-size:0;clear: both;visibility:hidden;}.clearfix{display: inline-block;}
/* Hides from IE Mac */
* html .clearfix{height: 1%;}.clearfix{display:block;}
/* End Hack */

/* link  */
a {text-decoration: none;-webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;color:#000;}
a:hover {opacity: 0.7; filter: alpha(opacity=70);}

/* pc-sp switch PC */
.pc {display: block;}
.sp {display: none;}


/* tbl01 レスポンシブ対応 */
.tbl01 {border-collapse: collapse;width:100%;}
.tbl01 th,
.tbl01 td {width:auto;border-bottom: 1px solid #CCC;padding: 0.5em;text-align: left;}
.tbl01 th {width:auto;text-align: left;font-weight: normal;white-space: nowrap;}

@media only screen and (max-width:480px){
.tbl01 {}
.tbl01 th,
.tbl01 td{width: 100%;display: block;border-top: none;padding: 0.5em;}
.tbl01 tr:first-child th   { border-top: 1px solid #ddd; }
.tbl01 th {background-color: #eee;}
}



/* tbl01 レスポンシブ対応 */
.tbl02 {border-collapse: collapse;width:100%;margin-bottom: 2em;border: 1px solid #009fa8;}
.tbl02 th,
.tbl02 td {width:auto;border-bottom: none;padding: 0.25em;text-align: left;}
.tbl02 th {width:auto;text-align: left;font-weight: normal;white-space: nowrap;vertical-align: top;padding: 0.25em 0.5em;}

@media only screen and (max-width:480px){
.tbl02 th {width:auto;text-align: left;font-weight: normal;white-space: nowrap;vertical-align: top;padding: 0.25em;}
}


/* page area ***************************/
.area {background-color: rgba(254,255,163);margin-bottom: 2em;padding-bottom: 2em;}
.area .row {width: 800px;margin: 0 auto;}

.area h2{color: #df542f;margin-bottom: 1em;font-weight: bold;font-size: 20px;}
.area h3 {color: #1d2088;margin: 0 auto 1em auto;font-size: 18px;padding-bottom: 0.5em;border-bottom: 2px solid #1d2088;}
.area p {text-align:left;margin-bottom: 1em;}

/* page company ***************************/
.company {}
.company .row {width: 60%;margin: 0 auto;margin-bottom: 2em;}
.company li{list-style-type:disc;text-align: left;margin-bottom: 1em;}
.li-none li{list-style-type:none;text-align: left;margin-bottom: 1em;}

/* page qnada ***************************/
.faq-q {font-size: 2em;font-weight: bold;color:#009fa8;}
.faq-a {font-size: 2em;color: #df542f;}
.faq-q-txt {font-weight: bold;color:#009fa8;text-align: left;}
.faq-a-txt {border-bottom: 2px solid #1d2088;text-align: left;}


/* page gallery */
.page-gallery {width:100%;margin-bottom: 3em;padding-bottom: 2em;background-size: auto auto;background-color: rgba(253, 248, 212, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(235, 230, 194, 1) 4px, rgba(235, 230, 194, 1) 8px );}
.page-gallery .row {width: 1028px;margin: 0 auto;}
.page-gallery .ttl-area {position: relative;}
.page-gallery .ttl-area .btn {position: absolute;right:0;top:30px;}
.page-gallery > .row > ul > li {padding: 20px;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.5);margin-bottom: 30px;}
.page-gallery h3 {font-size: 24px;font-weight: bold;color:#73b3d9;margin-bottom: 10px;}
.page-gallery .div2 li {width:48%;}
.page-gallery li p {text-align: left;}



/* pagenation archive*/

.pagenation-archive {display: table;margin: 2em auto;}
.pagenation-archive li {padding:0 0.5rem;float: left;display: table-cell;margin-right: 0.5rem;}
.pagenation-archive li a {color:#1d2088;font-weight: bold;}
.li-current {color:#fff;background-color:#1d2088;}


/*- form */

.cform {text-align: center;}
.cform h1 {color:#1d2088;font-size:1.4em;}
.cform p {margin-bottom: 1em;}
.cform h3 {margin: 1em auto;}
.cform h3 .under-line {background: linear-gradient(transparent 60%, yellow 0%);font-weight: normal;}
.tbl01 {border-collapse: collapse;width:100%;margin-bottom: 1em;}
.tbl01 th,
.tbl01 td {width:auto;border: 1px solid #CCC;padding: 0.5em;}
.tbl01 th {width:auto;text-align: left;font-weight: normal;background-color: #00b900;color:#fff;}

@media only screen and (max-width:480px){
.tbl01 {}
	.tbl01 th,
	.tbl01 td{width: 100%;display: block;border-top: none;padding: 0.5em;}
	.tbl01 tr:first-child th   { border-top: 1px solid #ddd; }
}

.page_contact {width:800px;margin:0 auto;text-align:left;}
.wpcf7 {margin:0;}
.wpcf7 p {margin-bottom:1em;}
.wpcf7 small {font-size:0.85em;margin-bottom:1em;}
.asterisk {margin: 0 0 0 0.2em;color: #f5637a;}
.wpcf7 span.wpcf7-not-valid-tip {font-size: 80%;}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {background-color: #fff;color: #333;width: 95%;border: 1px solid #ddd;font-size: 100%;padding: 0.6em;border-radius: 4px;box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;}
.wpcf7 input[type="submit"] {font-size: 100%;padding: 1em;background:#008EFF;color: #fff;border-radius: 6px;cursor: pointer;border: 1px solid #ccc;-webkit-appearance: none;}
.wpcf7 input[type="submit"]:hover {box-shadow: 0 0 1px rgba(0,0,0,.2) inset;}
.hissu {border-radius: 3px;padding: 3px;background-color: #666;color:#fff;font-size: 12px;margin-left: 5px;}

/*- form */


/* モバイル設定 **********************************************************************************/
@media ( max-width : 800px ) {

#wrapper {
	position: relative;
	/* min-height: 100vh; */
}

/* flexbox */
.div2 li {width:100%;}
.div3 li {width:100%;}
.div4 li {width:100%;}

.g_div2 li {width:47%;}


/* pc-sp switch sp */
.pc {display: none;}
.sp {display: block;}


header {width: 90%;margin: 0 auto;padding: 10px 0 0 0 ;}
#main {margin: 0 auto;width: 100%;}
.row {width: 90%;margin: 0 auto;}
footer {width: 90%;margin: 0 auto;}

header .logo {float: none;margin-right: 0px;}
header .copy {float: none;}
header .freedial {float: none;}

.mainimg {width:100%;background-image: url(img/top-img-bg.png);background-size: cover;margin-bottom: 1em;}
.mainimg-inner {width: 95%;margin: 0 auto;}

.top-hoken {padding:20px;margin-bottom: 1em;}

.top-hoken-inner {background-color: #fff;padding: 10px;}
.top-hoken h2 {color:#00b900;font-size: 20px;margin-bottom: 1em;text-align: left;}
.top-hoken p {margin-bottom: 1em;text-align: left;}
.top-hoken-illust {width: 80%;margin: 0 auto;margin-bottom: 1em;}
.top-hoken-btn a{background-color: #00b900;border-radius:10px;padding: 15px 30px;color: #fff;font-weight: bold;font-size: 100%;width:auto;display: inline-block;}

.top-hoken .div4 li {width:45%;}
	
.ryokin {margin-bottom: 0;}
.ryokin li {margin-bottom: 1em;}
.ryokin li:last-child{margin-bottom: 0;}
.ryokin li img {width: 100%;}

.ttl-green {font-size: 20px;font-weight: bold;border-radius: 50px;background-color: #009fa8;color: #fff;display: inline-block;padding: 5px 25px 5px 70px;position: relative;margin: 2em auto;}
.ttl-green:before {content: url(img/h2-icon-home-green.png);position: absolute;left:-5px;bottom:-20px;}

.ttl-blue {font-size: 20px;font-weight: bold;border-radius: 50px;background-color: #1d2088;color: #fff;display: inline-block;padding: 5px 25px 5px 50px;position: relative;margin: 2em auto 1em auto;}
.ttl-blue:before {content: url(img/h2-icon-home-green2.png);position: absolute;left:-25px;bottom:-20px;}

.reason li {box-shadow: 0 2px 4px rgba(0,0,0,0.5);border-radius: 50px 0 0 0;margin-bottom: 1em;padding: 15px;background-color: #c1db80;}

.anshin {}
.anshin .row {width:90%;padding: 20px 0;margin: 0 auto;}
.anshin .ttl {margin: 1em 0;}
.anshin li {font-size: 18px;margin-bottom: 20px;}
.anshin .step {background-color:#00b900;padding: 0;text-align: center;display: block;float: none;width: 100%;font-weight: bold;color: #fff;}
.anshin .content {float: none;width: 90%;padding: 5px;text-align: left;font-weight: bold;color:#4e4e4e;margin: 0 auto;}


.top-gallery {margin-bottom: 1em;}
.top-gallery .row {width: 100%;margin: 0 auto;}
.top-gallery .ttl-area {position: relative;}
.top-gallery .ttl-area .btn-gallery  {position: relative;right:auto;top:auto;margin-bottom: 1em;}
.top-gallery > .row > ul > li {width:85%;padding: 10px;margin: 0 auto 1em auto;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.5);}
.top-gallery > .row > ul > li:last-child{margin-bottom: 0;}
.top-gallery h3 {font-size: 20px;}

.g_div2 {display:-webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;position: relative;}
.g_div2 li {width:47%;padding: 0;position: relative;}
.g_div2 > li > .before {background-color: #666666;color:#fff;left: 30%;bottom:8px;margin: 0 auto;position: absolute;padding:0 10px;}
.g_div2 > li > .after {background-color: #ec775e;color:#fff;left: 35%;bottom:8px;margin: 0 auto;position: absolute;padding:0 10px;}
.g_div2 .arrow {position: absolute;left:40%;top:32%;z-index: 990;}

.row .hosho-bnnr {width: 100%;}


.step {padding-bottom: 1em;}
.step ul {width:90%;margin:0 auto;}
.step li {text-align: left;}
.step li h3{font-size: 20px;text-align: center;}

.btn2 {margin-bottom: 2em;}
.btn2 a{color:#1d2088;border: 4px solid #1d2088;padding: 5px 20px;font-size: 20px;font-weight: bold;border-radius: 50px;display: inline-block;margin: 0 auto;}
.btn2 a:hover {background-color:#1d2088;color:#fff; }

.update h4 {color:#1d2088;font-weight: bold;font-size: 18px;margin-bottom: 1em;}
.update {background-color: #fffbc7;width:100%;padding: 2em 0;margin-bottom: 2em;}
.update ul {width:90%;margin:0 auto;margin-bottom: 2em;}
.update li a {color:#1d2088;margin-bottom: .5em;display: block;text-align: left;}
.update li a:hover {text-decoration: underline;}
	
.btn3 a{font-size: 16px;}
	
	

footer {display:none;text-align: center;}

.ft-illust {float: none;margin-right: 20px;}
.ft-freedial{float: none;margin-right: 20px;padding-top: 5px;margin-right: 5px;}
.ft-txt {float: none;padding-top: 5px;font-weight: bold;color:#fff;}

.ft-tel {z-index: 990;
width: 100%;
display:block;
	padding: 2% 5%;
	background-size: auto auto;
	background-color: #00b900;
	position: fixed;/*←絶対位置*/
  bottom: 0; /*下に固定*/
	box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
}

.ft-tel1{margin: 0 auto;text-align: center;}
.ft-tel2{}
.ft-sp-num {float: none;font-size: 25px;color: #fff;font-family: bilo,sans-serif;font-weight: 700;font-style: normal;line-height:1em;}
.ft-sp-num img{width: 30px;margin-right: 5px;}
.ft-sp-time {text-align: center;color: #fff;font-size: 14px;line-height: 14px;padding: 5px 0 5px 0;display: block;font-weight: bold;}
.ft-tel2 {color: #fff;font-size: 12px;line-height: 12px;margin-bottom: 0;text-align: center;}


.page-bottom {margin-bottom: 100px;}

#page-top {position: fixed;bottom: 80px;right: 10px;font-size: 77%;z-index: 999;}
#page-top a {text-decoration: none;color:#1d2088;width: 100px;padding: 10px 0;text-align: center;display: block;border-radius: 5px;}
#page-top a:hover {text-decoration: none;}


/* SP page company ***************************/
.company {}
.company .row {width: 80%;margin: 0 auto;margin-bottom: 2em;}
.company li{list-style-type:disc;text-align: left;margin-bottom: 1em;}
.li-none li{list-style-type:none;text-align: left;margin-bottom: 1em;}


/* SP page area ***************************/
.area .row {width: 90%;margin: 0 auto;}


/* SP page gallery */
.page-gallery {width:100%;margin-bottom: 3em;padding-bottom: 2em;background-size: auto auto;background-color: rgba(253, 248, 212, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(235, 230, 194, 1) 4px, rgba(235, 230, 194, 1) 8px );}
.page-gallery .row {width: 90%;margin: 0 auto;}
.page-gallery .ttl-area {position: relative;}
.page-gallery .ttl-area .btn {position: absolute;right:0;top:30px;}
.page-gallery > .row > ul > li {padding: 15px;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.5);margin-bottom: 20px;}
.page-gallery h3 {font-size: 20px;font-weight: bold;color:#73b3d9;margin-bottom: 10px;}
.page-gallery .div2 li {width:100%;}
.page-gallery li p {text-align: left;}

.page-gallery .g_div2 {display:-webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;position: relative;}
.page-gallery .g_div2 li {width:47%;padding: 0;position: relative;}
.page-gallery .g_div2 > li > .before {background-color: #666666;color:#fff;left: 30%;bottom:8px;margin: 0 auto;position: absolute;padding:0 10px;}
.page-gallery .g_div2 > li > .after {background-color: #ec775e;color:#fff;left: 35%;bottom:8px;margin: 0 auto;position: absolute;padding:0 10px;}
.page-gallery .g_div2 .arrow {position: absolute;left:40%;top:32%;z-index: 990;}




	}