@charset "utf-8";

main { padding-top: 145px; }
main section { margin-top: -2px; background: var(--main-white); }

.main-bg     { position: fixed; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
.main-bg img { width: 1920px; }

#main                 { position: relative; min-width: 1170px; margin: 0 auto; padding: 40px 6.61vw 0; }
#main figure          { position: absolute; bottom: 100px; right: 70px; }
#main figure img      { width: max(28vw, 330px); }
#main h1              { position: relative; margin: -100px 0 20px; font-size: max(2.4vw, 3.4rem); line-height: 1.9; writing-mode: vertical-rl; }
#main h1:after        { content: ''; position: absolute; bottom: -30px; left: max(9.9vw, 125px); width: 74px; height: 54px; /*background: url(/common2/images/top/ribbon.svg) no-repeat;*/ }
#main h1 + p          { color: #949494; font-family: 'Montserrat', sans-serif; font-size: .68vw; letter-spacing: 2px; line-height: 1.85; }
#main .main-inner     { display: flex; /*flex-direction: row-reverse; */justify-content: space-between; align-items: center; }
#main #main-vis       { position: relative; }
#main .main-vis01, 
#main .main-vis02     { width: 56vw; min-width: 700px; padding-bottom: 40px; }
#main .main-vis02     { position: absolute; bottom: 0; left: 0; }
#main .main-vis01 img { width: 100%; border-radius: 20px; }
#main .main-vis01 .swiper-pagination-fraction     { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; text-align: right; }
#main .main-vis01 .swiper-pagination-current,
#main .main-vis01 .swiper-pagination-total        { position: relative; }
#main .main-vis01 .swiper-pagination-current:before,
#main .main-vis01 .swiper-pagination-total:before { content: '0'; }
#main .main-vis01 .swiper-pagination-slash        { position: relative; padding: 0 20px; }
#main .main-vis01 .swiper-pagination-slash:before { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: var(--main-gray); transform: translate(-50%, -50%) rotate(-47deg); }
#main .main-vis02 .swiper-pagination-bullets              { right: 265px; bottom: 18px; left: auto; width: auto; }
#main .main-vis02 .swiper-pagination-bullet               { position: absolute; left: 0; width: 160px; height: 1px; border-radius: 0; background: #ccc; opacity: 1; }
#main .main-vis02 .swiper-pagination-bullet-active:before	{ content: ''; position: absolute; top: 0; left: 0; z-index: 2; width: 160px; height: 1px; background: var(--main-red); animation: pagenation 5s linear 1; /*秒数はswiperのautoplay秒数に合わせる*/ }
@keyframes pagenation {
  0%   { width: 0; }
  100% { width: 100%; }
}

.important-news    { margin-top: -2px; padding: 60px 0 2px; background: var(--main-white); }
.important-news dl { display: flex; justify-content: space-between; padding: 30px 70px; border: 1px solid var(--main-gray); border-radius: 15px; font-size: 1.6rem; font-weight: 500; line-height: 1.86; }
.important-news dt { width: 130px; margin-right: 30px; color: var(--main-red); }
.important-news dd { width: calc(100% - 150px); }
.important-news li + li { margin-top: 15px; }
.important-news a  { text-decoration: underline; }
.important-news a:hover { text-decoration: none; }

#news                 { padding: 70px 0; }
#news .inner          { display: flex; justify-content: space-between; position: relative; }
#news .title-area     { width: calc(100% - 820px); }
#news .article-area   { width: 100%; }
#news .tabs           { display: flex; flex-wrap: wrap; }
#news .tabs > input   { display: none; }
#news .tabs .tab_item { display: flex; justify-content: center; align-items: center; min-width: 120px; height: 50px; margin-right: 20px; padding: 0 17px; border: 1px solid var(--main-gray); border-radius: 25px; font-weight: 500; transition: .3s; cursor: pointer; }
#news .tabs .tab_item:last-of-type    { margin-right: 0; }
#news .tabs .tab_item:hover,
#news .tabs input:checked + .tab_item { background: var(--main-gray); color: #fff; }
#news .tab_content    { display: none; width: 100%; margin-top: 40px; border-top: 1px solid #e5e5e5; }
#news .tabs #tab01:checked ~ #tab01_content,
#news .tabs #tab02:checked ~ #tab02_content,
#news .tabs #tab03:checked ~ #tab03_content { display: flex; }
#news .news-list            { width: 100%; }
#news .news-list li a       { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 30px; border-bottom: 1px solid #e5e5e5; width: 930px; }
#news .news-list li a:hover { background: #fff; }
#news .news-list time       { width: 100px; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; }
#news .news-list p          { width: calc(100% - 120px); font-size: 1.6rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#news .more                 { position: absolute; top: 200px; left: 0; font-weight: 500; }
#news .more a               { position: relative; }
#news .more a:before,
#news .more a:after         { position: absolute; top: 50%; transform: translateY(-50%); transition: .3s; }
#news .more a:before        { content: ''; right: -80px; width: 60px; height: 60px; border: 1px solid var(--main-gray); border-radius: 50%; }
#news .more a:after         { content: '\f061'; right: -59px; font-family: 'Font Awesome 6 Pro'; font-size: 1.8rem; font-weight: 300; }
#news .more a:hover:before  { background: var(--main-gray); }
#news .more a:hover:after   { color: #fff; }

#pickup                     { padding: 70px 0 140px; background: #f3f0ea; overflow: hidden; }
#pickup .pickup-bnr         { margin-top: 80px; overflow: visible; }
#pickup .pickup-bnr a       { transition: .3s; }
#pickup .pickup-bnr a:hover { opacity: .7; }
#pickup .pickup-bnr img     { width: 100%; }
#pickup .swiper-button-prev,
#pickup .swiper-button-next { top: -110px; right: auto; left: 50%; }
#pickup .swiper-button-prev { margin-left: 505px; }
#pickup .swiper-button-next { margin-left: 585px; }
#pickup .swiper-button-prev:before,
#pickup .swiper-button-next:before { content: ''; position: absolute; left: -18px; width: 60px; height: 60px; border: 1px solid var(--main-gray); border-radius: 50%; background: #fff; transition: .3s; }
#pickup .swiper-button-prev:after,
#pickup .swiper-button-next:after  { z-index: 2; color: var(--main-black); font-family: 'Font Awesome 6 Pro'; font-size: 1.8rem; font-weight: 300; transition: .3s; }
#pickup .swiper-button-prev:after  { content: '\f060'; }
#pickup .swiper-button-next:after  { content: '\f061'; }
#pickup .swiper-button-prev:hover:before,
#pickup .swiper-button-next:hover:before { background: var(--main-gray); }
#pickup .swiper-button-prev:hover:after,
#pickup .swiper-button-next:hover:after  { color: #fff; }
#pickup .swiper-pagination-bullets       { bottom: -75px; }
#pickup .swiper-pagination-bullet        { width: 10px; height: 10px; border: 1px solid var(--main-red); background: none; opacity: 1; }
#pickup .swiper-pagination-bullet-active { background: var(--main-red); }

.empty { height: 340px; }

.bnr-area         { padding: 70px 0; background: #fff; }
.bnr-area a       { transition: .3s; }
.bnr-area a:hover { opacity: .7; }
.bnr-area img     { width: 100%; }

#service              { padding: 70px 0; }
#service h2           { margin-bottom: 40px;}
#service ol           { margin-top: 60px; border-top: 1px solid #ccc; }
#service li           { counter-increment: mycounter; position: relative; border-bottom: 1px solid #ccc; }
#service li:before    { content: 'SERVICE'; position: absolute; top: 75px; left: -32px; z-index: 2; font-family: 'Montserrat', sans-serif; font-size: 1.3rem; letter-spacing: 2px; transform: rotate(90deg); }
#service li:after     { content: counter(mycounter, decimal-leading-zero); position: absolute; top: 120px; left: -18px; font-family: 'Montserrat', sans-serif; font-size: 5.5rem; letter-spacing: 3px; transform: rotate(90deg); }
#service li:first-child:after { left: -11px; }
#service li a         { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; padding: 40px 130px 40px 30px; transition: .3s; }
#service li a:hover   { background: #fff; }
#service li a:before,
#service li a:after   { position: absolute; top: 50%; transform: translateY(-50%); transition: .3s; }
#service li a:before  { content: ''; right: 20px; width: 90px; height: 90px; border: 1px solid var(--main-gray); border-radius: 50%; }
#service li a:after   { content: '\f061'; right: 50px; font-family: 'Font Awesome 6 Pro'; font-size: 3rem; font-weight: 300; }
#service li a:hover:before { background: var(--main-gray); }
#service li a:hover:after  { color: #fff; }
#service li a figure       { width: 300px; border-radius: 10px; overflow: hidden; }
#service li a figure img   { width: 100%; transition: .3s; }
#service li a:hover figure img { transform: scale(1.1); }
#service li .exp      { width: calc(100% - 380px); }
#service li h3        { margin-bottom: 20px; color: #094; font-size: 2.2rem; font-weight: 500; }
#service li dt        { margin-bottom: 20px; font-size: 3rem; font-weight: 500; }
#service li dd        { padding-right: 40px; line-height: 2.25; }

#info              { margin-bottom: -2px; padding: 70px 0; background: #f3f0ea; }
#info ul           { display: flex; flex-wrap: wrap; margin-top: 70px; }
#info li           { width: 370px; height: 160px; margin: 30px 30px 0 0; }
#info li:nth-child(-n+3) { margin-top: 0; }
#info li:nth-child(3n)   { margin-right: 0; }
#info li a         { display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 10px; background: #fff; font-weight: 500; text-align: center; transition: .3s; }
#info li dt        { margin-bottom: 20px; }
#info li i         { margin: 0 10px; color: var(--main-red); font-size: 4.8rem; transition: .3s; }
#info li:first-child i:first-child { margin-right: 20px; }
#info li a:hover   { background: var(--main-red); color: #fff; }
#info li a:hover i { color: #fff; }

@media (max-width: 767px) {
  main { padding-top: 75px; }
  
  .main-bg img { width: 768px; }
  
  #main                 { min-width: initial; padding: 0 20px; }
  #main figure          { top: 91vw; bottom: auto; right: 0; }
  #main figure img      { width: 100%; }
  #main h1              { margin: 0 0 10px; font-size: 2.5rem; writing-mode: lr; }
  #main h1:after        { bottom: -22px; left: 120px; width: 47px; height: 30px; background-size: cover; }
  #main h1 + p          { font-size: 1rem; }
  #main .main-inner     { display: block; }
  #main .main-vis01, 
  #main .main-vis02     { width: 100%; min-width: initial; padding-bottom: 320px; }
  #main .main-vis01 img { border-radius: 15px; }
  #main .main-vis01 .swiper-pagination-fraction     { font-size: 1rem; }
  #main .main-vis01 .swiper-pagination-slash        { padding: 0 10px; }
  #main .main-vis01 .swiper-pagination-slash:before { width: 16px; }
  #main .main-vis02 .swiper-pagination-bullets              { right: 130px; bottom: 16px; }
  #main .main-vis02 .swiper-pagination-bullet,
  #main .main-vis02 .swiper-pagination-bullet-active:before	{ width: 65px; }
  #main .title-area     { margin: -255px 0 0 40px; }
  
  .important-news    { padding-top: 70px; }
  .important-news dl { display: block; padding: 20px; }
  .important-news dt { width: auto; margin: 0 0 15px; }
  .important-news dd { width: auto; }

  #news                 { padding: 50px 0; }
  #news .inner          { display: block; }
  #news .title-area,
  #news .article-area   { width: auto; }
  #news .article-area   { margin-top: 60px; }
  #news .tabs .tab_item { min-width: 90px; margin-right: 15px; padding: 0 12px; }
  #news .news-list li a { display: block; padding: 15px 10px; width: auto; }
  #news .news-list time { width: auto; font-size: 1.4rem; }
  #news .news-list p    { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: auto; margin-top: 10px; font-size: 1.6rem; white-space: normal; line-height: 1.63; }
  #news .more           { position: static; margin-top: 50px; }
  
  #pickup                     { padding: 50px 0 120px; }
  #pickup .pickup-bnr         { margin-top: 155px; }
  #pickup .swiper-button-prev,
  #pickup .swiper-button-next { top: -75px; left: 40px; }
  #pickup .swiper-button-prev { margin-left: 0; }
  #pickup .swiper-button-next { margin-left: 80px; }
  #pickup .swiper-pagination-bullets { bottom: -55px; }
  
  .empty { height: 200px; }
  
  .bnr-area { padding: 50px 0; }
  
  #service              { padding: 50px 0; }
  #service ol           { margin-top: 40px; }
  #service li:before    { left: -27px; font-size: 1.1rem; }
  #service li:after     { font-size: 5rem; }
  #service li a         { display: block; padding: 40px 0 150px 25px; }
  #service li a:before,
  #service li a:after   { top: auto; transform: translateY(0); }
  #service li a:before  { right: 0; bottom: 50px; width: 70px; height: 70px; }
  #service li a:after   { right: 23px; bottom: 65px; font-size: 2.6rem; }
  #service li a figure  { width: 100%; }
  #service li .exp      { width: auto; margin-top: 30px; }
  #service li h3        { font-size: 2rem; }
  #service li dt        { font-size: 2.6rem; }
  #service li dd        { font-size: 1.5rem; padding-right: 0; line-height: 2; }

  #info       { padding: 50px 0; }
  #info ul    { margin-top: 60px; }
  #info li    { width: calc((100% - 25px) / 2); margin: 25px 25px 0 0; }
  #info li:nth-child(-n+3) { margin-top: 25px; }
  #info li:nth-child(-n+2) { margin-top: 0; }
  #info li:nth-child(3n)   { margin-right: 25px; }
  #info li:nth-child(2n)   { margin-right: 0; }
  #info li dt { margin-bottom: 10px; }
  #info li:first-child i:first-child { margin-right: 8px; }
  #info li i  { margin: 0 2px; font-size: 3.6rem; }
}