@charset "UTF-8";

/* ==============================
      基本設定
================================= */
html {
    font-size: 62.5%;
}
body {
  text-align:center;
  font-size: 1.4rem;/* 14px*/
  font-family: 'Noto Sans JP', sans-serif;
  color:#000;
}

#main {
  line-height:1.2;
}

.pc_br  {
  display: none;
}
.pc_br:after {
  content:"・";
}


/* ==============================
      header
================================= */
#headerbg {
  text-align:left;
  width: 100%;
}

#header {
  width: 100%;
}

h1 {
  display:none;
}

.rogo {
  display: block;
  margin:15px 0 5px 10px;
  width:185px;
  height:45px;
  background-color: pink;
}

.time {
  display:none;
}

/* ==============================
      トグルメニュー
================================= */
.nav-toggle {
  position: absolute;
  top: 15px;
  right: 10px;
}

.nav-collapse ul {
  border-top: solid 1px #dfdfdf;
  border-bottom: solid 1px #dfdfdf
}

.nav-collapse ul li a {
  display: block;
  padding: 15px 0;
  width: 100%;
  background-color: #ddd;
  border-bottom: solid 1px #fff;
  color: #000;
  text-align: center;
  text-decoration: none;
}
.nav-collapse ul li a:hover {
  background-color: #ccc;
}
.nav-collapse ul li.last a {
  /*-- background-color: #105481;
  color: #fff;  --*/
  border: none;
}

/*--.nav-collapse ul li.last a:hover {
  background-color: #3c91c9;
}--*/

/* ==============================
      flexslider
================================= */
.flexslider {
  margin:0 auto;
  border:0;
  overflow:hidden;
  background: none;
}

.ofi {
  marign-left: -644px;
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  text-align:center;
  min-height: 200px;
}

/* ==============================
      新着情報
================================= */
.news {
  padding:20px 20px 50px 20px;
  background-color: #e3e3e3;
}

.news h2 {
  color: #0071bc;
}

.news h2:after {
  content: "news";
  display: block;
  margin:0 auto;
  margin-top: 3px;
  color: #666;
  font-weight: normal;
  font-size: 1.2rem;
  width: 60px;
  border-top: solid 1px #ccc;
}

.news dl {
  margin:10px auto 20px auto;
  padding:20px;
  background-color: #fff;
  text-align:left;
  max-width: 500px;
}

.news dd {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: dotted 1px #ccc;
}

.more a {
  padding: 5px;
  color: #fff;
  background-color: #3c91c9;
}

.more a:hover {
  background-color: #105481;
}

/* ==============================
      トップページ　コンテンツ
================================= */
.box {
  position: relative;
  padding-top: 20px;
  width:100%;
  overflow:hidden;
}

.box:before,
.box:after {
  display: block;
  content: "";
  position: absolute;
  z-index: -10;
}

.box:before {
  top: 0;
  margin:-20px;
  width: 0;
  height: 0;
  border: 30vw transparent solid;
  border-left: 30vw #105481 solid;
}
  
.box:after {
  bottom: 200px;
  right:0;
  margin:-20px;
  width: 0;
  height: 0;
  border: 30vw transparent solid;
  border-right: 30vw #f2f5f7 solid;
}

.board {
  margin:0 auto 20px auto;
  padding: 20px;
  border: solid 1px #e2e2e2;
  background-color: #fff;
  max-width: 500px;
}

.board h2 {
  margin-bottom: 5px;
  color: #000;
}

.board h2:after {
  content: "news";
  display: block;
  margin:0 auto;
  margin-top: 3px;
  color: #666;
  font-weight: normal;
  font-size: 1.2rem;
  width: 60px;
  border-top: solid 1px #105481;
}


.about h2:after {
  content: "about us";
  width: 100px;
}

.store h2 {
  color: #f8964f;
}
.store h2:after {
  content: "participation";
  width: 100px;
}

.ins h2:after {
  content: "insurance";
  width: 100px;
}

.cal h2:after {
  content: "calender";
  width: 100px;
}
.board p {
  margin-bottom: 10px;
  text-align:left;
}

.board p.more {
  text-align:center;
}

.board img {
  margin-bottom: 10px;
  max-width: 290px;
  max-height: 60px;
}



