@charset "utf-8";

.sp_display{
	display:none;
}
#mmi-container .arial{
  font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
}
#mmi-container main a{
  transition-duration: 0.3s;
}

#mmi-container main img{
  vertical-align: bottom;
}
#mmi-container main .inner{
  width:1000px;
  margin:0 auto!important;
}

#mmi-container .flex{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
}
#mmi-container sup{
  position:relative;
  top:-0.4em;
}
#mmi-container .italic{
  font-style:italic;
}

/**　下層ページ　**/
#mmi-container #sidenavi{
  margin-top:30px;
  width:20.5%;
  margin-bottom:100px;
}
#mmi-container #sidenavi .ttl{
  font-family:noto;
  font-size:20px;
  margin-bottom:0.8em;
  pointer-events: none;
}
#mmi-container #sidenavi > ul{
  border-top:1px solid #f62737;
  border-bottom:1px solid #f62737;
  font-family:noto;
}
#mmi-container #sidenavi > ul > li{
  border-bottom:2px dotted #e3e3e3;
}
#mmi-container #sidenavi > ul > li:last-child {
    border-bottom: none;
}
#mmi-container #sidenavi > ul > li > a{
  display:block;
  padding:1em 0 1em 1.5em;
  color:#000;
  position:relative;
}
#mmi-container #sidenavi > ul > li > a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 0.4em;
    width: 0.3em;
    height: 0.3em;
    margin-top:-0.2em;
    border-top: 0.15em solid #f73543;
    border-right: 0.15em solid #f73543;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#mmi-container #sidenavi > ul > li > a:hover{
  background-color:#f5f5f5;
  text-decoration:none;
}
#mmi-container #sidenavi > ul > li > p{
  display:block;
  padding:1em 0 1em 1.5em;
  color:#000;
  position:relative;
  cursor: pointer;
  transition-duration: 0.3s;
}
#mmi-container #sidenavi > ul > li > p:hover{
  background-color:#f5f5f5;
}
#mmi-container #sidenavi > ul > li > p:before {
    position: absolute;
    top: 50%;
    left: 0.7em;
    margin-top: -0.4em;
    content: '';
    display: inline-block;
    height: 0.8em;
    border-right: 0.15em solid #f73543;
    transition: 0.3s;
}
#mmi-container #sidenavi > ul > li > p:after {
    position: absolute;
    top: 50%;
    left: 0.38em;
    margin-top: -0.075em;
    content: '';
    display: inline-block;
    width: 0.8em;
    border-top: 0.15em solid #f73543;
    transition: 0.3s;
}
#mmi-container #sidenavi > ul > li > p.btn_on:before {
  display:none;
}

