@charset "utf-8";


/* main ------------- */
#main { margin-bottom:80px; }
.main-con { position:relative; height:100%; margin-top:1%; }
  .main-con .logo { position:absolute; top:0; bottom:0; left:0; right:0; padding-bottom:3%; }
  .main-con .logo img { width:32%; }
  .main-con .copy { position:absolute; top:30%; right:8%; margin:0; padding-top:2.8em;
    font-size:10px; font-weight:bold; letter-spacing:.2em; line-height:2.5; white-space:nowrap;
    -webkit-transform:translateY(-50%); transform:translateY(-50%);
    -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
  .main-con .copy span { margin-bottom:.15em; letter-spacing:.05em;
   -webkit-text-combine:horizontal; -ms-text-combine-horizontal:all;text-combine-upright:all; }
  .main-con .frame { height:100%; }

  .main-con .scroll { overflow:hidden; position:absolute; bottom:9%; left:0; right:0; width:100px; margin:0 auto; padding-bottom:4%; text-align:center; font-size:11px; font-weight:bold; letter-spacing:.1em; color:#213749; cursor:pointer; }
  .main-con .scroll:before, .main-con .scroll:after,
  .main-con .scroll span:before, .main-con .scroll span:after {
    content:""; position:absolute; right:0; bottom:0; left:0; width:1px; margin:0 auto; background:#ccd4d8;
  }
  .main-con .scroll:before, .main-con .scroll span:before {
   content:""; top:2.5em; }
  .main-con .scroll:after, .main-con .scroll span:after { height:1em;
   -webkit-transform:rotate(-45deg) translateX(.03em) translateY(.03em);
   transform:rotate(-45deg) translateX(.03em) translateY(.03em);
   -webkit-transform-origin:left bottom;
   transform-origin:left bottom; }

/* greeting ------------- */
#greeting { padding-bottom:80px; }
.greeting-ttl { margin-bottom:-1.5em; }
.greeting-ttl .secttl { position:relative; top:-1.5em; }
.greeting-box { margin:0 auto; -webkit-box-align:start; align-items:flex-start; }
  .greeting-box figure { position:relative; z-index:2; width:40%; margin:0 auto 1em; }
  .greeting-box figure:before { content:""; position:absolute; top:2%; left:-12%; width:53%; height:1px; background:#fff; -webkit-transform:rotate(-30deg) translateX(-7%); transform:rotate(-30deg) translateX(-7%); }
  .greeting-box figure:after { content:""; position:absolute; top:-10px; left:-10px; z-index:-1;
    width:100%; height:100%; background:#929da6; }

  .greeting-box .summary { width:100%; padding-top:5%; text-align:center; }
  .greeting-box .summary .btn_more { text-align:center; }
  .greeting-box .lead { margin:0 0 2.5em; }
  .greeting-box .lead em { display:inline-block; margin-bottom:.5em; padding:.1em .2em 0; font-size:1.25em; letter-spacing:.2em; line-height:1.5; background:#fff; }
  .greeting-box .lead span { color:#929da6; }

/* bnr */
.induce-content { padding:80px 0 20px; }
.induce-content .induce-bnr:nth-of-type(even) .bg { -webkit-box-ordinal-group:2; order:2; }
.induce-content .induce-bnr:nth-of-type(even) a:before { right:auto; left:0; }
.induce-bnr { position:relative; z-index:2; margin-bottom:60px; }
.induce-bnr a { padding-bottom:4%; color:#213749; }
.induce-bnr a:before { content:""; position:absolute; bottom:0; right:0; z-index:-1;
 width:91%; height:88%; background:#dfe5e8; }
  .induce-bnr .title { position:relative; width:50%; padding:0 2em 5em; text-align:center; }
  .induce-bnr .title .secttl { margin-bottom:0; margin-left:-.7em; }
  .induce-bnr .title .more { margin:0; position:absolute; bottom:.857em; left:0; right:0; }
  .induce-bnr .bg { overflow:hidden; position:relative; width:50%; padding-top:22%; }
  .induce-bnr .bg:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0;
   background:no-repeat center / cover;
  -webkit-transition:all .5s ease-out; transition:all .5s ease-out; }
  .induce-bnr a:hover .bg:before { -webkit-transform: scale(1.05); transform: scale(1.05); }

.induce-bnr.business .bg:before { background-image:url(../img/top/bg_business.jpg); }
.induce-bnr.company .bg:before { background-image:url(../img/top/bg_company.jpg); }
.induce-bnr.history .bg:before { background-image:url(../img/top/bg_history.jpg); }

.induce-bnr a:after { content:""; position:absolute; top:15%; right:-2.5%; width:13%; height:1px; background:#fff; -webkit-transform:rotate(30deg); transform:rotate(30deg); }

.induce-content .induce-bnr:nth-of-type(even) a:after { right:auto; left:-2.5%; -webkit-transform:rotate(-30deg); transform:rotate(-30deg); }

 /* group */
 #group { padding-bottom:50px; }
.logo_group {  width:65%; max-width:220px; }
.group-list li { position:relative; z-index:2; width:50%; border-top:1px solid #ccd6df; }
.group-list li:after { content:""; position:absolute; top:1.25em; bottom:1.25em; width:1px; right:0; background:#ccd6df; }
.group-list li a { display:-webkit-flex; display:flex;
 -webkit-box-align:center; -webkit-align-items:center; align-items:center;
 -webkit-justify-content:center; justify-content:center;
 height:100%; padding:15% 20%; text-align:center; }

/* bnr */
.bnr-area { padding:40px 0; }
.bnr-list li { width:100%; background:#f3f6f8; }
.bnr-list li a { display:block; height:100%; }
.bnr-list li.shop a { padding:10% 8%; background:no-repeat center / cover; }
.bnr-list li.shop img { max-width:50%; }
.bnr-list li.shop.houi a { background-image:url(../img/top/bnr_shopping_houi.jpg); }
.bnr-list li.shop.shozoku a { background-image:url(../img/top/bnr_shopping_shozoku.jpg); }
.bnr-list li + li { margin-top:3%; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  #main { margin-bottom:160px; }
    .main-con { padding:0 5%; }
    .main-con .logo img { width:24.4%; }
    .main-con .copy { right:17%; font-size:.95em; }

  .greeting-box .summary { text-align:left; }
  .greeting-box .summary .btn_more { text-align:right; }
  .greeting-box .lead em { font-size:1.375em; }
  .greeting-box figure { width:33%; }

  .induce-content { padding:100px 0 0; }
  .induce-bnr .bg { width:62%; }
  .induce-bnr .title { width:38%; }
  .induce-bnr a:after { top:18%; }

   #group { padding-bottom:80px; }
  .group-list li { width:25%; }
  .group-list li:nth-child(-n+4) { border-top:none; }
  .group-list li:nth-child(-n+4) a { padding-top:25%; padding-bottom:25%; }
  .group-list li:nth-child(4n):after  { display:none; }


  .bnr-list li { width:48.5%; }
  .bnr-list li + li { margin-top:0; }
}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  #main { min-height:630px; }
    .main-con .frame img { height:100%; }
    .main-con .copy { font-size:1.063em; }

  .main-con .scroll span:before { bottom:100%; z-index:3; background:#506b81; }
  .main-con .scroll:hover span:before {
   -webkit-animation:scroll-liner 1.5s infinite ease-out;
   animation:scroll-liner 1.5s infinite ease-out; }
  .main-con .scroll:hover span:after {
    -webkit-animation:scroll-arrow-liner 1.5s infinite ease-out;
    animation:scroll-arrow-liner 1.5s infinite ease-out; }

  .main-con .scroll span:after { height:0; width:1px; z-index:3; background:#506b81; }

  @-webkit-keyframes scroll-liner {
    0% { top:2.5em; bottom:100% }
    60%, 100% { bottom:0; }
  }
  @keyframes scroll-liner {
    0% { top:2.5em; bottom:100%; }
    60%, 100% { bottom:0; }
  }

  @-webkit-keyframes scroll-arrow-liner {
    0%, 60% { height:0; }
    90%, 100% { height:1em; }
  }
  @keyframes scroll-arrow-liner {
    0%, 60% { height:0; }
    90%, 100% { height:1em; }
  }

  .induce-bnr { margin-bottom:95px; }
  .induce-bnr a:after { top:19.5%; }

  .greeting-box { width:760px; }
  .greeting-box .summary { width:52%; }

  .group-list li a:before { content:""; position:absolute; top:1.25em; left:1.25em; right:1.25em; bottom:1.25em; background:#e0e6ea; z-index:-1; opacity:0; -webkit-transition:all .5s ease-in; transition:all .5s ease-in;  }
  .group-list li a:hover:before { border-radius:5px; opacity:1; }

}

/* 1200px以上(PC) */
@media screen and (min-width: 1200px) {
  #main { height:calc(100vh - 160px); }
}

@media screen and (max-width: 1199px) and (min-width: 960px)  {
  .main-con .scroll { bottom:18%; }
}

/* タブレット縦 ・ スマホ*/
@media screen and (max-width: 959px) and (orientation:portrait), (max-width: 599px){
  #main { height:calc(100vh - 180px); }
  .main-con { background-image:url(../img/top/main_illust_sp.png); }
  .main-con .frame { display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; }

  .main-con .scroll { bottom:0; }

}


/* 959以下・600以上(タブレットのみ) */
@media screen and (max-width: 959px) and (min-width: 600px) {
  .greeting-box { width:100%; }
  .greeting-box .summary { width:56%; }

}

/* 599以下(スマホ)　*/
@media screen and (max-width: 599px){
  #main { min-height:450px; height:calc(100vh - 220px); }
  .main-con .scroll { padding-bottom:10%; }

  .induce-bnr .title .more .button-arrow { font-size:.75em; }

  .group-list li { border-top:none; }
  .group-list li:before { content:""; position:absolute; top:0; left:1em; right:1em; height:1px; background:#ccd6df; }
  .group-list li:nth-child(5), .group-list li:nth-child(6) { border-top:1px solid #ccd6df; }

  .group-list li:nth-child(-n+2):before,
  .group-list li:nth-child(5):before, .group-list li:nth-child(6):before,
  .group-list li:nth-child(2n):after { display:none; }

}



.wrapper {
 
  display: flex;
  justify-content: center;
}

details {
  width: 100%;
}

summary {

  cursor: pointer;
  padding: 15px;
}