@charset "UTF-8";

/*
Theme Name : sanken_osaka_wp_theme
*/
/*********************************
preset variables
*********************************/
:root {
  --fontSize: 16px;
  --linkColor: #FF8E15;
  --textColor: #333;
  /* color preset */
  --mainColor: #FF8E15;
  --mainDarkColor: #8a4700;
  --subColor: #FF6C14;
  --subDarkColor: #973801;
  /* width preset */
  --gutter: 1.3rem;
  --gap: 3rem;
  --contentWidth: 1200px;
}

/* OVERWRITE RADIX */

/* OVERWRITE end */
/*************************************
* START header
*************************************/
header {
  padding: 1rem 1rem;
  border-top: 7px solid #333;
}

header .header-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  flex-grow: 1;
  max-width: 700px;
  background: url(img/theme/header.png) no-repeat left center;
  background-size: contain;
}

header h1 a {
  display: block;
  padding-top: calc(100% * 80 / 700);
}

header .site-root {
  display: flex;
  justify-content: flex-end;
}

header .site-root a {
  display: block;
  margin-left: 1rem;
  line-height: 1.4;
}

header .site-root a.sitemap {
  padding: .5rem 1rem;
  color: #333;
}

header .site-root a.lang-switch {
  padding: .5rem 1rem .5rem 1.5rem;
  background: #333;
  color: #fff;
  font-weight: 700;
}

header .site-root a.lang-switch i.fas {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  border-radius: 50%;
  background: #fff;
  color: #333;
}

#global-nav {
  background: var(--mainColor);
  padding: 0 .5rem;
}

/*************************************
* END header START main
*************************************/

main img{
	max-width:100%;
	height:auto;
} 

#slide-area {
  position: relative;
  background: #999694;
}

#slide-area .slide-body {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  padding: .5rem 0;
  margin: auto;
  background: #7D7C7C;
}

#slide-area img {
  display: block;
  width: 100%;
}

#slide-area .slide-prev,
#slide-area .slide-next {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 10;
  padding: .5rem 1rem;
}

#slide-area .circle {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #ffffff96;
  color: #7A7878;
  font-size: 2rem;
  cursor: pointer;
}

#slide-area .slide-pagination {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding-top: 1rem;
  line-height: 1;
}

#slide-area .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #B6B6B7;
  opacity: 1;
  margin: 0 .5rem;
}

#slide-area .swiper-pagination-bullet-active {
  background: #B6B6B7;
}

.page-info {
  padding: 1px;
  background: #fff;
}

.thirdlinks {
  display: flex;
  margin: 1.5rem 1rem;
  padding-left: 0;
  flex-wrap: wrap;
  list-style: none;
  line-height: 1.2;
}

.thirdlinks li {
  border-right: 1px solid var(--textColor);
  padding: 0 1rem;
  margin-bottom: 1rem;
}

.thirdlinks li:first-child {
  border-left: 1px solid var(--textColor);
}

.thirdlinks a {
  color: var(--linkColor);
}

@media only screen and (max-width: 800px) {
  .thirdlinks li {
    width: 100%;
    text-indent: -18px;
    margin-bottom: 0;
  }

  .thirdlinks li,
  .thirdlinks li:first-child {
    border: none;
  }

  .thirdlinks li+li {
    margin-top: 1rem;
  }

  .thirdlinks li::before {
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    font-weight: bold;
    color: var(--linkColor);
    padding-right: 0.5rem;
  }
}

.breadcrumbs {
  list-style: none;
  padding-left: 0;
  background: #fff;
  margin: 1.5rem 1rem;
}

.breadcrumbs li {
  display: inline-block;
}

.breadcrumbs li:not(:first-child)::before {
  content: '>';
  margin: 0 .5rem;
}

.breadcrumbs li a {
  color: var(--textColor);
  margin-right: 0.5rem;
  padding-bottom: 0.05rem;
  border-bottom: solid 1px var(--textColor);
}

main article {
  padding: 2rem 1rem 1rem;
  background: #fff;
}

