@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;600&display=swap');
/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Shigyo
	
	Update Description :
	[2022/05/19] Gナビのボタン、リンクオフ時のスタイル追加
	[2022/03/01] ヘッダーにボタン追加
	[2021/06/21] 調整
	[2021/03/31] ヘッダーボタンサイズ微調整
	[2021/02/03] 「futura pt」を「Prompt」に差し替え
	[2020/06/10] SP：ドロワーメニュー位置調整
	[2020/05/26] 新規作成(JPベースからの調整)

====================================== */

/*========== Style Contents ==========

	1. Global Redefinition
	2. Font Redefinition
	3. Base Box Setting
	4. Form Setting
	5. Common Items Setting
		- Basic Link
	 	- Header Items
		- Global Navigation
		- Gnavi Button Action (for SP)
	 	- Footer Items
		- Footer Navigation
		- Breadcrumbs

====================================== */



/*===== ■1. Global Redefinition =====*/
body {
  overflow-x: hidden;
  color: #333333;
  margin: 0px auto;
}

img { max-width: 100%;}
img.auto { max-width: none;}



/*===== ■2. Font Redefinition =====*/
html { font-size: 62.5%;}

html * {
	font-size: 1.8rem;
	line-height: 1.4;
}

html *:not(div):not(p):not(dd) { line-height: 1.2;}

html sup {
  font-size: 1.2rem;
  vertical-align: top;
}

body {
	font-family: 'Prompt', -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Icons", "Helvetica Neue", Verdana, "Arial",sans-serif;
	font-weight: 500;
}

@media (max-width: 768px){
  html * {
    font-size: 1.6rem;
  }
  
	html { font-size: calc(100vw / 76.8 * 2.048);}
}
@media (max-width: 640px){ html { font-size: calc(100vw / 64 * 1.7067);}}
@media (max-width: 480px){ html { font-size: calc(100vw / 48 * 1.28);}}
@media (max-width: 375px){ html { font-size: calc(100vw / 37.5 *1);}}
@media (max-width: 360px){ html { font-size: calc(100vw / 36);}}
@media (max-width: 320px){ html { font-size: calc(100vw / 32);}}



/*===== ■3. Base Box Setting =====*/
svg#bg_triangles {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#bglogo {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	opacity: .25;
}

#bglogo span {
  width: 50%;
  transform: translateX(-8vw) translateY(12vw) rotate(-30deg)
}

article {
  position: relative;
  margin: 0 0 50px;
}

section {
  position: relative;
  margin: 0 20px;
  background: linear-gradient(to right, #ddd 50%, #ebebeb 50.01%, #ebebeb);
}

section section {
  margin: 0 0 50px;
  background: none;
}
section section:last-of-type { margin: 0;}

section > .inner { padding: 0 20px 30px;}
section section > .inner { padding: 0 20px;}
section:last-of-type > .inner { padding: 0 20px 20px;}


@media (max-width: 768px){
  body::before {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: -1;
    width: 35vw;
    height: 100vh;
    background: #d71518;
    transform: translateX(-50%) skew(-50deg);
    content: "";
  }

  #bglogo span {
    width: 100%;
    transform: translateY(10vh) rotate(-40deg);
  }
  #bglogo span img { width: 100%;}

  article { margin: 0 0 8vw; }

  section { margin: 0 2.67vw;}
  
  section section { margin: 0 0 8vw;}
  section section:last-of-type { margin: 0;}
  
  section > .inner { padding: 0 2.67vw 4vw;}
  section section > .inner { padding: 0 2.67vw;}
  section:last-of-type > .inner { padding: 0 2.67vw 2.67vw;}
}

/* 例外処理 */
@media (max-width: 640px){
  body::before { width: 50vw;}
  #bglogo span { transform: translateY(12vh) rotate(-40deg);}
}
@media (max-width: 480px){
  body::before { width: 70vw;}
  #bglogo span { transform: translateY(17vh) rotate(-40deg);}
}
@media (max-width: 375px){
  body::before { width: 80vw;}
  #bglogo span { transform: translateY(15vh) rotate(-40deg);}
}



/*===== ■4. Form Setting =====*/
.select_wrap {
  display: block;
  position: relative;
  height: 45px;
  background: #333;
}

