@charset "UTF-8";

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

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	text-align: center;
	margin: 0;
	padding: 0;
	line-height: 1.8;
}

h1,h2,h3,h4 {
	font-size: 18px;
	margin: 0;
	padding: 0;
	font-weight: normal;
	line-height: 1.8;
}

address {
	font-style: normal;
	font-weight: normal;
}

img {
	border: 0;
	vertical-align: bottom;
}

a:link,
a:visited {
	text-decoration: none;
	color: #666666;
}

a:hover,
a:active {
	text-decoration: none;
	color: #444444;
}

table {
	border-collapse:  collapse; /* セルの線を重ねる */
	width:100%;
}
 
tr:nth-child(odd) {
    background-color:  #ddd;    /* 背景色指定 */
}
table th {
	padding: 5px 10px;          /* 余白指定 */
	text-align:left;
}

table td {
	padding: 5px 10px;          /* 余白指定 */
	text-align:left;
}

ul {
	margin: 0;
	padding: 0;
}

ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

ol {
	margin: 0;
	padding: 0;
}

ol li {
	list-style: none;
	margin: 0;
	padding: 0;
}

dl {
	margin: 0;
	padding: 0;
}

dl dt {
	margin: 0;
	padding: 0;
}

dl dd {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}

form {
	margin: 0;
	padding: 0;
	max-width:100%;
}

input {margin: 0;
	padding: 0;
	max-width:100%;
}
textarea {
	margin: 0;
	padding: 0;
	max-width:100%;
}

header, nav, footer, aside, section	{
	margin: 0;
	padding: 0;
	display: block;
}
/******************************************
 汎用クラス
******************************************/
.indent-1 {
	padding-left:1em;
	text-indent:-1em;
}
a.att {
    background: url("https://www.porikakaku.com/wp/wp-content/themes/porikakaku/img/icon_txt.gif") no-repeat left center;
    padding: 5px 0 5px 20px;
    line-height: 2;
}
a.pdf {
    background: url("https://www.porikakaku.com/wp/wp-content/themes/porikakaku/img/icon_pdf.gif") no-repeat left center;
}
.top-box{
	margin-bottom: 30px;
	border-bottom:solid 3px #F3F3F3;
}

/******************************************
 ヘッダー
******************************************/

header {
	width: 100%;
	margin: 0 auto 22px auto;
	background-color:#1d7fb0;
}

#head-l {
	width: 100%;
}

#logo {
	width: 100%;
	margin-bottom: 5px;
	font-size: 120%;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom:10px;
}

#logodisc {
	margin-bottom: 5px;
}

#logodisc h1 {
}

#head-r {
	display: none;
}

#head-r ul {
}

#head-r ul li {
}

#head-r ul li a {
}

#head-r ul li a:hover {
}
#pagedisc h1 {
	color:#FFF;
}
#pagedisc img {
	width:300px;
	margin-top:10px;
}
/******************************************
 グローバルメニュー
******************************************/

nav {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
/*
#global {
	width: 95%;
	margin: 0 auto;
	padding-bottom: 30px;
}

#global ul {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap: wrap;
}

#global ul li {
	-webkit-flex-basis: 49%;
	-ms-flex-basis: 49%;
	flex-basis: 49%;
	border-bottom: 1px solid #000;
}

#global ul li a {
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
}

#global ul li a:hover {

}

#global ul li#now a {
	color: #FFF;
	background-color: #1d7fb0;
}

#global ul li#now a:hover {

}*/


/******************************************
 パンくず
******************************************/

#pankuzu {
	width: 97%;
	margin: 0 auto 30px auto;
	background-color: #eeeeee;
}

#plink {
	text-align: left;
}


#foot_pan {
	width: 100%;
	background-color: #eeeeee;
	padding-top: 3px;
	padding-bottom: 3px;
}

#foot_pan_link {
	width: 97%;
	margin: 0 auto;
}

#foot_pan_link:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#foot_pan_link ul {
}

#foot_pan_link ul li {
	float: left;
	font-size: 90%;
	text-align: left;
}

#foot_pan_link ul li a {
	margin-right: 10px;
	position: relative;
	padding-right: 8px;
	display: block;
}