main h1 {
  color: var(--mainColor);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.4;
}

main h1 span.sub {
  display: block;
  color: #91908F;
  font-size: 1rem;
  letter-spacing: 3px;
}

main h2 {
  margin-top: 2rem;
  line-height: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  padding-left: 0.5rem;
  border-left: 6px solid var(--mainColor);
}

main h3 {
  color: var(--mainColor);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

main h4 {
  color: var(--mainColor);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
}

.img_text_wrapper>*:first-child {
  padding-bottom: 1rem;
}

.div_border_box {
  border: solid 1px #ccc;
  margin: 2rem;
  padding: 1rem;
}

.div_border_box p {
  margin-bottom: 0.5rem;
}

.teasers {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  column-gap: 2rem;
}

.teasers a {
  display: block;
  width: 100%;
  max-height: 196px;
  position: relative;
  padding-top: calc(100% * 198 / 259);
  background: no-repeat center center;
  background-size: cover;
}


.teasers li {
  display: block;
  width: 100%;
  max-width: 259px;
  margin-bottom: 1rem;
  border: 1px solid #9F9E9E;
  box-shadow: 5px 5px 6px -3px rgb(150, 150, 150);
}

.teasers li:nth-child(1) a {
  background-image: url(img/theme/teaser_1_new.jpg);
}

.teasers li:nth-child(2) a {
  background-image: url(img/theme/teaser_2_new.png);
}

.teasers li:nth-child(3) a {
  background-image: url(img/theme/teaser_3_new.png);
}

.teasers li:nth-child(4) a {
  background-image: url(img/theme/teaser_4_new.png);
}

.teasers a .text {
  display: grid;
  align-items: center;
  min-height: 3.5rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .3rem .5rem .3rem 40px;
  background: rgba(255, 255, 255, 0.6) url(img/theme/teaser_angle.png) no-repeat left 10px center;
  background-size: 1.4rem;
  color: #333;
  font-weight: 700;
  text-shadow:
    -1px -1px 3px #fff, 0px -1px 3px #fff, 1px -1px 3px #fff,
    -1px 0px 3px #fff, 0px 0px 3px #fff, 1px 0px 3px #fff,
    -1px 1px 3px #fff, 0px 1px 3px #fff, 1px 1px 3px #fff;
  line-height: 1.2;
}

dl.topics-list {
  display: grid;
  grid-template-columns: 8rem 1fr;
}

dl.topics-list dt {
  grid-column: 1;
  padding: 1rem .5rem 1rem 0;
  border-bottom: 1px solid #ccc;
}

dl.topics-list dd {
  grid-column: 2;
  padding: 1rem 0 1rem .5rem;
  border-bottom: 1px solid #ccc;
}

dl.topics-list span.tag-new {
  display: inline-block;
  padding: 0 1.5rem;
  background: #f00;
  color: #fff;
  font-weight: 700;
}

.btn-2 {
  display: inline-grid;
  align-items: center;
  justify-items: end;
  grid-template-columns: auto 1.9rem;
  grid-template-rows: auto;
  padding: .5rem 1rem .5rem 2.5rem;
  background: var(--subColor);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}

.btn-2::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  color: var(--subColor);
  text-align: center;
  line-height: 1rem;
}

table {
  width: 100%;
  table-layout: fixed;
  border: solid 2px;
}

th {
  border: solid 2px;
  padding-left: 0.5rem;
}

td {
  border: solid 1px;
  padding-left: 0.5rem;
}

td.span3 {
  font-size: large;
  font-weight: bold;
  border-top: solid 2px;
  border-bottom: solid 2px;
}

.member,
.member th,
.member td,
.member td.span3 {
  border: none;
  line-height: 2;
}

.member td.span3 {
  background-color: var(--mainColor);
  color: #fff;
}

.member tr:nth-child(2n+1) {
  background-color: #f3f3f3;
}

.flex-box {
  display: flex;
  margin-bottom: 2rem;
}

.flex-text {
  margin-left: 1rem;
}