select {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-family: 'Prompt', sans-serif;
}
select::-ms-expand { display: none;}


@media (max-width: 768px){
  .select_wrap { height: 14.68vw;}
}



/*===== ■5. Common Items Setting =====*/
/* Basic Link */
a {
	outline: hidden;
	text-decoration: underline;
}

a:link {
	color: #8a0e10;
	text-decoration: underline;
}

a:visited {
	color: #8a0e10;
	text-decoration: underline;
}

a:hover {
	color: #d71518;
	text-decoration: none;
}

a img { transition: opacity .25s;}
a:hover img {
  opacity: .5;
  transition: opacity .25s;
}

a.soon {
  pointer-events: none;
  opacity: .6;
}
a.link-off {
  pointer-events: none;
}


@media (max-width: 768px){
  a:hover {
    color: #8a0e10;
    text-decoration: underline;
  }
  
  a img { transition: none;}
  a:hover img {
    opacity: 1;
    transition: none;
  }
}


/* Header Items */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 20px 0;
}
header > :first-child {
  width: 35%;
  margin-bottom: 10px;
}
header > :first-child a { display: block;}
header > :first-child a img { max-height: 150px;}

header > :first-child a.boxlink{
  background: #c00;
  border: 1px solid #fff;;
  text-align: center;
  font-weight: bold;
}
header > :first-child a.boxlink:hover {
  background: #8a0e10;
  filter: none;
}

header > :first-child a.boxlink::before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid currentColor;
  transform: translateY(-50%);
  content: "";
}


header > div { width: 65%;}

header #h_option,
header #h_links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

header #h_option > li:not(#option_lang) { margin-left: 10px;}

header #h_option > li:not(#option_lang),
header #h_option > li:not(#option_lang) div { line-height: 0;}

header #h_option #option_lang button { display: none;}

header #h_option #option_lang ul { display: flex;}

header #h_option #option_lang li { margin-left: 10px;}

header #h_option #option_lang ul a {
  color: #fff;
  line-height: 1;
}

header #h_option #option_lang ul a:hover { color: #ccc;}

header #h_links { margin: 10px 0 5px;}

header #h_links > li { margin: 0 0 5px 10px;}

header #h_links #btn-youtube a {
  padding-right: 45px;
}

header #h_links #btn-youtube a span {
  margin-bottom: -15px;
  font-size: 1.4rem;
}

header #h_links #btn-youtube a::before {
  position: absolute;
  content:"";
	display:inline-block;
	width:2.6rem;
	height:2.6rem;
  right: 0;
  top: 55%;
  transform: translate(-50%, -50%);
  
	background:url(../img/common/ico-movie.png) no-repeat;
	background-size:contain;
}


header #h_info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 1px;
  padding: 10px 0;
  background: rgba(255, 255, 255, .8);
}
header #h_info li {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
header #h_info li:not(:last-child) { margin-right: 30px;}

header #h_info li:not(:first-child) p {
  font-weight: bold;
  font-size: 1.8rem;
}

header #h_info li:not(:first-child) p a {
  margin: 0 0 0 10px;
  font-size: 1.4rem;
}

header #h_info li > em {
  width: 70px;
  margin-right: 10px;
  padding: 5px 10px;
  background: #666;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
}

header #h_info li p span {
  margin: 0 2px;
  font-weight: 600;
  font-size: 2.0rem;
}
header #h_info li p span b {
  font-weight: bold;
  font-size: 1.6rem;
}
header #h_info li p span:first-child b {
  position: relative;
  padding: 0 15px 0 2px;
}
header #h_info li p span:first-child b::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 1px;
  background: #333;
  transform: translateY(-50%);
  content: "";
}

header #h_info li p em b {
  margin-left: 5px;
  font-size: 1.4rem;
  font-weight: 600;
}

#btn_gnavi { display: none;}