#foot_pan_link ul li a:after {
	content:">";
	font-size:90%;
	line-height: 1em;
	font-family:"ＭＳ Ｐゴシック",sans-serif;
	color:#999;
	position:absolute;
	right:-5px;
	top: 3px;
	display: block;
}



/******************************************
 メイン画像
******************************************/

#mainbg {
	width: 100%;
	height: 75px;
	background-image: url(img/mainbg.jpg);
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	margin-bottom: 20px;

}

#main {
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
}

/******************************************
 メインコンテンツフレーム
******************************************/

#maincontents {
	width: 97%;
	margin: 0 auto;
}

#cen {
	clear: both;
	width: 100%;
}

#ri {
	width: 100%;
	clear: both;
	margin-bottom: 30px;
}
.line1 {
     background: linear-gradient(transparent 60%, #ffff66 60%);
}

/******************************************
 ライトメニュー
******************************************/

.side {
	width: 100%;
	margin: 0 auto 15px auto;
}

.menubox {
	width: 100%;
}

.menuboxttl {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #efefef;
}

.menuboxttl h4 {
	padding-left: 8px;
	font-weight: bold;
	text-align: left;
}

.menulink {
	width: 100%;
}

.menulink_a {
	text-align: left;
	text-indent: 10px;
	border-bottom: 1px solid #ccc;
}

.menulink_a a {
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
}

.menulink_a a:hover {
	background-color: #efefef;
}

.menulink_a#ac a {
	background-color: #ffffee;
}


/******************************************
 フッター
******************************************/

footer {
}

#foot {
	width: 100%;
	background-color: #F5F5DC;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding-top: 30px;
	padding-bottom: 30px;
}

#flink {
	width: 100%;
	margin: 0 auto 0 auto;
}

.flinkw {
	width: 100%;
	clear: both;
}

.flinkw ul {
}

.flinkw ul li {
	
}
.flinkw ul li.indent1 a{
	text-indent:1em;
}
.flinkw ul li a {
	display: block;
/*	background-image: url(/img/flinkicon.gif);*/
	background-position: 3px center;
	background-repeat: no-repeat;
	background-color: #FBF8EF;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc;
	padding-left: 30px;
	text-align: left;
	
}
.flinkbnr {
	clear: both;
	text-align: center;
	padding-top: 20px;
    display: inline-block;
    margin-left: 10px;
}

.flinkbnr img {
}


#footdisc {
	border-bottom: 1px solid #ccc;
	padding-top: 20px;
	padding-bottom: 20px;
}

#footdisc h4 {
}

#footad {
	width: 100%;
	background-color: #151515;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #fff;
}

#footad address {

}


/******************************************
 ページトップへ
******************************************/

#pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 11px;
}

#pagetop a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 15px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}

#pagetop a:hover {
	text-decoration: none;
	background: #999;
}

/******************************************
 トップページのコンテンツ用CSS
******************************************/

.topmain {
	max-width: 100%;
	margin: 0 auto;
}

.topmain-ttl {
	width: 100%;
	margin: 0 auto 20px auto;
}

.topmain-ttl h2 {
	border: 3px solid #1d7fb0;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding-left:10PX;
	color: #FFF;
	background-color: #1d7fb0;
    text-align: left;
	font-size: 1.4em;;
	
}
.topmain-ttl-sheet h2 {
	border: 3px solid #1d7fb0;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 0 auto 0px auto;
	color: #FFF;
	background-color: #1d7fb0;
	text-align:center;
	font-size: 1.4em;;
}
.topmain-ttl h3 {
	border: 5px solid #000000;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 7px 10px;
	font-size: 120%;
}
.topmain-ttl h4 {
	background: url(/common/img/icon_h4.gif) no-repeat scroll 10px center #f4f2ee;
    border: 1px solid #e3e1dd;
    border-radius: 5px;
    line-height: 30px;
    margin-bottom: 10px;
    text-align: left;
	padding-left:10PX;
}
.topmain-txt {
	clear: both;
	display: block;
	width: 95%;
	margin: 0 auto;
}

.topmain-txt p {
	margin-bottom: 20px;
	text-align: left;
	color: both;
}

.topmain-img-l {
	clear: both;
	margin-bottom: 20px;
}

.topmain-img-r {
	clear: both;
	margin-bottom: 20px;
}