.flex_img_text_wrapper {
  display: flex;
  justify-content: space-around;
}


.underline {
  text-decoration: underline;
}

/*************************************
* END main START footer
*************************************/
#banners {
  background: #F0F0F0;
}

#banners .banners-body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 2rem;
  padding: 2rem 1rem 50px;
  background: #fff;
}

#banners .banners-body li {
  margin-bottom: 1rem;
}

footer {
  background: #333;
  color: #fff;
}

footer .footer-body {
  display: flex;
}

footer .info {
  padding: 2rem 4rem 2rem 2rem;
}

footer .info p.address {
  padding-left: 76px;
  color: #e0e0e0;
}

footer.en .info p.address {
  padding-left: 72px;
}

footer h1 {
  width: 100%;
  max-width: 366px;
  background: url(img/theme/footer.png) no-repeat left center;
  background-size: contain;
  margin-bottom: 1rem;
}

footer h1 a {
  display: block;
  padding-top: calc(100% * 60 / 366);
}

footer .footer-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  padding: 2rem;
  background: var(--subColor);
}

footer .footer-nav .fnav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
}

footer .footer-nav .fnav li {
  margin-bottom: 1rem;
}

footer .footer-nav .fnav li::before {
  content: "\f105";
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  margin-right: .6rem;
}

footer .footer-nav .fnav a {
  color: #fff;
}

footer a.pagetop {
  width: 100px;
  height: 50px;
  position: absolute;
  bottom: 100%;
  right: 1rem;
  z-index: 2;
  background: url(img/theme/pagetop.png) no-repeat bottom center;
  background-size: cover;
}

/*************************************
* END footer START only for sp
*************************************/
@media only screen and (max-width: 800px) {
  .sp-hide {
    visibility: hidden;
    opacity: 0
  }

  .sp-visible {
    visibility: visible;
    opacity: 1
  }

  .sp-none {
    display: none !important
  }

  .rdx-btn {
    display: block
  }

  body {
    --headerHeight: 50px;
  }

  header {
    padding: 0;
  }

  header .header-body {
    flex-wrap: wrap;
  }

  header h1 {
    height: calc(var(--headerHeight) - 10px);
    margin: 5px var(--headerHeight) 5px 5px;
    background-image: url(img/theme/header_sp.png);
  }

  header .site-root {
    width: 100%;
    background: #333;
  }

  #toggle-nav {
    display: block;
    width: var(--headerHeight);
    height: var(--headerHeight);
    position: fixed;
    top: 7px;
    right: 0;
    z-index: 999;
    background: var(--mainColor);
    color: #fff;
  }

  #toggle-nav #svg-humberger {
    width: 70%;
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
  }

  #toggle-nav .text {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5px;
  }

  header .site-root {
    font-size: .8rem;
  }

  header .site-root a {
    margin-left: 0;
    border-left: 1px solid #fff;
  }

  header .site-root a.sitemap {
    color: #fff;
  }

  #global-nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 998;
    transform: translateX(100%);
    padding-top: calc(var(--headerHeight) + 10px);
    background: var(--subDarkColor);
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    transition: .3s ease-out;
  }

  #global-nav.opened {
    transform: translateX(0);
    visibility: visible;
  }

  .gnav-body {
    flex-direction: column;
    border-right: none;
    transform: translateX(2rem);
    opacity: 0;
    transition: .3s ease-out;
    transition-delay: .4s;
  }

  #global-nav.opened .gnav-body {
    transform: translateX(0);
    opacity: 1;
  }

  .gnav-body>li {
    position: relative;
    border-bottom: 1px dotted #fff;
  }

  .gnav-body>li>a {
    display: block;
    padding: .5rem 1rem;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.4;
  }

  .gnav-body a:hover {
    background: rgba(0, 0, 0, .4);
    text-decoration: none;
  }

  .gnav-body ul.sub-menu {
    background: var(--subColor);
  }

  .gnav-body ul.sub-menu a {
    display: block;
    padding: .5rem 2rem;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    line-height: 1.4;
  }

  .gnav-body .menu-item-has-children:not(.opened)::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    cursor: pointer;
  }

  .gnav-body .menu-item-has-children:not(.opened)::after {
    content: "+";
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    top: 50%;
    right: .3rem;
    z-index: 3;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    color: var(--subDarkColor);
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.3rem;
    cursor: pointer;
  }

  .gnav-body .menu-item-has-children:not(.opened) ul.sub-menu {
    display: none;
  }


  #slide-area .slide-body {
    padding: 0;
  }

  #slide-area .slide-prev,
  #slide-area .slide-next,
  #slide-area .slide-pagination {
    display: none;
  }

  .img_text_wrapper>div {
    display: flex;
    justify-content: center;
  }

  .flex_img_text_wrapper {
    display: block;
  }

  .img_center_wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

  dl.topics-list {
    display: grid;
    grid-template-columns: 100%;
  }

  dl.topics-list dt {
    padding: 1rem 0 .3rem;
    border-bottom: none;
  }

  dl.topics-list dd {
    grid-column: 1;
    padding: 0 0 1rem;
    border-bottom: 1px solid #ccc;
  }

  dl.topics-list span.tag-new {
    margin-left: 1rem;
  }

  main h1 {
    text-align: center;
  }

  #banners .banners-body {
    justify-content: space-around;
  }

  #banners .banners-body li {
    max-width: 250px;
  }

  footer .info {
    width: 100%;
    padding: 2rem;
  }

  footer.en .info p.address {
    padding-left: 80px;
  }

  footer .footer-body {
    flex-direction: column-reverse;
  }

  footer a.pagetop {
    right: 50%;
    transform: translateX(50%);
  }

  footer .info .copyright {
    margin-top: 1rem;
    text-align: center;
    color: #e0e0e0;
  }
}