/* ==============================
      下層ページ
================================= */

#main {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  border: solid 1px #dfdfdf;
  text-align:left;
}

#main h2 {
  margin-bottom: 5px;
  color: #000;
  text-align:center;
}

#main h2:after {
  content: " ";
  display: block;
  margin:0 auto;
  margin-top: 3px;
  color: #666;
  text-align:center;
  font-weight: normal;
  font-size: 1.2rem;
  width: 60px;
  border-top: solid 1px #105481;
}

#main h3 {
  position:relative;
  left: 2rem;
  margin-bottom: 10px;
}

#main h3:before {
  content:  '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0 15px 10px;
    border-color: transparent transparent #105481 transparent;
    position:  absolute;
    z-index:  1;
    transform: rotate(30deg);
    top: 2px;
    left: -20px;
}

/* ==============================
      ↑ページ上部へ
================================= */
.pageup {
  margin:20px 5px 10px 0px;
  text-align:right;
  font-size: 1.2rem;
}

.pageup a {
  color: #105481;
  text-decoration:none;
}

.pageup a:hover {
  color: #999;
}

/* company -----------------------------------------------------------------------*/
#main .p_message h2:after {
  content: "message";
}

#main .p_message img {
  margin-top: 5px;
  float:right;
}

#main .h_history h2:after {
  content: "history";
}

#main table.t_about {
  margin:0 0 40px 20px;
}

#main table.t_about th {
  padding:10px 20px 5px 10px;
  border-right: solid 1px #dfdfdf;
  border-bottom: dashed 1px #ccc;
  font-weight:normal;
  text-align:right;
}

#main table.t_about td {
  padding:10px 0 5px 30px;
  border-bottom: dashed 1px #ccc;
}

#main table.t_about td span {
  color:#00608d;
  font-weight:bold;
}


#main table.t_about2 {
  margin:0 0 40px 20px;
}

#main table.t_about2 th {
  padding:10px 20px 5px 40px;
  border-right: solid 1px #dfdfdf;
  border-bottom: dashed 1px #ccc;
  font-weight:normal;
  text-align:right;
}

#main table.t_about2 td {
  padding:10px 0 5px 30px;
  border-bottom: dashed 1px #ccc;
}

#main table.t_about2 td span {
  color:#00608d;
  font-weight:bold;
}


#main table.t_about td ul {
  margin:5px 0 20px 3px;
}

#main table.t_about td ul li {
  padding-bottom:10px;
  list-style-type:none;
}

#main table.t_history th {
  padding:15px 0 15px 20px;
}

#main table.t_history td {
  padding:15px 0 15px 0;
  background:url(../image/ber.gif) repeat-y 0 0;
  padding-left: 2rem;
  text-indent: -2rem;
}

#main table.t_history td img {
  position:relative;
  top: 0.5rem;
}

#main table.t_history2 {
  margin:20px 0 40px 25px;
}

#main table.t_history2 tr {
  border-bottom:dashed 1px #dfdfdf;
}

#main table.t_history2 th {
  padding:2px 0 0 15px;
  vertical-align: top;
}

#main table.t_history2 td {
  padding:2px 10px 5px 20px;
}

#main .h_about h2:after {
  content: "company";
}

/* access -----------------------------------------------------------------------*/

#main .h_access h2:after {
  content: "access";
}

/* insurance -----------------------------------------------------------------------*/

#main .h_insurance h2:after {
  content: "insurance";
}

.h_insurance ul li {
  margin-left: 20px;
  padding-left: 1rem;
  text-indent: -1rem;
}

.h_insurance ul li:before {
  content:"■";
  position:relative;
  bottom:0.3rem;
  right:10px;
  color:#ccc;
  font-size:0.8rem;
  
}


/* news -----------------------------------------------------------------------*/

#main .h_news h2:after {
  content: "news";
}

#main .h_news dt {
  color: #105481;
  fibt-weight: bold;
}

#main .h_news dd {
  margin-bottom:10px;
  padding: 10px 0;
  line-height: 1.8rem;
  border-bottom: dotted 1px #dfdfdf;
}

/* participation -----------------------------------------------------------------------*/

#main .h_participation h2:after {
  content: "participation";
}

#main table.part {
  margin:0 0 40px 20px;
}