@media (max-width: 768px){
  header {
    display: block;
    position: relative;
    margin-bottom: 2.67vw;
    padding: 2.67vw 2.67vw 0;
  }
  header > :first-child {
    width: 100%;
  }
  
  header > :first-child > a:first-child{
    width: 80%;
    margin-bottom: 2.67vw;
  }

  header > :first-child a.boxlink {
    font-size: 1.6rem;
  }

  header > :first-child a.boxlink:hover {
    background: #c00;
  }

  header > div { width: 100%;}
  
  header #h_option {
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    margin-bottom: 2.67vw;
  }
  
  header #h_option > li {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 2.67vw;
  }
  
  header #h_option > li:not(#option_lang) {
    margin: 0;
    padding: 0 2.67vw;
  }
  
  header #h_option #option_lang button {
    display: block;
    text-align: center;
    margin-top: 1.34vw;
    padding: 1.34vw 5.34vw;
    border-radius: .67vw;
    background: #333;
    color: #fff;
    font-size: 1.4rem;
  }
  
  header #h_option #option_lang ul {
    display: none;
    position: absolute;
    right: 0;
    z-index: 2;
    width: calc(50vw);
    margin-top: 24vw;
    padding: 2.67vw;
    background: rgba(0, 0, 0, .8);
  }
  header #h_option #option_lang ul::before {
    position: absolute;
    top: -2.67vw;
    right: 12vw;
    border-right: 2.67vw solid transparent;
    border-left: 2.67vw solid transparent;
    border-bottom: 2.67vw solid rgba(0, 0, 0, .8);
    content: "";
  }

  header #h_option #option_lang li {
    margin-left: 0;
    color: #fff;
  }

  header #h_option #option_lang ul a {
    display: inline-block;
    padding: 2.67vw 0;
    color: #fff;
    line-height: 1;
  }

  header #h_option #option_lang ul a:hover { color: #ccc;}

  header #h_links {
    justify-content: space-between;
    align-items: stretch;
    margin: 2.67vw 0 1.34vw;
  }

  header #h_links li {
    width: calc(50% - 1.34vw);
    margin: 0 0 1.34vw;
  }
  
  header #h_links li a.boxlink {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 4vw 2.67vw;
    font-size: 1.4rem;
  }
  
  header #h_links li:nth-of-type(4) a.boxlink{
    padding: 2vw 2.67vw;
  }

  header #h_info {
    display: block;
    padding: 1.34vw;
  }
  header #h_info li {
    padding: .67vw 0;
  }
  header #h_info li:not(:last-child) { margin-right: 0;}

  header #h_info li:not(:first-child) p {
    font-weight: bold;
    font-size: 1.4rem;
  }

  header #h_info li:not(:first-child) p a {
    margin: 0 0 0 2.67vw;
  }

  header #h_info li > em {
    width: 6rem;
    margin-right: 1.34vw;
    padding: 1.34vw;
    font-size: 1.4rem;
    white-space: nowrap;
  }
  header #h_info li > em + p {
    flex: 1;
    font-size: 1.2rem;
  }

  header #h_info li p span { font-size: 1.6rem;}
  header #h_info li p span b { font-size: 1.4rem;}
  
  header #h_info li p span:first-child b { padding-right: 4vw;}
  header #h_info li p span:first-child b::after {
    width: 2.67vw;
  }
  
  header #h_info li p em { font-size: 1.2rem;}
  header #h_info li p em b {
    display: block;
    margin-left: 0;
    font-size: 1.1rem;
  }
}



/* Global Navigation */
#gnavi { border-bottom: 1px solid #8a0e10;}

#gnavi.fixed {
  position: fixed;
  top: 0;
  z-index: 97;
  width: 100%;
}

#gnavi > ul {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0 20px;
  background: #fff;
}

#gnavi > ul > li { width: calc(25% - 5px);}

#gnavi > ul > li button { display: none;}

#gnavi > ul > li:not(:first-child)::after {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 25px;
  margin-left: -4px;
  border-right: 1px dotted #8a0e10;
  transform: translateY(-50%);
  content: "";
}

#gnavi > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  padding: 20px;
  border-bottom: 5px solid #8a0e10;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  text-decoration: none;
}
#gnavi > ul > li > a:hover,
#gnavi > ul > li > a.active,
#gnavi > ul > li.dropdown > a {
  background: #8a0e10;
  color: #fff;
}
#gnavi > ul > li.dropdown > a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 4;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #8a0e10;
  transform: translateX(-50%) translateY(100%);
  content: "";
}