.topmain-img {
	clear: both;
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 20px;
}
.topmain-txt p.ttl {
	background: url(/common/img/icon_h4.gif) no-repeat scroll 10px center #f4f2ee;
    border: 1px solid #e3e1dd;
    border-radius: 5px;
    line-height: 30px;
    margin-bottom: 10px;
	padding-left:10PX;
	text-align: left;
   }

.topmain-img-l img, 
.topmain-img-r img, 
.topmain-img img {
	max-width: 90%;
}

.topflow {
	min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: left;
  padding-bottom: 40px;
}
.topflow ul {
  padding: 0;
}
.topflow li {
  list-style-type: none;
}
.topflow dd {
  margin-left: 0;

}

.topflow .flow {
  border: 3px solid rgb(107,144,219);
}
.topflow .flow > li {
	padding: 30px 5px;
}
.topflow .flow > li:not(:last-child) {
  border-bottom: 3px solid rgb(107,144,219);
  position: relative;
}
.topflow .flow > li:not(:last-child)::before,
.topflow .flow > li:not(:last-child)::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 15%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.topflow .flow > li:not(:last-child)::before {
  border-width: 22px;
  border-top-color: rgb(107,144,219);
}
.topflow .flow > li:not(:last-child)::after {
  border-width: 18px;
  border-top-color: #fff;
}
.topflow .flow > li dl {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.topflow .flow > li dl dt {
	font-size: 20px;
	font-weight: 600;
	color: rgb(107,144,219);
	-ms-flex-preferred-size: 20%;
	flex-basis: 20%;
	margin-right: 1vw;
	text-align: center;
}
.topflow .flow > li dl dt .icon {
	font-size: 12px;
	color: #fff;
	background: rgb(107,144,219);
	background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
	background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
	background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
	padding: 5px 10px;
	margin-bottom: 10px;
	display: block;
	border-radius: 20px;
}
.topflow .flow > li dl dd {
	text-align: left;
	padding: 5px 10px;
	margin-bottom: 10px;
	display: block;
}
/******************************************
 その他ページのコンテンツ用CSS
******************************************/

.submain {
	width: 97%;
	margin: 0 auto;
}

.submain-ttl {
	width: 90%;
	margin: 0 auto 20px auto;
}

.submain-ttl h2 {
	border: 5px solid #000000;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 7px 10px;
	font-size: 120%;
}

.submain-ttl h3 {
	border: 5px solid #000000;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 7px 10px;
	font-size: 120%;
}

.submain-txt {
	clear: both;
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.submain-txt p {
	margin-bottom: 20px;
	text-align: left;
	clear: both;
}
.submain-txt p.cen{
	margin-bottom: 30px;
	font-size: 1.1em;;
	text-align:center;
	line-height: 2em;
}
.submain-img-l {
	clear: both;
	margin-bottom: 20px;
}

.submain-img-r {
	clear: both;
	margin-bottom: 20px;
}


.submain-img {
	clear: both;
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 20px;
}


.submain-img-l img, 
.submain-img-r img, 
.submain-img img {
	max-width: 90%;
}
.submain .col-border{
	border: 1px solid #dddddd;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	margin: 5px;
}

.sitemaptbl {
	width: 97%;
	margin: 0 auto 20px auto;
	text-align: left;
}

.sitemaptbl ul {
}

.sitemaptbl ul li {
	list-style: disc;
	margin-left: 20px;
	margin-bottom: 20px;
}

.sitemaptbl ul li ul {
}

.sitemaptbl ul li ul li {
	list-style: circle;
	margin-left: 20px;
}

/* ローディング画面 */
/* 非表示 */
.is-hide {
    display: none;
}
/* LOADING */
#loader-bg {
  background-color:rgba(0,0,0,0.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
#loader {
  height: 250px;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  position: fixed;
  top: 50%;
  width: 250px;
}
#loader p {
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}
#loader p img {
    display: inline-block;
}

/******************************************
 faq
******************************************/
.faq {
  margin-bottom: 32px; /* 各Q&Aの下に余白 */
}

.faq__dt, .faq__dd {
  position: relative;
  padding-left: 24px;
}