#main table.part tr.end th, #content table.part tr.end td{
  border-bottom:none;
}

#main table.part th {
  padding:10px 20px 5px 10px;
  border-right: solid 1px #dfdfdf;
  border-bottom: dashed 1px #ccc;
  font-weight:normal;
  text-align:right;
}

#main table.part td {
  padding:10px 0 5px 30px;
  border-bottom: dashed 1px #ccc;
}

/* policy -----------------------------------------------------------------------*/

#main .h_policy h2:after {
  content: "policy";
}

#main .policy1 ul,#main .policy1 ol{
  margin-left:2rem;
}

#main .policy1 ul li {
  list-style-position:outside;
  list-style-type:square;
}

#main .policy1 ol li {
  list-style-position:outside;
  list-style-type:decimal;
}


/* work -----------------------------------------------------------------------*/

#main .h_work h2:after {
  content: "work";
}

#main .h_work h2.h_general:after {
  content: "non-life insurance";
  overflow:visible;
}

#main .h_work h2.h_life:after {
  content: "life insurance";
}

#main .h_work h2.h_winauto:after {
  content: "winauto";
}

/* contact -----------------------------------------------------------------------*/
#main .h_contact h2:after {
  content: "contact";
}

/* management -----------------------------------------------------------------------*/

#main .h_management h2:after {
  content: "management";
  width: 80px;
}

#main .management span {
  display: block;
  margin:0 0 5px 0;
  font-weight: bold;
  color:#00608d;
}

#main .management .inline-btn {
  width:70%;
  text-align:left;
}

#main .h_management ul,
#main .h_management ol {
  margin-left: 3rem;
}

#main .h_management ul li {
  list-style-position: outside;
  list-style-type: square;
}

#main .h_management ol li {
    list-style-position: outside;
    list-style-type: decimal;
}

/* ==============================
      サイドメニュー
================================= */

.side {
  padding:0 20px;
}

.side h3 {
  margin-bottom: 8px;
  padding: 5px 0;
  color: #fff;
  background-color: #aaa;
}


.side .board h3.store {
  background-color: #f8964f;
}


.side .more:before {
  content: "→";
  margin-right: 10px;
}


/* ==============================
      フッターメニュー
================================= */


.footmenu ul li {
  position: relative;
  list-style-type:none;
}

.footmenu ul li a {
  padding: 16px 40px;
  display:block;
  background-color: #666;
  border-bottom: solid 1px #999;
  text-decoration:none;
  text-align:left;
  color: #fff;
  cursor: pointer;
}

.footmenu ul li.last a {
  border: none;
}

.footmenu ul li::before {
  content: "■";
  color: #fff;
  position: absolute;
  top: 1.5rem;
  left: 15px;
}

.footmenu ul li a::after {
  display:block;
  position: absolute;
  top: 1.5rem;
  right: 15px;
  content: " ";
  width: 10px;
  height: 10px;
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.footmenu ul li a.active::after {
  top: 1.8rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  border-bottom: none;
  border-left: none;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}


.footmenu ul li ul li a {
  padding-left: 60px;
  background-color:#ccc;
  color: #000;
  font-size: 1.5rem;
}


.footmenu ul li ul li::before {
  content: "・";
  left: 40px;
  color: #000;
}

.footmenu ul .arrow a::after {
  top: 1.8rem;
  width: 6px;
  height: 6px;
  border-top: none;
  border-right: solid 2px #000;
  border-bottom: solid 2px #000;
  border-left: none;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);}

.footmenu ul li a.arrow::after {
  top: 1.8rem;
  width: 10px;
  height: 10px;
  border-top: none;
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  border-left: none;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.child {
    display: none;
}

/* ==============================
      会社アドレス
================================= */

.adress {
  padding: 15px 15px 20px 15px;
  background-color: #333;
  text-align:left;
  color: #dfdfdf;
}

.adress span {
  font-size: 1.4rem;
}

/* ==============================
      copyright
================================= */

.copyright {
  padding: 10px 15px;
  background-color: #141414;
  color: #dfdfdf;
  font-size:1.2rem;
}

/* ==============================
      clearfix
================================= */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}


@media screen and (min-width: 640px) { /* ======PC用設定ここから====== */

/* ==============================
      ヘッダー
================================= */
#headerbg {
  margin: 20px  auto 0px auto;
  max-width: 1000px;
}