#gnavi > ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  margin: -5px 0 0;
  padding: 20px;
  background: rgba(61, 6, 7, .85);
  color: #fff;
  transition: all .25s;
}
#gnavi > ul > li.dropdown ul {
  visibility: visible;
  opacity: 1;
  transition: all .25s;
}

#gnavi > ul ul li {
  display: inline-block;
  margin-right: 20px;
}

#gnavi > ul ul a {
  display: block;
  position: relative;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

#gnavi > ul ul a::before {
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
  transform: translateY(-50%);
  content: "";
}

#gnavi > ul ul a:hover {
  border-radius: 3px;
  background: #8a0e10;
}

#gnavi > ul li a.pointer-none {
  color: #8a0e10;
}
#gnavi > ul > li > a.pointer-none:hover, 
#gnavi > ul > li > a.pointer-none.active, 
#gnavi > ul > li.dropdown > a.pointer-none {
  color: #fff;
}


@media (max-width: 768px){
  #gnavi {
    display: none;
    position: fixed;
    top: 0;
    right: -50%;
    z-index: 99;
    overflow-y: scroll;
    width: 80%;
    height: 100vh;
    background: rgba(8, 74, 109, 0);
    border-bottom: none;
  }

  #gnavi > ul {
    display: block;
    margin: 0;
    padding: 21.34vw 5.34vw 5.34vw;
    background: inherit;
    -webkit-overflow-scrolling: touch;
  }

  #gnavi > ul > li {
    width: 100%;
    position: relative;
  	border-bottom: .67vw solid #fff;
  }
  

  #gnavi > ul > li:nth-of-type(5) button,
  #gnavi > ul > li:nth-of-type(6) button{
  	display: none;
  }

  #gnavi > ul > li button {
    display: block;
    position: absolute;
    top: 1.87vw;
    right: 0;
    width: 8vw;
    height: 8vw;
    background: rgba(0, 0, 0, .15);
  }
  
	#gnavi > ul > li button::before,
	#gnavi > ul > li button::after {
		position: absolute;
		background: #fff;
		content: "";
	}
	#gnavi > ul > li button::before {
		top: 50%;
		left: 20%;
		width: 60%;
		height: .53vw;
		transform: translateY(-50%);
	}
	#gnavi > ul > li button::after {
		top: 20%;
		left: 50%;
		width: .53vw;
		height: 60%;
		transform: translateX(-50%);
	}
	#gnavi > ul > li.active button::after { display: none;}

  #gnavi > ul > li:not(:first-child)::after { display: none;}

  #gnavi > ul > li > a {
    display: block;
    height: 100%;
    padding: 4vw 8vw;
    border-bottom: none;
    color: #fff;
    font-size: 1.6rem;
  }
  #gnavi > ul > li > a:hover,
  #gnavi > ul > li.dropdown > a { background: inherit;}
  #gnavi > ul > li > a.active { background: rgba(0, 0, 0, .15);}
  #gnavi > ul > li.dropdown > a::after { display: none;}
  
  #gnavi > ul ul {
    display: none;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    transition: none;
  }
  
  #gnavi > ul > li.dropdown ul {
    display: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  #gnavi > ul ul li {
    display: block;
    margin: 0 0 2px;
  }

  #gnavi > ul ul a {
    padding: 2.67vw 4vw;
    background: rgba(0, 0, 0, .15);
    font-size: 1.4rem;
  }

  #gnavi > ul ul a::before { border-width: 1.34vw;}

  #gnavi > ul ul a:hover {
    border-radius: 0;
    background: rgba(0, 0, 0, .15);
  }
  
  #gnavi > ul li a.pointer-none {
    color: #fff;
  }
  
}


/* Gnavi Button Action (for SP) */
@keyframes navSP {
	0% {
    right: -50%;
    opacity: 0;
    background: rgba(8, 74, 109, 0);
	}
	100% {
    right: 0;
    opacity: 1;
    background: rgba(8, 74, 109, 1);
	}
}