.faq__dt::before, .faq__dd::before {
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.faq__dt {
  font-weight: bold; /* 質問文は太字にしてみました */
  border-bottom: 1px solid #999;
  margin-bottom: 4px; /* 下にちょい余白 */
  text-align: left;
}
.faq__dd {
  text-align: left;
}
.faq__dt::before {
  content: 'Q.';
  color: #c80021; /* 「Q」の文字色 */
}

.faq__dd::before {
  content: 'A.';
  color: #0085C8; /* 「A」の文字色 */
}

/******************************************
 問い合わせ見出し
******************************************/

.submain h2 {
	font-weight:bold;
  position: relative;
  padding: .75em 1em .75em 1.5em;
  margin-top:15px;
  margin-bottom:15px;
  border: 1px solid #ccc;
  text-align:left;
  background-color:#4CB3D0;
  color:#FFF;
}
.submain h2::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #185D90;
  border-radius: 4px;
}
/******************************************
 ご注文ガイド
******************************************/
.mainflow {
	min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: left;
  padding-bottom: 40px;
}
.mainflow ul {
  padding: 0;
}
.mainflow li {
  list-style-type: none;
}
.mainflow dd {
  margin-left: 0;

}

.mainflow .flow {
  border: 3px solid rgb(107,144,219);
}
.mainflow .flow > li {
	padding: 30px 5px;
}
.mainflow .flow > li:not(:last-child) {
  border-bottom: 3px solid rgb(107,144,219);
  position: relative;
}
.mainflow .flow > li:not(:last-child)::before,
.mainflow .flow > li:not(:last-child)::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.mainflow .flow > li:not(:last-child)::before {
  border-width: 22px;
  border-top-color: rgb(107,144,219);
}
.mainflow .flow > li:not(:last-child)::after {
  border-width: 18px;
  border-top-color: #fff;
}
.mainflow .flow > li dl {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display:block;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mainflow .flow > li dl dt {
	font-size: 18px;
	font-weight: 600;
	color: rgb(107,144,219);
	-ms-flex-preferred-size: 20%;
	flex-basis: 20%;
	margin-right: 1vw;
	text-align: center;
	display:block;
}
.mainflow .flow > li .icon {
	font-size: 20px;
	color: #fff;
	background: rgb(107,144,219);
	background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
	background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
	background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
	padding: 5px 10px;
	margin-bottom: 10px;
	display: block;
	border-radius: 20px;
}
.mainflow .flow > li dl dd {
	text-align: left;
	padding: 5px 10px;
	margin-bottom: 10px;
	display: block;
	font-size: 16px;
}

/******************************************
 会社概要
******************************************/
.kaisha {
	width: 100%;
	margin-top:10px;
	margin-bottom:50px;
	table-layout: fixed;
    word-break: break-word;

}

.kaisha th,
.kaisha td {
	border: 1px solid #ccc;
	padding: 20px;
	display:block;
	background-color:#FFF;
}

.kaisha th {
	font-weight: bold;
	background-color: #F7FBFD;
}
@media screen and (max-width: 767px) {
.kaisha,
.kaisha tr,
.kaisha td,
.kaisha th {display:block;}
.kaisha th {width:auto;}
}
/******************************************
 テーブル
******************************************/
table.gnes-table{
  width: 100%;
  border-collapse: collapse;
}
table.gnes-table tr{
  background-color: #fff;
  border: 1px solid #bbb;
}
table.gnes-table th{
	color:#666;
  border:solid 1px #bbb;
  text-align: center;
  padding: 10px 0;
  background: #eee;
}
table.gnes-table td{
  background-color: #fff;
  border:solid 1px #bbb;
  text-align: center;
  padding: 10px 0;
}

/******************************************
wordpress用
******************************************/
.insert-page h1 {
    background: url(img/icon_h4.gif) no-repeat scroll 10px center #f4f2ee;
    border: 1px solid #e3e1dd;
    border-radius: 5px;
    line-height: 40px;
	margin-top: 25px;
    margin-bottom: 20px;
    padding-left: 22px;
	font-size: 1.2em;;
}
.wp-block-buttons>.wp-block-button a:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

/******************************************
=== ボタンを表示するエリア =
******************************************/
.switchArea {
  line-height    : 60px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 150px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 60px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : #78bd78;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 36px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 52px;                /* 丸の横幅           */
  height         : 52px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(90px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}
}