/*************************************
* END only for sp START only for pc
*************************************/
@media print,
screen and (min-width: 800px) {
  .pc-hide {
    visibility: hidden;
    opacity: 0
  }

  .pc-visible {
    visibility: visible;
    opacity: 1
  }

  .pc-none {
    display: none !important
  }


  .gnav-body {
    display: flex;
    z-index: 2;
  }

  .gnav-body>li {
    width: 100%;
    position: relative;
    padding: .3rem 0;
  }

  .gnav-body>li>a {
    display: grid;
    place-items: center;
    padding: .8rem .5rem;
    border-left: 1px dotted #fff;
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
  }

  .gnav-body>li:last-of-type>a {
    border-right: 1px dotted #fff;
  }

  .gnav-body>li>a:hover {
    text-decoration: none;
    background: var(--subColor);
  }

  .gnav-body ul.sub-menu {
    display: none;
    min-width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    padding: 0 .5rem .5rem;
    background: var(--subDarkColor);
    white-space: nowrap;
  }

  .gnav-body>li:nth-last-of-type(2) ul.sub-menu,
  .gnav-body>li:nth-last-of-type(1) ul.sub-menu {
    left: auto;
    right: 0;
  }

  .gnav-body>li:hover ul.sub-menu {
    display: block;
  }

  .gnav-body ul.sub-menu a {
    display: block;
    padding: .3rem .5rem;
    border-bottom: 1px dotted #fff;
    color: #fff;
    text-align: center;
  }

  .gnav-body ul.sub-menu a:hover {
    background: var(--subColor);
    text-decoration: none;
  }


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

  .img_text_wrapper {
    display: flex;
  }

  .img_text_wrapper>div:first-child>img {
    padding-right: 1rem;
  }

  .flex_img_text {
    max-width: 60%;
    margin-left: 1rem;
  }

  .has_float_img {
    display: block;
  }

  img.img_left {
    float: left;
  }

  main.index {
    background: #F0F0F0;
  }

  main:not(.index) {
    background: linear-gradient(to bottom, #7B7979, #F0F0F0 250px);
  }

  footer .info {
    min-width: 452px;
  }

  footer.en .info {
    min-width: 541px;
  }
}