h1 {
  display:block;
  font-size:1.2rem;
  font-weight:normal;
}

.rogo {
  display: block;
  margin:10px 0 10px 0px;
  width:185px;
  height:45px;
  background-color: pink;
}

.time {
  display: block;
  margin-top: -50px;
  float: right;
}


.pc_br {
  display: block;
}

#content {
  margin-top: -4px;
  padding-top:10px;
  overflow:hidden;
}

/* ==============================
      Gメニュー
================================= */

.nav-collapse ul {
  margin: 0 auto;
  max-width: 1000px;
  border: none;
}

.nav-collapse ul li a {
  float: left;
  width: calc( 100% / 5 );
  max-width: 200px;
  background-color: #fff;
}
.nav-collapse ul li.pc_li a {
  font-size: 1.3rem;
  line-height: 1.4rem;
  padding: 11px 0;
}



/* ==============================
      flexslider
================================= */
.ofi {
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover;';
  min-height: 335px;
  height: auto !important;
  height: 335px;
  text-align:center;
}


/* ==============================
      トップページ　コンテンツ
================================= */
.pc_box {
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  max-width: 1000px;
  overflow:hidden;
}

.pc_box .board {
  float:left;
  width: 40%;
  max-width: 440px;
  min-height: 270px;
}
.about,
.ins {
  margin-right:5%;
}

.news {
  margin-top:-10px;
  padding:20px 20px 20px 20px;
}

.news dd {
  margin-top: -2.1rem;
  padding-left: 8rem;
}

/* ==============================
      下層ページ
================================= */
.subpage {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}

section p {
  line-height: 1.8rem;
}

#main {
  margin:0 0 20px 0;
  padding:20px 20px 0 20px;
  float:left;
  width : -webkit-calc(70% - 44px);
  width: calc(70% - 44px);
  max-width: 700px;
}

#main h2 {
  margin-bottom:20px;
}

.side {
  margin:0 0 0 3%;
  padding:0;
  float:left;
  width : -webkit-calc(27% - 4px);
  width: calc(27% - 4px);
  max-width: 300px;
}


/* company -----------------------------------------------------------------------*/

.subpage .p_message {
  background:url(../image/face.gif) no-repeat right  bottom 25px;
}

/* ==============================
      フッターメニュー
================================= */

.footmenu {
  padding:20px 15px;
  background-color: #666;
}

.footmenu ul {
  margin: 0 auto;
  display: -webkit-box; /* before Android4.3 iOS6:Safari */
  display: -ms-flexbox; /* IE10 */
  display: -webkit-flex; /* Pc-safari */
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap : wrap; /*for IE10*/
  -webkit-flex-wrap : wrap; /*for old webkit browser*/
  flex-wrap: wrap;
  height: 120px;
  max-width: 1000px;
  line-height:1.4;
}
.footmenu ul li {
  position: relative;
  text-align:left;
  width: 23%;
  min-height: 0%;
}

.footmenu ul li a {
  padding: 6px 20px;
  border: none;
  text-decoration: underline;
  background-color: transparent;
  font-size: 1.4rem;
}

.footmenu ul li a.toggle {
  pointer-events: none;
  text-decoration: none;
}

.footmenu ul li::before {
  display:none;
  top: 0;
  left: 0px;
}



.footmenu ul li a::after,
.footmenu ul li a.active::after {
  display: none;
}


.footmenu ul li ul li {
  padding-left: 40px;
  padding-bottom:5px;
  width: auto;
}
.footmenu ul li ul li a {
  background-color: transparent;
  padding:0;
  color: #fff;
  font-size: 1.3rem;
}


.footmenu ul li ul li::before {
  color: #fff;
  left: 20px;
}

.footmenu ul .arrow a::after,
.footmenu ul li a.arrow::after {
  display: none;
}
.child {
    display: block;
}


/* ==============================
      会社アドレス
================================= */

.adress  {
  padding: 0;
}

.adress p{
  margin: 0 auto;
  padding: 20px 15px;
  max-width:1000px;
  line-height: 1.4;
}

.inline-btn {
    display: inline-block;
    padding: 10px 2em;
    border: solid 1px;
}
}