#mmi-container #sidenavi li div{
  display:none;
}
#mmi-container #sidenavi li dl{
  margin:0.5em 0 0.5em 2.5em;
}
#mmi-container #sidenavi li.interview dl{
  margin:0.5em 0 0.5em 1.5em;
}
#mmi-container #sidenavi li dl dt.no_link{
  pointer-events: none;
}
#mmi-container #sidenavi li dl dt a{
  color:#f62737;
  position:relative;
  display:block;
}
#mmi-container #sidenavi li dl dt a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: -1em;
    width: 0.3em;
    height: 0.3em;
    margin-top: -0.2em;
    border-top: 0.15em solid #f73543;
    border-right: 0.15em solid #f73543;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#mmi-container #sidenavi li dl dd ul + p{
  margin-top:0.8em;
}
#mmi-container #sidenavi li dl dd li{
  padding-left:1em;
  text-indent:-1em;
  line-height: 1.3;
    margin-top: 0.5em;
}
#mmi-container #sidenavi li dl dd li a{
  color:#000;
  position:relative;
  padding-left:1em;
}
#mmi-container #sidenavi li.interview dl dd li a{
  font-size:0.85em;
  line-height:1.4;
}
#mmi-container #sidenavi li dl dd li a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 0.6em;
    left: 0em;
    width: 0.3em;
    height: 0.3em;
    border-top: 0.15em solid #f73543;
    border-right: 0.15em solid #f73543;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#mmi-container #right_box{
  width:74%;
  margin-top:30px;
  padding-bottom:100px;
}
#mmi-container #right_box h1{
  color:#f62737;
  font-size:22px;
  font-family:noto;
  margin:0 0 0.5em 0!important;
}
#mmi-container #right_box .banner a{
  /* font-size:22px; */
  font-size:18px;
  font-family:noto;
  color:#f62737;
  border:solid 1px;
  border-radius:0.5em;
  display:block;
  line-height:1.5;
  text-align:center;
  padding:0.7em 0 1em 40%;
  background:url(../../img/region_img.png) 0 center /295px no-repeat;
}
#mmi-container #right_box .banner a:hover{
  opacity:0.7;
  text-decoration:none;
}
#mmi-container #right_box .banner a .btn {
    color: #FFF;
    font-size: 14px;
    padding: 0.5em 0em;
    background-color: #f62837;
    border-radius: 3em;
    font-family: noto;
    margin-top: 1.5em;
    display: block;
    text-align: center;
    width: 14em;
    margin:0.8em auto 0;
    position: relative;
}
#mmi-container #right_box .banner a .btn:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.2em;
    right: 0.8em;
    width: 0.3em;
    height: 0.3em;
    border-top: 0.15em solid #FFF;
    border-right: 0.15em solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.3s;
}


@media screen and (min-width:768px){
  #mmi-container #sidenavi > ul{
    display:block!important;
  }
}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){
	html , body{
		overflow-x: hidden;
	}
	#mmi-container {
    font-size: 3.8vw;
}
.sp_display{
	display:block;
}
.pc_display{
	display:none;
}
#mmi-container main .inner{
  width:90%;
}
#mmi-container main > .inner{
  flex-wrap:wrap;
}
  
  #mmi-container #right_box {
    width: 100%;
    margin-top: 5vw;
    padding-bottom: 15vw;
    order:1;
}
  #mmi-container #right_box h1 {
    font-size: 5vw;
}
  #mmi-container #right_box h2 img{
    width:100vw;
    margin-left:-5vw;
    max-width:100vw;
  }
  #mmi-container #right_box .banner a {
    font-size: 4vw;
    padding: 52vw 0 1.5em 0%;
    background: url(../../common/img/banner_img_sp.png) top center /100% no-repeat;
}
  #mmi-container #right_box .banner a .btn {
    font-size: 4vw;
    width: 14em;
    margin: 1.3em auto 0;
}
  
  
  #mmi-container #sidenavi {
    margin-top: 5vw;
    width: 100%;
    margin-bottom:0vw;
}
  #mmi-container #sidenavi .ttl{
  pointer-events: auto;
}
  #mmi-container #sidenavi > ul{
    display:none;
    border-top:0px;
  }
  
  #mmi-container #sidenavi .ttl {
    border: 1px solid #b7c2ce;
    background: #fff;
    padding:0.5em;
    font-size:4vw;
    position:relative;
    margin-bottom:0px;
}
  

  #mmi-container #sidenavi .ttl:before {
    content: '';
    width: 2.7em;
    height: 2.7em;
    background: #173e7f;
    top: 0px;
    right: 0px;
    display: block;
    position: absolute;
}
  #mmi-container #sidenavi .ttl:after {
    content: '';
     border-top: 0.78em solid #FFF;
  border-right: 0.55em solid transparent;
  border-bottom: 0.55em solid transparent;
  border-left: 0.55em solid transparent;
    right:0.8em;
    top:1em;
    position:absolute;
}
  #mmi-container #sidenavi .ttl.btn_on:after {
    transform:rotate(180deg);
    top:0.3em;
}
  
  
  
}