@media (max-width: 768px){
  .active body {
    overflow: hidden; 
    height: 100vh;
  }
  .active body::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .8);
    content: "";
  }
  .active #gnavi {
    display: block;
    animation: navSP .4s ease-in-out forwards;
  }
  
  /* button */
  #btn_gnavi {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: fixed;
    z-index: 100;
    top: 2.67vw;
    right: 2.67vw;
    width: 13.34vw;
    height: 16.01vw;
    background: rgba(8, 74, 109, .8);
  }
  
  .fixed {
    position: fixed;
    top: 2.67vw;
    padding: 0;
    z-index: 1000;
  }

  #btn_gnavi::before,
  #btn_gnavi::after {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: .67vw;
    border-radius: 10vw;
    background: rgba(255, 255, 255, .8);
    opacity: 0;
    transform: translateY(-50%) rotate(45deg);
    transition: .5s ease-in;
    content: "";
  }
  
  #btn_gnavi b {
    position: absolute;
    left: 50%;
    bottom: .67vw;
    font-size: 1.0rem;
    color: rgba(255, 255, 255, .8);
    transform: translateX(-50%);
  }

  #btn_gnavi span {
    width: 70%;
    height: .67vw;
    margin: 0 auto 4vw;
    border-radius: 10vw;
    background: rgba(255, 255, 255, .8);
    opacity: 1;
    transform: rotate(-45deg);
  }

  #btn_gnavi span::before,
  #btn_gnavi span::after {
    position: absolute;
    left: 20%;
    width: 60%;
    height: .67vw;
    border-radius: 10vw;
    background: rgba(255, 255, 255, .8);
    transition: .25s ease-in;
    content: "";
  }
  #btn_gnavi span::before { margin-top: -4vw;}
  #btn_gnavi span::after {margin-top: 4vw;}
  
  .active #btn_gnavi {
    background: rgba(0, 0, 0, .15);
    transition: .25s ease-out .25s;
    top: 2.67vw;
  }

  .active #btn_gnavi::before,
  .active #btn_gnavi::after {
    background: #fff;
    opacity: 1;
    transition: .25s ease-out .25s;
  }
  .active #btn_gnavi::before { transform: rotate(45deg);}
  .active #btn_gnavi::after { transform: rotate(-45deg);}

  .active #btn_gnavi span { opacity: 0; transition: .25s ease-out .25s;}

  .active #btn_gnavi span::before,
  .active #btn_gnavi span::after {
    left: -100%;
    transition: .5s ease-out;
  }
}


/* Footer Items */
footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

footer > p {
  width: 100%;
  padding: 10px;
  background: #d71518;
  color: #fff;
  text-align: center;
}

footer > p a {
  color: #fff !important;
  text-decoration: none !important;
}

footer #f_address {
  width: 380px;
  margin: 0 20px 50px;
  padding: 20px;
  background: rgba(235, 235, 235, .9);
}

footer #f_address dt {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 2.0rem;
}

footer #f_address dd p { margin: 15px 0;}

footer #f_address dd p + a {
  display: block;
  width: 35%;
  margin-left: auto;
  line-height: 0;
}

footer #f_address dd p + a img { width: 100%;}


@media (max-width: 768px){
  footer { display: block;}

  footer > p { padding: 1.34vw;}
  footer > p small { font-size: 1.2rem;}

  footer #f_address {
    width: auto;
    margin: 0 2.67vw 8vw;
    padding: 5.34vw 2.67vw;
  }

  footer #f_address dt {
    margin-bottom: 4vw;
    padding-bottom: 4vw;
    border-bottom: 1px solid #ccc;
    font-size: 1.6rem;
    text-align: center;
  }
  
  footer #f_address dd { padding: 0 2.67vw;}

  footer #f_address dd p { margin: 4vw 0;}
  
  footer #f_address dd ul {
    display: block;
    margin: 0 0 4vw;
  }

  footer #f_address dd li:not(:last-child) { margin: 0 0 1.34vw;}

  footer #f_address dd li b {
    width: 13.34vw;
    margin-right: 1.34vw;
    padding: 1.34vw;
  }

  footer #f_address dd ul + a {
    width: 50%;
    margin-left: auto;
  }
}


/* Footer Navigation */
footer #f_sitemap {
  display: flex;
  flex: 1 0 0%;
  margin: 0 20px 50px;
  padding: 20px;
  box-shadow: 0 1px 1px rgba(0,0,0,.15);
  background: rgba(255, 255, 255, .9);
}

footer #f_sitemap * { font-size: 1.4rem;}

footer #f_sitemap ul#sitemap_main { flex: 1;} 
footer #f_sitemap ul#sitemap_sub {
  width: 200px;
  margin: 0 20px;
}

footer #f_sitemap ul#sitemap_main > li:not(:last-child) { margin-bottom: 20px;}

footer #f_sitemap ul#sitemap_main li em {
  display: block;
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
footer #f_sitemap ul#sitemap_main li em::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 25px;
  height: 2px;
  background: #8a0e10;
  content: "";
}

footer #f_sitemap ul#sitemap_main li em.no_after {
  margin-bottom: 0;
  padding-bottom: 0;
}
footer #f_sitemap ul#sitemap_main li em.no_after::after {
  display: none;
}

footer #f_sitemap ul#sitemap_main li em a {
  font-weight: bold;
  font-size: 1.8rem;
  text-decoration: none;
}

footer #f_sitemap ul#sitemap_main li ul {
  margin: 10px 0 0 10px;
}
footer #f_sitemap ul#sitemap_main li li {
  display: inline-block;
  margin-right: 15px;
}

footer #f_sitemap ul#sitemap_main li li:not(:last-child) { margin-bottom: 10px;}

footer #f_sitemap ul#sitemap_sub li { margin-bottom: 10px;}

footer #f_sitemap ul#sitemap_sub li:nth-last-child(2) { margin-top: 20px;}


@media (max-width: 768px){
  footer #f_sitemap {
    display: block;
    margin: 0 2.67vw 8vw;
    padding: 2.67vw;
  }
  
  footer #f_sitemap * a:not(.boxlink) {
    display: inline-block;
    padding: 1.34vw 2.67vw;
    font-size: 1.4rem;
  }
  
  footer #f_sitemap * a.boxlink { font-size: 1.8rem;}
  
  footer #f_sitemap ul#sitemap_main {
    margin-bottom: 4vw;
    padding-bottom: 4vw;
    border-bottom: 1px solid #ccc;
  }

  footer #f_sitemap ul#sitemap_sub {
    width: auto;
    margin: 0;
  }

  footer #f_sitemap ul#sitemap_main > li:not(:last-child) { margin-bottom: 2.67vw;}

  footer #f_sitemap ul#sitemap_main li em {
    margin-bottom: 2.67vw;
    padding-bottom: 2.67vw;
  }
  footer #f_sitemap ul#sitemap_main li em::after { width: 4vw;}

  footer #f_sitemap ul#sitemap_main li em a { font-size: 1.6rem;}

  footer #f_sitemap ul#sitemap_main li ul { margin: 2.67vw 0 0 2.67vw;}
  footer #f_sitemap ul#sitemap_main li li {
    display: inline-block;
    margin-right: 2.67vw;
  }

  footer #f_sitemap ul#sitemap_main li li:not(:last-child) { margin-bottom: 1.34vw;}

  footer #f_sitemap ul#sitemap_sub li { margin-bottom: 2.67vw;}
  footer #f_sitemap ul#sitemap_sub li:nth-last-child(2) { margin-top: 5.34vw;}
  footer #f_sitemap ul#sitemap_sub li:last-child { margin-bottom: 0;}
}


/* Breadcrumbs */

#breadcrumbs * {
  font-size: 1.6rem;
}

#breadcrumbs ol {
  display: flex;
  align-items: center;
  margin: 0 20px 20px;
  font-size: 1.2rem;
}

#breadcrumbs li {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

#breadcrumbs li:after {
	width: 6px;
	height: 6px;
	margin-left: 10px;
	border-top: 1px solid #8B968D;
	border-right: 1px solid #8B968D;
	transform: rotate(45deg);
	content:'';
}
#breadcrumbs li:last-child:after { display: none;}

#breadcrumbs a:hover { color: #333;}


@media (max-width: 768px){
  #breadcrumbs {
    overflow-x: auto;
    white-space: nowrap;
  }
  #breadcrumbs * { font-size: 1.2rem;}
  
  #breadcrumbs ol { margin: 0 2.67vw 2.67vw;}

  #breadcrumbs li { margin-right: 2.67vw;}

  #breadcrumbs li:after {
    width: 1.34vw;
    height: 1.34vw;
    margin-left: 2.68vw;
    border-width: .67vw;
  }
  #breadcrumbs li:last-child { padding-right: 2.67vw;}
}